diff --git a/docs/configuration.md b/docs/configuration.md index fed6fa4..1fb1638 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -1047,10 +1047,6 @@ You can hover over the "ERROR" text to view more information. | ---- | ---- | -------- | ------- | | sites | array | yes | | | show-failing-only | boolean | no | false | -| 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. ##### `show-failing-only` Shows only a list of failing sites when set to `true`. @@ -1286,14 +1282,10 @@ 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 | | ---- | ---- | -------- | ------- | @@ -1471,7 +1463,6 @@ Preview: | ---- | ---- | -------- | | markets | array | yes | | sort-by | string | no | -| style | string | no | ##### `markets` An array of markets for which to display information about. @@ -1479,9 +1470,6 @@ An array of markets for which to display information about. ##### `sort-by` By default the markets 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 a8da75c..81e1424 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -115,20 +115,11 @@ color: var(--color-primary); } -.list { --list-half-gap: 0rem; } -.list-gap-2 { --list-half-gap: 0.1rem; } -.list-gap-4 { --list-half-gap: 0.2rem; } -.list-gap-10 { --list-half-gap: 0.5rem; } -.list-gap-14 { --list-half-gap: 0.7rem; } -.list-gap-20 { --list-half-gap: 1rem; } -.list-gap-24 { --list-half-gap: 1.2rem; } -.list-gap-34 { --list-half-gap: 1.7rem; } - .list > *:not(:first-child) { margin-top: calc(var(--list-half-gap) * 2); } -.list-with-separator > *:not(:first-child) { +.list.list-with-separator > *:not(:first-child) { margin-top: var(--list-half-gap); border-top: 1px solid var(--color-separator); padding-top: var(--list-half-gap); @@ -457,17 +448,24 @@ kbd:active { flex-direction: column; } +/* TODO: refactor, otherwise I hope I never have to change dynamic columns again */ .dynamic-columns { - gap: calc(var(--widget-content-vertical-padding) / 2); + --list-half-gap: 0.5rem; + gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); 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); + padding-left: var(--widget-content-horizontal-padding); + border-left: 1px solid var(--color-separator); + min-width: 0; +} + +.dynamic-columns > *:first-child { + padding-top: 0; + border-top: none; + border-left: none; } .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } @@ -476,23 +474,49 @@ kbd:active { .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) { +@container widget (max-width: 599px) { + .dynamic-columns { gap: 0; } .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns > * { + border-left: none; + padding-left: 0; + } + .dynamic-columns > *:not(:first-child) { + margin-top: calc(var(--list-half-gap) * 2); + } + .dynamic-columns.list-with-separator > *:not(:first-child) { + margin-top: var(--list-half-gap); + border-top: 1px solid var(--color-separator); + padding-top: var(--list-half-gap); + } +} +@container widget (min-width: 600px) and (max-width: 849px) { .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } + .dynamic-columns > :nth-child(2n-1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 850px) and (max-width: 1249px) { .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } + .dynamic-columns > :nth-child(3n+1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 1250px) and (max-width: 1499px) { .dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } + .dynamic-columns > :nth-child(4n+1) { + border-left: none; + padding-left: 0; + } } -@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; } +@container widget (min-width: 1500px) { + .dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } + .dynamic-columns > :nth-child(5n+1) { + border-left: none; + padding-left: 0; + } } .cards-vertical { @@ -721,6 +745,7 @@ kbd:active { .market-chart { margin-left: auto; width: 6.5rem; + flex-shrink: 0; } .market-chart svg { @@ -1517,3 +1542,11 @@ kbd:active { .margin-bottom-auto { margin-bottom: auto; } .padding-block-5 { padding-block: 0.5rem; } .scale-half { transform: scale(0.5); } +.list { --list-half-gap: 0rem; } +.list-gap-2 { --list-half-gap: 0.1rem; } +.list-gap-4 { --list-half-gap: 0.2rem; } +.list-gap-10 { --list-half-gap: 0.5rem; } +.list-gap-14 { --list-half-gap: 0.7rem; } +.list-gap-20 { --list-half-gap: 1rem; } +.list-gap-24 { --list-half-gap: 1.2rem; } +.list-gap-34 { --list-half-gap: 1.7rem; } diff --git a/internal/assets/templates/bookmarks.html b/internal/assets/templates/bookmarks.html index a422009..a4e2c97 100644 --- a/internal/assets/templates/bookmarks.html +++ b/internal/assets/templates/bookmarks.html @@ -1,37 +1,23 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -{{ if ne .Style "dynamic-columns-experimental" }} - -{{ else }} -
+
{{ range .Groups }}
- {{ template "group" . }} + {{ if ne .Title "" }}
{{ .Title }}
{{ end }} +
    + {{ range .Links }} +
  • + {{ if ne "" .Icon }} +
    + +
    + {{ end }} + {{ .Title }} +
    • + {{ end }} +
{{ end }}
{{ end }} -{{ end }} - -{{ define "group" }} -{{ if ne .Title "" }}
{{ .Title }}
{{ end }} - -{{ end }} diff --git a/internal/assets/templates/markets.html b/internal/assets/templates/markets.html index 652427a..a979321 100644 --- a/internal/assets/templates/markets.html +++ b/internal/assets/templates/markets.html @@ -1,39 +1,25 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -{{ if ne .Style "dynamic-columns-experimental" }} - -{{ else }} -
+
{{ range .Markets }}
- {{ template "market" . }} +
+ {{ .Symbol }} +
{{ .Name }}
+
+ + + + + + + +
+
{{ printf "%+.2f" .PercentChange }}%
+
{{ .Currency }}{{ .Price | formatPrice }}
+
{{ end }}
{{ end }} -{{ end }} - -{{ define "market" }} -
- {{ .Symbol }} -
{{ .Name }}
-
- - - - - - - -
-
{{ printf "%+.2f" .PercentChange }}%
-
{{ .Currency }}{{ .Price | formatPrice }}
-
-{{ end }} diff --git a/internal/assets/templates/monitor.html b/internal/assets/templates/monitor.html index ecec09f..0d8fd55 100644 --- a/internal/assets/templates/monitor.html +++ b/internal/assets/templates/monitor.html @@ -1,18 +1,8 @@ {{ template "widget-base.html" . }} {{ define "widget-content" }} -{{ if ne .Style "dynamic-columns-experimental" }} - -{{ else }} - {{ if not (and .ShowFailingOnly (not .HasFailing)) }} -