rearranged
This commit is contained in:
@@ -341,81 +341,6 @@ data:
|
||||
# ---------- LEFT COLUMN ----------
|
||||
- size: small
|
||||
widgets:
|
||||
- type: custom-api
|
||||
title: Meal for the Day
|
||||
cache: 5m
|
||||
|
||||
url: http://glance-helper.glance-system.svc.cluster.local:8000/tandoor/daily
|
||||
parameters:
|
||||
count: 3
|
||||
cooldown: 14
|
||||
|
||||
options:
|
||||
tandoor_url: https://tandoor.dooplex.hu
|
||||
|
||||
template: |
|
||||
{{ $tandoor := .Options.StringOr "tandoor_url" "https://tandoor.dooplex.hu" }}
|
||||
{{ $items := .JSON.Array "items" }}
|
||||
{{ $count := len $items }}
|
||||
{{ $last := sub $count 1 }}
|
||||
|
||||
<style>
|
||||
.mw { display:flex; flex-direction:column; gap:6px; }
|
||||
.mw-meta { opacity:.65; font-size:12px; display:flex; justify-content:space-between; align-items:center; }
|
||||
.mw-box { position:relative; border-radius:14px; background:rgba(255,255,255,0.04); box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset; overflow:hidden; width:100%; }
|
||||
.mw-box input { display:none; }
|
||||
.mw-track { display:flex; transition:transform 0.3s ease; }
|
||||
.mw-s { min-width:100%; width:100%; flex-shrink:0; box-sizing:border-box; }
|
||||
.mw-img { height:150px; background:rgba(0,0,0,0.15); overflow:hidden; }
|
||||
.mw-img img { width:100%; height:100%; object-fit:cover; display:block; }
|
||||
.mw-noimg { height:150px; display:flex; align-items:center; justify-content:center; opacity:.5; font-size:12px; }
|
||||
.mw-name { padding:10px 12px 4px; font-weight:700; opacity:.95; line-height:1.3; overflow-wrap:break-word; word-break:break-word; }
|
||||
.mw-stats { padding:0 12px 6px; font-size:11px; opacity:.5; }
|
||||
.mw-acts { padding:0 12px 10px; display:flex; gap:10px; opacity:.8; font-size:12px; }
|
||||
.mw-acts a, .mw-link { text-decoration:none; color:inherit; display:block; }
|
||||
.mw-p, .mw-n { position:absolute; top:75px; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; align-items:center; justify-content:center; font-size:11px; cursor:pointer; z-index:5; display:none; }
|
||||
.mw-p { left:6px; }
|
||||
.mw-n { right:6px; }
|
||||
.mw-p:hover, .mw-n:hover { background:rgba(0,0,0,0.85); }
|
||||
.mw-dots { display:flex; justify-content:center; gap:5px; padding:3px 0 1px; }
|
||||
.mw-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.2); cursor:pointer; }
|
||||
.mw-dot:hover { background:rgba(255,255,255,0.4); }
|
||||
{{ range $i, $_ := $items }}
|
||||
#mr{{ $i }}:checked ~ .mw-track { transform:translateX(-{{ mul $i 100 }}%); }
|
||||
#mr{{ $i }}:checked ~ .mw-dots .mw-dot:nth-child({{ add $i 1 }}) { background:rgba(255,255,255,0.85); }
|
||||
{{ if gt $i 0 }}.mw-box:hover #mr{{ $i }}:checked ~ .mw-p[data-t="{{ sub $i 1 }}"] { display:flex; }{{ end }}
|
||||
{{ if lt $i $last }}.mw-box:hover #mr{{ $i }}:checked ~ .mw-n[data-t="{{ add $i 1 }}"] { display:flex; }{{ end }}
|
||||
{{ end }}
|
||||
</style>
|
||||
|
||||
<div class="mw">
|
||||
<div class="mw-meta">
|
||||
<span>Today's picks ({{ $count }} total)</span>
|
||||
<a href="{{ $tandoor }}" target="_blank" rel="noreferrer">Open Tandoor</a>
|
||||
</div>
|
||||
{{ if lt $count 1 }}<div class="color-negative">No recipes.</div>{{ else }}
|
||||
<div class="mw-box">
|
||||
{{ range $i, $_ := $items }}<input type="radio" name="mr" id="mr{{ $i }}"{{ if eq $i 0 }} checked{{ end }}>{{ end }}
|
||||
<div class="mw-track">
|
||||
{{ range $r := $items }}{{ $img := $r.String "image" }}{{ $url := $r.String "url" }}{{ $cook := $r.String "cook_url" }}{{ $cooked := $r.Int "cooked_count" }}
|
||||
<div class="mw-s">
|
||||
<a class="mw-link" href="{{ $url }}" target="_blank">
|
||||
<div class="mw-img">{{ if $img }}<img src="{{ $img }}" alt="">{{ else }}<div class="mw-noimg">No image</div>{{ end }}</div>
|
||||
<div class="mw-name">{{ $r.String "name" }}</div>
|
||||
</a>
|
||||
{{ if gt $cooked 0 }}<div class="mw-stats">Cooked {{ $cooked }}× before</div>{{ end }}
|
||||
<div class="mw-acts"><a href="{{ $url }}" target="_blank">Open</a> <a href="{{ $cook }}" target="_blank">Cooked today ✔</a></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if gt $count 1 }}
|
||||
{{ range $i, $_ := $items }}{{ if gt $i 0 }}<label class="mw-p" for="mr{{ sub $i 1 }}" data-t="{{ sub $i 1 }}">◀</label>{{ end }}{{ if lt $i $last }}<label class="mw-n" for="mr{{ add $i 1 }}" data-t="{{ add $i 1 }}">▶</label>{{ end }}{{ end }}
|
||||
<div class="mw-dots">{{ range $i, $_ := $items }}<label class="mw-dot" for="mr{{ $i }}"></label>{{ end }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
# Quick Links - Frequently used
|
||||
- type: bookmarks
|
||||
title: Frequently used
|
||||
@@ -573,11 +498,85 @@ data:
|
||||
{{ end }}
|
||||
</div>
|
||||
# Calendar Widget
|
||||
- type: calendar
|
||||
first-day-of-week: monday
|
||||
# - type: calendar
|
||||
# first-day-of-week: monday
|
||||
# To-Do List
|
||||
- type: to-do
|
||||
title: Tasks
|
||||
- type: custom-api
|
||||
title: Meal for the Day
|
||||
cache: 5m
|
||||
|
||||
url: http://glance-helper.glance-system.svc.cluster.local:8000/tandoor/daily
|
||||
parameters:
|
||||
count: 3
|
||||
cooldown: 14
|
||||
|
||||
options:
|
||||
tandoor_url: https://tandoor.dooplex.hu
|
||||
|
||||
template: |
|
||||
{{ $tandoor := .Options.StringOr "tandoor_url" "https://tandoor.dooplex.hu" }}
|
||||
{{ $items := .JSON.Array "items" }}
|
||||
{{ $count := len $items }}
|
||||
{{ $last := sub $count 1 }}
|
||||
|
||||
<style>
|
||||
.mw { display:flex; flex-direction:column; gap:6px; }
|
||||
.mw-meta { opacity:.65; font-size:12px; display:flex; justify-content:space-between; align-items:center; }
|
||||
.mw-box { position:relative; border-radius:14px; background:rgba(255,255,255,0.04); box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset; overflow:hidden; width:100%; }
|
||||
.mw-box input { display:none; }
|
||||
.mw-track { display:flex; transition:transform 0.3s ease; }
|
||||
.mw-s { min-width:100%; width:100%; flex-shrink:0; box-sizing:border-box; }
|
||||
.mw-img { height:150px; background:rgba(0,0,0,0.15); overflow:hidden; }
|
||||
.mw-img img { width:100%; height:100%; object-fit:cover; display:block; }
|
||||
.mw-noimg { height:150px; display:flex; align-items:center; justify-content:center; opacity:.5; font-size:12px; }
|
||||
.mw-name { padding:10px 12px 4px; font-weight:700; opacity:.95; line-height:1.3; overflow-wrap:break-word; word-break:break-word; }
|
||||
.mw-stats { padding:0 12px 6px; font-size:11px; opacity:.5; }
|
||||
.mw-acts { padding:0 12px 10px; display:flex; gap:10px; opacity:.8; font-size:12px; }
|
||||
.mw-acts a, .mw-link { text-decoration:none; color:inherit; display:block; }
|
||||
.mw-p, .mw-n { position:absolute; top:75px; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; align-items:center; justify-content:center; font-size:11px; cursor:pointer; z-index:5; display:none; }
|
||||
.mw-p { left:6px; }
|
||||
.mw-n { right:6px; }
|
||||
.mw-p:hover, .mw-n:hover { background:rgba(0,0,0,0.85); }
|
||||
.mw-dots { display:flex; justify-content:center; gap:5px; padding:3px 0 1px; }
|
||||
.mw-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.2); cursor:pointer; }
|
||||
.mw-dot:hover { background:rgba(255,255,255,0.4); }
|
||||
{{ range $i, $_ := $items }}
|
||||
#mr{{ $i }}:checked ~ .mw-track { transform:translateX(-{{ mul $i 100 }}%); }
|
||||
#mr{{ $i }}:checked ~ .mw-dots .mw-dot:nth-child({{ add $i 1 }}) { background:rgba(255,255,255,0.85); }
|
||||
{{ if gt $i 0 }}.mw-box:hover #mr{{ $i }}:checked ~ .mw-p[data-t="{{ sub $i 1 }}"] { display:flex; }{{ end }}
|
||||
{{ if lt $i $last }}.mw-box:hover #mr{{ $i }}:checked ~ .mw-n[data-t="{{ add $i 1 }}"] { display:flex; }{{ end }}
|
||||
{{ end }}
|
||||
</style>
|
||||
|
||||
<div class="mw">
|
||||
<div class="mw-meta">
|
||||
<span>Today's picks ({{ $count }} total)</span>
|
||||
<a href="{{ $tandoor }}" target="_blank" rel="noreferrer">Open Tandoor</a>
|
||||
</div>
|
||||
{{ if lt $count 1 }}<div class="color-negative">No recipes.</div>{{ else }}
|
||||
<div class="mw-box">
|
||||
{{ range $i, $_ := $items }}<input type="radio" name="mr" id="mr{{ $i }}"{{ if eq $i 0 }} checked{{ end }}>{{ end }}
|
||||
<div class="mw-track">
|
||||
{{ range $r := $items }}{{ $img := $r.String "image" }}{{ $url := $r.String "url" }}{{ $cook := $r.String "cook_url" }}{{ $cooked := $r.Int "cooked_count" }}
|
||||
<div class="mw-s">
|
||||
<a class="mw-link" href="{{ $url }}" target="_blank">
|
||||
<div class="mw-img">{{ if $img }}<img src="{{ $img }}" alt="">{{ else }}<div class="mw-noimg">No image</div>{{ end }}</div>
|
||||
<div class="mw-name">{{ $r.String "name" }}</div>
|
||||
</a>
|
||||
{{ if gt $cooked 0 }}<div class="mw-stats">Cooked {{ $cooked }}× before</div>{{ end }}
|
||||
<div class="mw-acts"><a href="{{ $url }}" target="_blank">Open</a> <a href="{{ $cook }}" target="_blank">Cooked today ✔</a></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if gt $count 1 }}
|
||||
{{ range $i, $_ := $items }}{{ if gt $i 0 }}<label class="mw-p" for="mr{{ sub $i 1 }}" data-t="{{ sub $i 1 }}">◀</label>{{ end }}{{ if lt $i $last }}<label class="mw-n" for="mr{{ add $i 1 }}" data-t="{{ add $i 1 }}">▶</label>{{ end }}{{ end }}
|
||||
<div class="mw-dots">{{ range $i, $_ := $items }}<label class="mw-dot" for="mr{{ $i }}"></label>{{ end }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
- type: split-column
|
||||
max-columns: 2
|
||||
|
||||
Reference in New Issue
Block a user