diff --git a/docs/configuration.md b/docs/configuration.md index 4d725ea..fbba1f9 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -734,7 +734,11 @@ You can hover over the "ERROR" text to view more information. | Name | Type | Required | | ---- | ---- | -------- | -| sites | array | yes | | +| sites | array | yes | +| style | string | no | + +##### `style` +To make the widget scale appropriately in a `full` size column, set the style to the experimental `dynamic-columns-experimental` option. ##### `sites` @@ -908,10 +912,14 @@ Preview: | Name | Type | Required | | ---- | ---- | -------- | | groups | array | yes | +| style | string | no | ##### `groups` An array of groups which can optionally have a title and a custom color. +##### `style` +To make the widget scale appropriately in a `full` size column, set the style to the experimental `dynamic-columns-experimental` option. + ###### Properties for each group | Name | Type | Required | Default | | ---- | ---- | -------- | ------- | @@ -997,6 +1005,7 @@ Preview: | ---- | ---- | -------- | | stocks | array | yes | | sort-by | string | no | +| style | string | no | ##### `stocks` An array of stocks for which to display information about. @@ -1004,6 +1013,9 @@ An array of stocks for which to display information about. ##### `sort-by` By default the stocks are displayed in the order they were defined. You can customize their ordering by setting the `sort-by` property to `absolute-change` for descending order based on the stock's absolute price change. +##### `style` +To make the widget scale appropriately in a `full` size column, set the style to the experimental `dynamic-columns-experimental` option. + ###### Properties for each stock | Name | Type | Required | | ---- | ---- | -------- | diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index b25d3f8..1e64def 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -333,6 +333,44 @@ body { padding: 0 var(--content-bounds-padding); } +.dynamic-columns { + gap: calc(var(--widget-content-vertical-padding) / 2); + display: grid; + grid-template-columns: repeat(var(--columns-per-row), 1fr); + margin: calc(0px - var(--widget-content-vertical-padding) / 2) calc(0px - var(--widget-content-horizontal-padding) / 2); +} + +.dynamic-columns > * { + padding: calc(var(--widget-content-vertical-padding) / 2) calc(var(--widget-content-horizontal-padding) / 1.5); + background-color: var(--color-background); + border-radius: var(--border-radius); +} + +.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } +.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } +.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } +.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } +.dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } + +@container widget (max-width: 1500px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } + .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } + .dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } +} +@container widget (max-width: 1250px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } + .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } +} +@container widget (max-width: 850px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } +} +@container widget (max-width: 550px) { + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } +} + .cards-vertical { flex-direction: column; } @@ -820,6 +858,7 @@ body { } .monitor-site-status-icon { + flex-shrink: 0; margin-left: auto; width: 2rem; height: 2rem; @@ -1082,6 +1121,8 @@ body { --content-bounds-padding: 10px; } + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .forum-post-list-item { flex-flow: row-reverse; } diff --git a/internal/assets/templates/bookmarks.html b/internal/assets/templates/bookmarks.html index 068ab4d..a422009 100644 --- a/internal/assets/templates/bookmarks.html +++ b/internal/assets/templates/bookmarks.html @@ -1,23 +1,37 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} +{{ if ne .Style "dynamic-columns-experimental" }} +{{ else }} +
+ {{ range .Groups }} +
+ {{ template "group" . }} +
+ {{ end }} +
+{{ end }} +{{ end }} + +{{ define "group" }} +{{ if ne .Title "" }}
{{ .Title }}
{{ end }} + {{ end }} diff --git a/internal/assets/templates/monitor.html b/internal/assets/templates/monitor.html index fa97302..e618f8b 100644 --- a/internal/assets/templates/monitor.html +++ b/internal/assets/templates/monitor.html @@ -1,39 +1,53 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} +{{ if ne .Style "dynamic-columns-experimental" }} +{{ else }} + +{{ end }} +{{ end }} + +{{ define "site" }} +{{ if .IconUrl }} + +{{ end }} +
+ {{ .Title }} + +
+{{ if eq .StatusStyle "good" }} +
+ + + +
+{{ else }} +
+ + + +
+{{ end }} {{ end }} diff --git a/internal/assets/templates/stocks.html b/internal/assets/templates/stocks.html index 516b917..24c67a0 100644 --- a/internal/assets/templates/stocks.html +++ b/internal/assets/templates/stocks.html @@ -1,25 +1,39 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} +{{ if ne .Style "dynamic-columns-experimental" }} +{{ else }} +
+ {{ range .Stocks }} +
+ {{ template "stock" . }} +
+ {{ end }} +
+{{ end }} +{{ end }} + +{{ define "stock" }} +
+ {{ .Symbol }} +
{{ .Name }}
+
+ + + + + + + +
+
{{ printf "%+.2f" .PercentChange }}%
+
{{ .Currency }}{{ .Price | formatPrice }}
+
{{ end }} diff --git a/internal/widget/bookmarks.go b/internal/widget/bookmarks.go index afa8a05..0863d98 100644 --- a/internal/widget/bookmarks.go +++ b/internal/widget/bookmarks.go @@ -22,6 +22,7 @@ type Bookmarks struct { HideArrow bool `yaml:"hide-arrow"` } `yaml:"links"` } `yaml:"groups"` + Style string `yaml:"style"` } func (widget *Bookmarks) Initialize() error { diff --git a/internal/widget/monitor.go b/internal/widget/monitor.go index 90a984f..c4d78f8 100644 --- a/internal/widget/monitor.go +++ b/internal/widget/monitor.go @@ -54,6 +54,7 @@ type Monitor struct { StatusText string `yaml:"-"` StatusStyle string `yaml:"-"` } `yaml:"sites"` + Style string `yaml:"style"` } func (widget *Monitor) Initialize() error { diff --git a/internal/widget/stocks.go b/internal/widget/stocks.go index c8e5eda..27f292b 100644 --- a/internal/widget/stocks.go +++ b/internal/widget/stocks.go @@ -14,6 +14,7 @@ type Stocks struct { widgetBase `yaml:",inline"` Stocks feed.Stocks `yaml:"stocks"` Sort string `yaml:"sort-by"` + Style string `yaml:"style"` } func (widget *Stocks) Initialize() error {