Update dynamic columns & remove the need to specify style

This commit is contained in:
Svilen Markov 2024-08-31 18:37:08 +01:00
parent 99866507f5
commit e6979c77e3
8 changed files with 93 additions and 114 deletions

View File

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

View File

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

View File

@ -1,26 +1,9 @@
{{ 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" . }}
</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 }}
@ -34,4 +17,7 @@
</li>
{{ end }}
</ul>
</div>
{{ end }}
</div>
{{ end }}

View File

@ -1,26 +1,9 @@
{{ 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>
@ -36,4 +19,7 @@
<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 }}

View File

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

View File

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

View File

@ -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:"-"`
}

View File

@ -53,7 +53,6 @@ type Monitor struct {
StatusText string `yaml:"-"`
StatusStyle string `yaml:"-"`
} `yaml:"sites"`
Style string `yaml:"style"`
ShowFailingOnly bool `yaml:"show-failing-only"`
HasFailing bool `yaml:"-"`
}