hansdezwart/bgclock
1
0
Fork 0
Code Issues Actions Releases Activity

Move the presets under Delay and give them a heading

Browse Source 
They sat between Match and Time as three bare buttons, above the two
settings they set. Now they follow Delay, after the numbers they are a
shortcut for, with a "Preset time limits" heading and "Quickly pick a
setting." — the same heading-and-description shape every other row in the
sheet already has.

The row stacks at every width rather than only under the .row--wide
breakpoint: three buttons wide enough to read "3m / 15s" can't share a
line with a label on any phone.

The buttons themselves are untouched, and are still found by class rather
than position, so the highlight logic came along unchanged — checked that
opening the sheet lights the preset matching the current numbers,
stepping the delay off it clears every highlight, and stepping back
relights it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
hansdezwart
2026-08-11 18:11:04 +02:00
co-authored by Claude Opus 5
parent 261cebd10b
commit 2c31c0f02b
3 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public_html/index.html
+16 -7
View File
@@ -248,7 +248,10 @@
.row--wide .val{min-width:46px}
}
.row--presets{gap:11px}
/* three buttons wide enough to read can't share a line with a label, so the
row stacks at every width rather than only under the .row--wide breakpoint */
.row--presets{flex-direction:column;align-items:stretch;gap:12px}
.presets{display:flex;gap:11px}
.preset{
flex:1;
padding:13px 6px;
@@ -422,12 +425,6 @@
</div>
</div>
<div class="row row--presets">
<button class="preset" data-base="120000" data-preset-delay="12000" aria-pressed="false">2m / 12s</button>
<button class="preset" data-base="180000" data-preset-delay="12000" aria-pressed="false">3m / 12s</button>
<button class="preset" data-base="180000" data-preset-delay="15000" aria-pressed="false">3m / 15s</button>
</div>
<div class="row row--wide">
<div>
<h2>Time</h2>
@@ -455,6 +452,18 @@
</div>
</div>
<div class="row row--presets">
<div>
<h2>Preset time limits</h2>
<p>Quickly pick a setting.</p>
</div>
<div class="presets">
<button class="preset" data-base="120000" data-preset-delay="12000" aria-pressed="false">2m / 12s</button>
<button class="preset" data-base="180000" data-preset-delay="12000" aria-pressed="false">3m / 12s</button>
<button class="preset" data-base="180000" data-preset-delay="15000" aria-pressed="false">3m / 15s</button>
</div>
</div>
<div class="row">
<div>
<h2>Colour</h2>
public_html/sw.js
+1 -1
View File
@@ -1,5 +1,5 @@
/* Cache-first: once installed the clock never touches the network again. */
const CACHE = "bgclock-v12";
const CACHE = "bgclock-v13";
const FILES = [
"./",
"./index.html",