nate/hub
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Family board: fit a 12.9-inch iPad without scrolling; See all for the chore pool
build-container / build (push) Successful in 5m40s
Details

Browse Source 
- Fixed-height grid for tablets (3x2 landscape, 2x3 portrait), larger text on big screens
- Compact chores card with tappable pills and +N overflow
- "See all" opens the full list of up-for-grabs chores to pick from

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-10-26 13:49:56 -04:00
1 parent 17a282054a
commit 472e7bec7e
2 files changed
+25 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/board.html
+15
View File
@@ -65,6 +65,21 @@
#ov { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 18px; } #ov[hidden] { display: none; }
#ovb { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 20px; width: 100%; max-width: 380px; text-align: center; }
.err { color: var(--danger); min-height: 20px; }
.pill { display: inline-flex; align-items: center; gap: 6px; margin: 3px 6px 3px 0; padding: 6px 12px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; } .pill.pool { border-color: var(--accent); } .pill small { color: var(--muted); font-size: 12px; } .pill.more { background: none; border-style: dashed; color: var(--muted); cursor: default; }
.chp { margin-top: 8px; } .chp .top { display: flex; justify-content: space-between; align-items: baseline; }
/* a tablet (like a 12.9-inch iPad) shows the whole board at once, with no scrolling */
@media (min-width: 700px) and (min-height: 700px) {
html, body { height: 100%; overflow: hidden; } body { padding: 14px 18px; }
.bd { height: 100%; display: flex; flex-direction: column; max-width: none; }
.bdtop h1 { font-size: 28px; } .bdclock { font-size: 32px; } .bdtop p { margin: 0; }
.ann { margin: 8px 0; padding: 8px 14px; font-size: 20px; } .who { margin: 8px 0; } .who h2 { margin-bottom: 6px; font-size: 15px; }
.tiles { flex-wrap: nowrap; overflow: hidden; gap: 10px; } .tile { width: 92px; padding: 8px 4px; border-radius: 16px; flex: none; } .tile .av { width: 44px; height: 44px; font-size: 20px; } .tile b { font-size: 14px; }
.grid { flex: 1; min-height: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
.card { overflow: hidden; padding: 10px 14px; } .card h2 { margin-bottom: 4px; font-size: 13px; } .ln { padding: 4px 0; font-size: 16px; }
.bd > p.sub { display: none; }
}
@media (min-width: 900px) and (min-height: 1100px) { .ln { font-size: 20px; padding: 6px 0; } .pill { font-size: 18px; padding: 8px 14px; } .card h2 { font-size: 15px; } .tile { width: 108px; } .tile .av { width: 54px; height: 54px; font-size: 24px; } .tile b { font-size: 16px; } .bdtop h1 { font-size: 34px; } .bdclock { font-size: 40px; } .card small, .chp small { font-size: 14px; } }
@media (min-width: 1200px) and (min-height: 700px) { .grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); } }
.chrow { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-size: 17px; text-align: left; cursor: pointer; } .chrow .chk { width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 7px; display: grid; place-items: center; flex: none; font-size: 15px; } .chrow.dn .chk { background: var(--accent); border-color: var(--accent); color: #fff; } .chrow.dn .g { text-decoration: line-through; opacity: .6; }
</style>
</head>