From f1b4c3256c3febf0682cd32f353fde23988d329b Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Tue, 28 Apr 2026 11:00:23 +0700 Subject: [PATCH] feat(settings): clearer "both" glyph + sticky title/footer on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two small UX fixes in the settings modal: 1. Mode picker "Cả hai" glyph was two stacked rectangles — read as "windows" rather than the two roles being combined. Replace with a mini player-grid + mini megaphone side-by-side so the glyph mirrors the two single-mode glyphs concretely. 2. On iPhone SE the modal body pushes the title and the action row off screen, so the close button needs scrolling-back to reach. Make the title block sticky at top and the action row sticky at bottom inside the existing scroll container; move the panel padding from the outer wrapper into per-section padding so the sticky bands can span edge-to-edge with matching backgrounds. --- .../phase-03-mode-picker-glyphs.md | 3 +- .../phase-04-settings-modal-sticky.md | 3 +- .../plan.md | 4 +- web/src/lib/SettingsButton.svelte | 45 +++++++++++++------ 4 files changed, 37 insertions(+), 18 deletions(-) diff --git a/web/plans/260428-0927-implement-todo-backlog/phase-03-mode-picker-glyphs.md b/web/plans/260428-0927-implement-todo-backlog/phase-03-mode-picker-glyphs.md index 01e1819..f20270c 100644 --- a/web/plans/260428-0927-implement-todo-backlog/phase-03-mode-picker-glyphs.md +++ b/web/plans/260428-0927-implement-todo-backlog/phase-03-mode-picker-glyphs.md @@ -1,9 +1,10 @@ --- name: Mode picker glyph redesign phase: 3 -status: todo +status: completed priority: medium effort: 45m +completed: 2026-04-28 --- # Phase 3 — Mode picker glyph redesign diff --git a/web/plans/260428-0927-implement-todo-backlog/phase-04-settings-modal-sticky.md b/web/plans/260428-0927-implement-todo-backlog/phase-04-settings-modal-sticky.md index 04b6ed3..18fbe89 100644 --- a/web/plans/260428-0927-implement-todo-backlog/phase-04-settings-modal-sticky.md +++ b/web/plans/260428-0927-implement-todo-backlog/phase-04-settings-modal-sticky.md @@ -1,9 +1,10 @@ --- name: Settings modal sticky on small screens phase: 4 -status: todo +status: completed priority: medium effort: 30m +completed: 2026-04-28 --- # Phase 4 — Settings modal sticky header/footer diff --git a/web/plans/260428-0927-implement-todo-backlog/plan.md b/web/plans/260428-0927-implement-todo-backlog/plan.md index 3c4e4f2..efc5284 100644 --- a/web/plans/260428-0927-implement-todo-backlog/plan.md +++ b/web/plans/260428-0927-implement-todo-backlog/plan.md @@ -19,8 +19,8 @@ YAGNI — parking-lot features and upstream-blocked items skipped. |---|-------|------| | 1 | Auto-tick integration test ✅ | `phase-01-auto-tick-test.md` | | 2 | CI inline-script guard ✅ | `phase-02-ci-inline-script-guard.md` | -| 3 | Mode picker glyph redesign | `phase-03-mode-picker-glyphs.md` | -| 4 | Settings modal sticky on small screens | `phase-04-settings-modal-sticky.md` | +| 3 | Mode picker glyph redesign ✅ | `phase-03-mode-picker-glyphs.md` | +| 4 | Settings modal sticky on small screens ✅ | `phase-04-settings-modal-sticky.md` | | 5 | Per-row "Chờ" indicator | `phase-05-cho-row-indicator.md` | | 6 | Confetti polish (threshold + variety) | `phase-06-confetti-polish.md` | | 7 | Strict CSP via hashed inline script | `phase-07-strict-csp-hashed.md` | diff --git a/web/src/lib/SettingsButton.svelte b/web/src/lib/SettingsButton.svelte index 9c499aa..cae1246 100644 --- a/web/src/lib/SettingsButton.svelte +++ b/web/src/lib/SettingsButton.svelte @@ -164,17 +164,24 @@ class="absolute inset-0" >
-

- Cài đặt -

-

- Tuỳ chỉnh giao diện bảng lô tô -

+ +
+

+ Cài đặt +

+

+ Tuỳ chỉnh giao diện bảng lô tô +

+
+ +
@@ -268,9 +275,14 @@ {:else} - {label} @@ -433,7 +445,12 @@
-
+
+ + +