alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fit the whole top bar on one row

Browse Source 
Timer, day arrows, date picker and Today all share a single non-wrapping
row: the timer slims to 1rem, buttons and gaps tighten, arrows sit
around the picker, and a narrow-phone media query compacts further.
This commit is contained in:
Alexander Heldt
2026-07-13 21:26:07 +00:00
parent b6301156f9
commit 8981214e55
3 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/changelog.json
+1
View File
@@ -1,4 +1,5 @@
[ [
{ "date": "2026-07-13", "text": "The top bar fits on one row: timer, day arrows, date picker and Today" },
{ "date": "2026-07-13", "text": "Pick how many days the charts cover — 7, 14 or 30 (default 7)" }, { "date": "2026-07-13", "text": "Pick how many days the charts cover — 7, 14 or 30 (default 7)" },
{ "date": "2026-07-13", "text": "Much finer y-axis on the food chart" }, { "date": "2026-07-13", "text": "Much finer y-axis on the food chart" },
{ "date": "2026-07-13", "text": "The awake/asleep timer is bigger and sits first in the top bar" }, { "date": "2026-07-13", "text": "The awake/asleep timer is bigger and sits first in the top bar" },
src/index.html
+1 -1
View File
@@ -86,8 +86,8 @@
</div> </div>
<button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button> <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
<input type="date" id="day-picker" /> <input type="date" id="day-picker" />
<button type="button" id="day-today" class="ghost">Today</button>
<button type="button" id="day-next" class="ghost" aria-label="Next day">→</button> <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
<button type="button" id="day-today" class="ghost">Today</button>
</section> </section>
<section class="quick-actions"> <section class="quick-actions">
src/style.css
+12 -6
View File
@@ -141,10 +141,10 @@ body::before {
top: env(safe-area-inset-top, 0px); top: env(safe-area-inset-top, 0px);
z-index: 60; z-index: 60;
display: flex; display: flex;
gap: 8px; gap: 6px;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: nowrap;
padding: 8px 10px; padding: 8px 10px;
} }
.day-bar input[type="date"] { .day-bar input[type="date"] {
@@ -153,9 +153,15 @@ body::before {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.day-bar button { .day-bar button {
padding: 8px 14px; padding: 8px 10px;
flex-shrink: 0; flex-shrink: 0;
} }
/* Keep the single row intact on narrow phones. */
@media (max-width: 370px) {
.day-bar { gap: 4px; }
.day-bar button { padding: 8px 7px; }
.bar-clock { font-size: 0.9rem; padding: 6px 8px; gap: 5px; }
}
.day-bar button:disabled { .day-bar button:disabled {
opacity: 0.4; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
@@ -163,12 +169,12 @@ body::before {
.bar-clock { .bar-clock {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
margin-right: auto; /* pin left; the flexible gap sits between it and the day controls */ margin-right: auto; /* pin left; the flexible gap sits between it and the day controls */
padding: 8px 16px; padding: 7px 10px;
border-radius: 999px; border-radius: 999px;
font-weight: 700; font-weight: 700;
font-size: 1.15rem; font-size: 1rem;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
flex-shrink: 0; flex-shrink: 0;
} }