Refactor chore tracker UI: Adjust button dimensions, colors, and positions for improved layout and readability
This commit is contained in:
@@ -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']}
|
||||
|
||||
Reference in New Issue
Block a user