-
-
Notifications
You must be signed in to change notification settings - Fork 280
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add dynamic columns style for bookmarks, stocks & monitor sites
- Loading branch information
1 parent
503562f
commit 714e1b6
Showing
8 changed files
with
156 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,37 @@ | ||
{{ 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 }}> | ||
{{ 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> | ||
{{ 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 }} | ||
<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 }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,39 +1,53 @@ | ||
{{ 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"> | ||
{{ if .IconUrl }} | ||
<img class="monitor-site-icon" src="{{ .IconUrl }}" alt="" loading="lazy"> | ||
{{ end }} | ||
<div> | ||
<a class="size-h3 color-highlight" href="{{ .Url }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a> | ||
<ul class="list-horizontal-text"> | ||
{{ if not .Status.Error }} | ||
<li>{{ .StatusText }}</li> | ||
<li>{{ .Status.ResponseTime.Milliseconds | formatNumber }}ms</li> | ||
{{ else if .Status.TimedOut }} | ||
<li class="color-negative">Timed Out</li> | ||
{{ else }} | ||
<li class="color-negative" title="{{ .Status.Error }}">ERROR</li> | ||
{{ end }} | ||
</ul> | ||
</div> | ||
{{ if eq .StatusStyle "good" }} | ||
<div class="monitor-site-status-icon"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)"> | ||
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /> | ||
</svg> | ||
</div> | ||
{{ else }} | ||
<div class="monitor-site-status-icon"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-negative)"> | ||
<path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /> | ||
</svg> | ||
</div> | ||
{{ end }} | ||
{{ 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 }} | ||
<img class="monitor-site-icon" src="{{ .IconUrl }}" alt="" loading="lazy"> | ||
{{ end }} | ||
<div> | ||
<a class="size-h3 color-highlight" href="{{ .Url }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a> | ||
<ul class="list-horizontal-text"> | ||
{{ if not .Status.Error }} | ||
<li>{{ .StatusText }}</li> | ||
<li>{{ .Status.ResponseTime.Milliseconds | formatNumber }}ms</li> | ||
{{ else if .Status.TimedOut }} | ||
<li class="color-negative">Timed Out</li> | ||
{{ else }} | ||
<li class="color-negative" title="{{ .Status.Error }}">ERROR</li> | ||
{{ end }} | ||
</ul> | ||
</div> | ||
{{ if eq .StatusStyle "good" }} | ||
<div class="monitor-site-status-icon"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)"> | ||
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /> | ||
</svg> | ||
</div> | ||
{{ else }} | ||
<div class="monitor-site-status-icon"> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-negative)"> | ||
<path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /> | ||
</svg> | ||
</div> | ||
{{ end }} | ||
{{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,39 @@ | ||
{{ template "widget-base.html" . }} | ||
|
||
{{ define "widget-content" }} | ||
{{ if ne .Style "dynamic-columns-experimental" }} | ||
<ul class="list list-gap-20 list-with-separator"> | ||
{{ range .Stocks }} | ||
<li class="flex items-center gap-15"> | ||
<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> | ||
<div class="text-truncate">{{ .Name }}</div> | ||
</div> | ||
|
||
<a class="stock-chart" {{ if ne "" .ChartLink }} href="{{ .ChartLink }}" target="_blank" rel="noreferrer"{{ end }}> | ||
<svg class="stock-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="stock-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> | ||
{{ 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"> | ||
<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="stock-chart" {{ if ne "" .ChartLink }} href="{{ .ChartLink }}" target="_blank" rel="noreferrer"{{ end }}> | ||
<svg class="stock-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="stock-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> | ||
{{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters