diff options
| author | Danilo M. <danix@danix.xyz> | 2026-11-10 10:40:37 +0100 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-11-10 10:40:37 +0100 |
| commit | 84916f24d22cc32b5f51bbc7794b37848469edc8 (patch) | |
| tree | 13752ed2ac600dd03a32bc470ac5d2d6296a51f0 /static/deck.css | |
| parent | 6933aa3220ff420beeb883d25fc68b9c79aa7df1 (diff) | |
| download | deck-it-84916f24d22cc32b5f51bbc7794b37848469edc8.tar.gz deck-it-84916f24d22cc32b5f51bbc7794b37848469edc8.zip | |
feat: fold dashboard cards and a reload button
Each Dashboard card gets a fold button in its title bar. Folded, it
shrinks to one grid row ending at the title bar and cannot be resized;
its height is kept in localStorage (deckit.folded) and restored on
unfold. The grid floats, so nothing moved into the rows a folded card
gave back: cards below it in its columns are pulled up as far as the
space is free, on fold and again once every card has mounted, since a
card restored folded from storage never folds at runtime. Unfolding
needs no mirror; the grid pushes down whatever the regrown card hits.
The installed web app has no browser chrome and so no pull-to-refresh,
which left no way to load new page code on the tablet. A reload button
sits at the top right; JS and CSS are served no-store, so it always
fetches the current code.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Diffstat (limited to 'static/deck.css')
| -rw-r--r-- | static/deck.css | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/static/deck.css b/static/deck.css index f0a9fdc..8a318ef 100644 --- a/static/deck.css +++ b/static/deck.css @@ -37,10 +37,28 @@ body { .topbar { flex: none; + position: relative; display: flex; justify-content: center; padding: 8px 14px 0; } +/* The installed web app has no browser chrome, so no pull-to-refresh. */ +.reload { + position: absolute; + right: 14px; + top: 8px; + min-width: 44px; + min-height: 40px; + font: inherit; + font-size: 1.286rem; + line-height: 1; + color: var(--udt-subtext0); + background: transparent; + border: 1px solid transparent; + border-radius: 10px; + cursor: pointer; +} +.reload:active { background: var(--udt-surface0); border-color: var(--udt-surface1); } .tabs { display: flex; gap: 6px; } .tabs button { font: inherit; @@ -143,6 +161,21 @@ body { touch-action: none; } .panel-drag:hover { color: var(--udt-subtext0); background: var(--udt-surface1); } +.panel-fold { + font: inherit; + min-width: 36px; + min-height: 32px; + color: var(--udt-overlay0); + background: transparent; + border: 0; + border-radius: 6px; + cursor: pointer; +} +.panel-fold:hover { color: var(--udt-subtext0); background: var(--udt-surface1); } +/* Folded: the card ends at its title bar instead of filling its grid row. */ +.grid-stack > .grid-stack-item > .grid-stack-item-content.panel.folded { bottom: auto; } +.panel.folded .panel-body { display: none; } +.panel.folded .panel-head { border-bottom: 0; } .panel-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; } .section-label { |