Update dynamic columns & remove the need to specify style

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 |
 | ---- | ---- | -------- |

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: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 > * {
+        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 (max-width: 1250px) {
-    .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
+@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 (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 (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: 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; }

internal/assets/templates/bookmarks.html

@@ -1,37 +1,23 @@
 {{ template "widget-base.html" . }}
 
 {{ define "widget-content" }}
-{{ if ne .Style "dynamic-columns-experimental" }}
-<ul class="list list-gap-24 list-with-separator">
-    {{ range .Groups }}
-    <li class="bookmarks-group"{{ if .Color }} style="--bookmarks-group-color: {{ .Color.AsCSSValue }}"{{ end }}>
-        {{ template "group" . }}
-    </li>
-    {{ end }}
-</ul>
-{{ else }}
-<div class="dynamic-columns">
+<div class="dynamic-columns list-gap-24 list-with-separator">
     {{ range .Groups }}
     <div class="bookmarks-group"{{ if .Color }} style="--bookmarks-group-color: {{ .Color.AsCSSValue }}"{{ end }}>
-        {{ template "group" . }}
+        {{ if ne .Title "" }}<div class="bookmarks-group-title size-h3 margin-bottom-3">{{ .Title }}</div>{{ end }}
+        <ul class="list list-gap-2">
+        {{ range .Links }}
+        <li class="flex items-center gap-10">
+            {{ if ne "" .Icon }}
+            <div class="bookmarks-icon-container">
+                <img class="bookmarks-icon{{ if .IsSimpleIcon }} simple-icon{{ end }}" src="{{ .Icon }}" alt="" loading="lazy">
+            </div>
+            {{ end }}
+            <a href="{{ .URL }}" class="bookmarks-link {{ if .HideArrow }}bookmarks-link-no-arrow {{ end }}color-highlight size-h4" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
+        </li>
+        {{ end }}
+        </ul>
     </div>
     {{ end }}
 </div>
 {{ end }}
-{{ end }}
-
-{{ define "group" }}
-{{ if ne .Title "" }}<div class="bookmarks-group-title size-h3 margin-bottom-3">{{ .Title }}</div>{{ end }}
-<ul class="list list-gap-2">
-{{ range .Links }}
-<li class="flex items-center gap-10">
-    {{ if ne "" .Icon }}
-    <div class="bookmarks-icon-container">
-        <img class="bookmarks-icon{{ if .IsSimpleIcon }} simple-icon{{ end }}" src="{{ .Icon }}" alt="" loading="lazy">
-    </div>
-    {{ end }}
-    <a href="{{ .URL }}" class="bookmarks-link {{ if .HideArrow }}bookmarks-link-no-arrow {{ end }}color-highlight size-h4" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
-</li>
-{{ end }}
-</ul>
-{{ end }}

internal/assets/templates/markets.html

@@ -1,39 +1,25 @@
 {{ template "widget-base.html" . }}
 
 {{ define "widget-content" }}
-{{ if ne .Style "dynamic-columns-experimental" }}
-<ul class="list list-gap-20 list-with-separator">
-    {{ range .Markets }}
-    <li class="flex items-center gap-15">
-        {{ template "market" . }}
-    </li>
-    {{ end }}
-</ul>
-{{ else }}
-<div class="dynamic-columns">
+<div class="dynamic-columns list-gap-20 list-with-separator">
     {{ range .Markets }}
     <div class="flex items-center gap-15">
-        {{ template "market" . }}
-    </div>
-    {{ end }}
-</div>
-{{ end }}
-{{ end }}
-
-{{ define "market" }}
-<div class="min-width-0">
-    <a{{ if ne "" .SymbolLink }} href="{{ .SymbolLink }}" target="_blank" rel="noreferrer"{{ end }} class="color-highlight size-h3 block text-truncate">{{ .Symbol }}</a>
-    <div class="text-truncate">{{ .Name }}</div>
-</div>
+        <div class="min-width-0">
+            <a{{ if ne "" .SymbolLink }} href="{{ .SymbolLink }}" target="_blank" rel="noreferrer"{{ end }} class="color-highlight size-h3 block text-truncate">{{ .Symbol }}</a>
+            <div class="text-truncate">{{ .Name }}</div>
+        </div>
 
-<a class="market-chart" {{ if ne "" .ChartLink }} href="{{ .ChartLink }}" target="_blank" rel="noreferrer"{{ end }}>
-    <svg class="market-chart shrink-0" viewBox="0 0 100 50">
-        <polyline fill="none" stroke="var(--color-text-subdue)" stroke-width="1.5px" points="{{ .SvgChartPoints }}" vector-effect="non-scaling-stroke"></polyline>
-    </svg>
-</a>
+        <a class="market-chart" {{ if ne "" .ChartLink }} href="{{ .ChartLink }}" target="_blank" rel="noreferrer"{{ end }}>
+            <svg class="market-chart shrink-0" viewBox="0 0 100 50">
+                <polyline fill="none" stroke="var(--color-text-subdue)" stroke-width="1.5px" points="{{ .SvgChartPoints }}" vector-effect="non-scaling-stroke"></polyline>
+            </svg>
+        </a>
 
-<div class="market-values shrink-0">
-    <div class="size-h3 text-right {{ if eq .PercentChange 0.0 }}{{ else if gt .PercentChange 0.0 }}color-positive{{ else }}color-negative{{ end }}">{{ printf "%+.2f" .PercentChange }}%</div>
-    <div class="text-right">{{ .Currency }}{{ .Price | formatPrice }}</div>
+        <div class="market-values shrink-0">
+            <div class="size-h3 text-right {{ if eq .PercentChange 0.0 }}{{ else if gt .PercentChange 0.0 }}color-positive{{ else }}color-negative{{ end }}">{{ printf "%+.2f" .PercentChange }}%</div>
+            <div class="text-right">{{ .Currency }}{{ .Price | formatPrice }}</div>
+        </div>
+    </div>
+    {{ end }}
 </div>
 {{ end }}

internal/assets/templates/monitor.html

@@ -1,18 +1,8 @@
 {{ template "widget-base.html" . }}
 
 {{ define "widget-content" }}
-{{ if ne .Style "dynamic-columns-experimental" }}
-<ul class="list list-gap-20 list-with-separator">
-    {{ range .Sites }}
-    <li class="monitor-site flex items-center gap-15">
-        {{ template "site" . }}
-    </li>
-    {{ end }}
-</ul>
-{{ else }}
-
 {{ if not (and .ShowFailingOnly (not .HasFailing)) }}
-<ul class="dynamic-columns">
+<ul class="dynamic-columns list-gap-20 list-with-separator">
     {{ range .Sites }}
     {{ if and $.ShowFailingOnly (eq .StatusStyle "ok" ) }} {{ continue }} {{ end }}
     <div class="flex items-center gap-15">
@@ -29,7 +19,6 @@
 </div>
 {{ end }}
 {{ end }}
-{{ end }}
 
 {{ define "site" }}
 {{ if .IconUrl }}

internal/widget/bookmarks.go

@@ -21,7 +21,6 @@ type Bookmarks struct {
 			HideArrow    bool   `yaml:"hide-arrow"`
 		} `yaml:"links"`
 	} `yaml:"groups"`
-	Style string `yaml:"style"`
 }
 
 func (widget *Bookmarks) Initialize() error {

internal/widget/stocks.go → internal/widget/markets.go

@@ -14,7 +14,6 @@ type Markets struct {
 	StocksRequests []feed.MarketRequest `yaml:"stocks"`
 	MarketRequests []feed.MarketRequest `yaml:"markets"`
 	Sort           string               `yaml:"sort-by"`
-	Style          string               `yaml:"style"`
 	Markets        feed.Markets         `yaml:"-"`
 }
 

internal/widget/monitor.go

@@ -53,9 +53,8 @@ type Monitor struct {
 		StatusText              string           `yaml:"-"`
 		StatusStyle             string           `yaml:"-"`
 	} `yaml:"sites"`
-	Style           string `yaml:"style"`
-	ShowFailingOnly bool   `yaml:"show-failing-only"`
-	HasFailing      bool   `yaml:"-"`
+	ShowFailingOnly bool `yaml:"show-failing-only"`
+	HasFailing      bool `yaml:"-"`
 }
 
 func (widget *Monitor) Initialize() error {