Refactor chore tracker UI: Adjust button dimensions, colors, and positions for improved layout and readability

This commit is contained in:
Joshua King
2026-02-28 13:05:45 -05:00
parent 338025d55b
commit d6c2b189ef
3 changed files with 72 additions and 67 deletions

View File

@@ -37,6 +37,10 @@ except ImportError:
# Helpers
# ─────────────────────────────────────────────────────────────────────────────
# Screen padding — space kept clear around all edges (pixels)
PAD = 12
def slug(name: str) -> str:
return name.lower().replace(" ", "_").replace("-", "_")
@@ -326,10 +330,11 @@ def _gen_lvgl_pages(kids: list) -> str:
# ── HOME PAGE ─────────────────────────────────────────────────────────────
n = len(kids)
btn_w = min(200, max(140, (760 - 20 * (n - 1)) // n))
usable_w = 800 - PAD * 2
btn_w = min(200, max(140, (usable_w - 40 - 20 * (n - 1)) // n))
total_w = btn_w * n + 20 * (n - 1)
start_x = (800 - total_w) // 2
btn_y = 130
start_x = PAD + (usable_w - total_w) // 2
btn_y = PAD + 118
btn_h = 210
reset_all_calls = "\n".join(
@@ -384,7 +389,7 @@ def _gen_lvgl_pages(kids: list) -> str:
- label:
x: 0
y: 36
width: 800
width: {800 - PAD * 2}
align: TOP_MID
text: "Chore Tracker"
text_font: font_title
@@ -392,14 +397,14 @@ def _gen_lvgl_pages(kids: list) -> str:
- label:
x: 0
y: 90
width: 800
width: {800 - PAD * 2}
align: TOP_MID
text: "Tap a name to check off chores"
text_font: font_small
text_color: 0xB2BEC3
- button:
x: 640
y: 424
y: 428
width: 148
height: 40
bg_color: 0xFF4757
@@ -425,16 +430,16 @@ def _gen_lvgl_pages(kids: list) -> str:
rows = (n_chores + cols - 1) // cols
sidebar_w = 172
gap = 10
content_w = 800 - sidebar_w - gap * 2
content_w = 800 - sidebar_w - gap - 12 # right pad
card_w = (content_w - gap * (cols - 1)) // cols
card_h = min(138, (480 - gap * (rows + 1)) // rows)
card_h = min(138, (480 - PAD - gap * (rows + 1)) // rows)
card_widgets = ""
for idx, chore in enumerate(chores):
row = idx // cols
col = idx % cols
x = sidebar_w + gap + col * (card_w + gap)
y = gap + row * (card_h + gap)
y = 12 + row * (card_h + gap)
e = eid(kid, chore)
icon_y = -(card_h // 4)
label_y = card_h // 8
@@ -541,7 +546,7 @@ def _gen_lvgl_pages(kids: list) -> str:
text_color: 0xFFFFFF
- button:
x: 14
y: 364
y: {480 - PAD - 44 - 6 - 44}
width: {sidebar_w - 28}
height: 44
bg_color: 0xFF4757
@@ -557,7 +562,7 @@ def _gen_lvgl_pages(kids: list) -> str:
text_font: font_small
- button:
x: 14
y: 420
y: {480 - PAD - 44}
width: {sidebar_w - 28}
height: 44
bg_color: 0x{kid['color_dark']}