Add dynamic columns style for bookmarks, stocks & monitor sites

This commit is contained in:
Svilen Markov 2024-05-12 22:07:58 +01:00
parent 503562f2e5
commit 714e1b6d29
8 changed files with 156 additions and 58 deletions

View File

@ -734,7 +734,11 @@ You can hover over the "ERROR" text to view more information.
| Name | Type | Required | | 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` ##### `sites`
@ -908,10 +912,14 @@ Preview:
| Name | Type | Required | | Name | Type | Required |
| ---- | ---- | -------- | | ---- | ---- | -------- |
| groups | array | yes | | groups | array | yes |
| style | string | no |
##### `groups` ##### `groups`
An array of groups which can optionally have a title and a custom color. 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 ###### Properties for each group
| Name | Type | Required | Default | | Name | Type | Required | Default |
| ---- | ---- | -------- | ------- | | ---- | ---- | -------- | ------- |
@ -997,6 +1005,7 @@ Preview:
| ---- | ---- | -------- | | ---- | ---- | -------- |
| stocks | array | yes | | stocks | array | yes |
| sort-by | string | no | | sort-by | string | no |
| style | string | no |
##### `stocks` ##### `stocks`
An array of stocks for which to display information about. 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` ##### `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. 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 ###### Properties for each stock
| Name | Type | Required | | Name | Type | Required |
| ---- | ---- | -------- | | ---- | ---- | -------- |

View File

@ -333,6 +333,44 @@ body {
padding: 0 var(--content-bounds-padding); 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 { .cards-vertical {
flex-direction: column; flex-direction: column;
} }
@ -820,6 +858,7 @@ body {
} }
.monitor-site-status-icon { .monitor-site-status-icon {
flex-shrink: 0;
margin-left: auto; margin-left: auto;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -1082,6 +1121,8 @@ body {
--content-bounds-padding: 10px; --content-bounds-padding: 10px;
} }
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.forum-post-list-item { .forum-post-list-item {
flex-flow: row-reverse; flex-flow: row-reverse;
} }

View File

@ -1,9 +1,26 @@
{{ template "widget-base.html" . }} {{ template "widget-base.html" . }}
{{ define "widget-content" }} {{ define "widget-content" }}
{{ if ne .Style "dynamic-columns-experimental" }}
<ul class="list list-gap-24 list-with-separator"> <ul class="list list-gap-24 list-with-separator">
{{ range .Groups }} {{ range .Groups }}
<li class="bookmarks-group"{{ if .Color }} style="--bookmarks-group-color: {{ .Color.AsCSSValue }}"{{ end }}> <li class="bookmarks-group"{{ if .Color }} style="--bookmarks-group-color: {{ .Color.AsCSSValue }}"{{ end }}>
{{ template "group" . }}
</li>
{{ end }}
</ul>
{{ else }}
<div class="dynamic-columns">
{{ 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 }} {{ if ne .Title "" }}<div class="bookmarks-group-title size-h3 margin-bottom-3">{{ .Title }}</div>{{ end }}
<ul class="list list-gap-2"> <ul class="list list-gap-2">
{{ range .Links }} {{ range .Links }}
@ -17,7 +34,4 @@
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
</li>
{{ end }}
</ul>
{{ end }} {{ end }}

View File

@ -1,9 +1,26 @@
{{ template "widget-base.html" . }} {{ template "widget-base.html" . }}
{{ define "widget-content" }} {{ define "widget-content" }}
{{ if ne .Style "dynamic-columns-experimental" }}
<ul class="list list-gap-20 list-with-separator"> <ul class="list list-gap-20 list-with-separator">
{{ range .Sites }} {{ range .Sites }}
<li class="monitor-site flex items-center gap-15"> <li class="monitor-site flex items-center gap-15">
{{ template "site" . }}
</li>
{{ end }}
</ul>
{{ else }}
<ul class="dynamic-columns">
{{ range .Sites }}
<div class="flex items-center gap-15">
{{ template "site" . }}
</div>
{{ end }}
</ul>
{{ end }}
{{ end }}
{{ define "site" }}
{{ if .IconUrl }} {{ if .IconUrl }}
<img class="monitor-site-icon" src="{{ .IconUrl }}" alt="" loading="lazy"> <img class="monitor-site-icon" src="{{ .IconUrl }}" alt="" loading="lazy">
{{ end }} {{ end }}
@ -33,7 +50,4 @@
</svg> </svg>
</div> </div>
{{ end }} {{ end }}
</li>
{{ end }}
</ul>
{{ end }} {{ end }}

View File

@ -1,9 +1,26 @@
{{ template "widget-base.html" . }} {{ template "widget-base.html" . }}
{{ define "widget-content" }} {{ define "widget-content" }}
{{ if ne .Style "dynamic-columns-experimental" }}
<ul class="list list-gap-20 list-with-separator"> <ul class="list list-gap-20 list-with-separator">
{{ range .Stocks }} {{ range .Stocks }}
<li class="flex items-center gap-15"> <li class="flex items-center gap-15">
{{ template "stock" . }}
</li>
{{ end }}
</ul>
{{ else }}
<div class="dynamic-columns">
{{ range .Stocks }}
<div class="flex items-center gap-15">
{{ template "stock" . }}
</div>
{{ end }}
</div>
{{ end }}
{{ end }}
{{ define "stock" }}
<div class="shrink min-width-0"> <div class="shrink min-width-0">
<a{{ if ne "" .SymbolLink }} href="{{ .SymbolLink }}" target="_blank" rel="noreferrer"{{ end }} class="color-highlight size-h3 block text-truncate">{{ .Symbol }}</a> <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 class="text-truncate">{{ .Name }}</div>
@ -19,7 +36,4 @@
<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="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="text-right">{{ .Currency }}{{ .Price | formatPrice }}</div>
</div> </div>
</li>
{{ end }}
</ul>
{{ end }} {{ end }}

View File

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

View File

@ -54,6 +54,7 @@ type Monitor struct {
StatusText string `yaml:"-"` StatusText string `yaml:"-"`
StatusStyle string `yaml:"-"` StatusStyle string `yaml:"-"`
} `yaml:"sites"` } `yaml:"sites"`
Style string `yaml:"style"`
} }
func (widget *Monitor) Initialize() error { func (widget *Monitor) Initialize() error {

View File

@ -14,6 +14,7 @@ type Stocks struct {
widgetBase `yaml:",inline"` widgetBase `yaml:",inline"`
Stocks feed.Stocks `yaml:"stocks"` Stocks feed.Stocks `yaml:"stocks"`
Sort string `yaml:"sort-by"` Sort string `yaml:"sort-by"`
Style string `yaml:"style"`
} }
func (widget *Stocks) Initialize() error { func (widget *Stocks) Initialize() error {