From 3c721ef6a58d24a5ac786b8e61b958db27ad29e6 Mon Sep 17 00:00:00 2001 From: nmemmert <67961292+nmemmert@users.noreply.github.com> Date: Mon, 26 Oct 2026 14:10:46 -0400 Subject: [PATCH] Family board: per-person chore columns, touch scrolling in every box, no list caps - Chores box spans the width with a column per person (fits five or more) - Each box and each person's chore column scrolls by touch on its own, with no scroll bars - Shopping, tasks and shared notes show everything (they scroll) - Card width no longer capped by the app's shared card style Co-Authored-By: Claude Sonnet 5.5 --- notes.js | 2 +- public/board.html | 12 ++++++++---- public/board.js | 14 +++++++------- recipes.js | 2 +- tasks.js | 2 +- 5 files changed, 18 insertions(+), 14 deletions(-) diff --git a/notes.js b/notes.js index aa3e315..e7e5ecb 100644 --- a/notes.js +++ b/notes.js @@ -66,5 +66,5 @@ function search(me, q) { return out.slice(0, 8); } /** Notes and lists shared with the whole family, for the family board. */ -const familyNotes = () => all().filter(n => n.share === 'family' && !n.archived).sort((a, b) => (b.pinned - a.pinned) || b.updated - a.updated).slice(0, 6).map(n => ({ id: n.id, type: n.type, title: n.title || (n.type === 'list' ? 'Checklist' : 'Note'), pinned: n.pinned, total: n.items.length, done: n.items.filter(i => i.done).length, next: (n.items.find(i => !i.done) || {}).text || '', body: n.type === 'note' ? n.body.slice(0, 120) : '' })); +const familyNotes = () => all().filter(n => n.share === 'family' && !n.archived).sort((a, b) => (b.pinned - a.pinned) || b.updated - a.updated).slice(0, 20).map(n => ({ id: n.id, type: n.type, title: n.title || (n.type === 'list' ? 'Checklist' : 'Note'), pinned: n.pinned, total: n.items.length, done: n.items.filter(i => i.done).length, next: (n.items.find(i => !i.done) || {}).text || '', body: n.type === 'note' ? n.body.slice(0, 120) : '' })); module.exports = { handle, search, familyNotes }; diff --git a/public/board.html b/public/board.html index dc06079..dff10d9 100644 --- a/public/board.html +++ b/public/board.html @@ -55,7 +55,7 @@ .tile b { font-size: 16px; } .tile small { color: var(--muted); font-size: 12px; min-height: 14px; } .tile .kid { background: #2f9e6e; color: #fff; border-radius: 8px; padding: 1px 7px; font-size: 11px; font-weight: 700; } .grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 760px) { .grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } } - .card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0; } .card h2 { margin: 0 0 6px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } + .card { max-width: none; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0; } .card h2 { margin: 0 0 6px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ln { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 17px; } .ln:last-child { border-bottom: 0; } .ln .g { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ln small { color: var(--muted); } .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .none { color: var(--muted); margin: 6px 0; } .ann { background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin: 14px 0; font-size: 24px; font-weight: 700; } @@ -65,6 +65,8 @@ #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; } + /* touch screen: things scroll by dragging, with no scroll bars */ + .card, .chl, #ovb div { scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .card::-webkit-scrollbar, .chl::-webkit-scrollbar, #ovb div::-webkit-scrollbar { display: none; } .pbtn { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-t, #fff); border: 0; font-size: 24px; line-height: 1; cursor: pointer; flex: none; } #ovb input[type=text], #ovb input[type=date], #ovb input[type=time], #ovb select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 17px; } .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; } @@ -76,12 +78,14 @@ .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; } + .grid { flex: 1; min-height: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 10px; } + .card.wide { grid-column: 1 / -1; } + .card.wide { display: flex; flex-direction: column; } .chcols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: stretch; } .chcols .chp { display: flex; flex-direction: column; min-height: 0; } .chl { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: stretch; overscroll-behavior: contain; } .chl .pill { margin: 3px 0; justify-content: flex-start; } .chl .pill.more { justify-content: center; } .chcols .chp { margin-top: 6px; min-width: 0; } + .card { overflow-y: auto; padding: 10px 14px; } .card.wide { overflow: hidden; } .card h2 { position: sticky; top: -10px; z-index: 1; background: var(--panel); padding-top: 2px; } .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)); } } + @media (min-width: 1200px) and (min-height: 700px) { .grid { grid-template-columns: repeat(5, 1fr); grid-template-rows: minmax(0, 1.5fr) 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; } diff --git a/public/board.js b/public/board.js index 5f906b7..4fbeb48 100644 --- a/public/board.js +++ b/public/board.js @@ -6,7 +6,7 @@ const ymd = d => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0 let data = null; function clock() { const d = new Date(); $('#clock').textContent = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); const h = d.getHours(); $('#hi').textContent = (h < 5 ? 'Good night' : h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening') + ', family'; $('#date').textContent = d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' }); } -const card = (t, body, add) => `

${t}${add ? `` : ''}

${body}
`; +const card = (t, body, add, cls) => `

${t}${add ? `` : ''}

${body}
`; function weekCard(w) { if (!w || !w.people.length) return none('No points yet'); return w.people.map(p => { const mine = w.tiers.filter(t => p.tiers.includes(t.id)), top = Math.max(1, ...mine.map(t => t.points), p.points), next = mine.find(t => t.points > p.points), got = mine.filter(t => p.earned.includes(t.id)); return `
${esc(p.name)}${p.points} pts · ${p.count} done
${mine.map(t => ``).join('')}
${got.length ? '🎁 ' + esc(got.map(t => t.title).join(', ')) : ''}${next ? (got.length ? ' · ' : '') + (next.points - p.points) + ' more for ' + esc(next.title) : ''}
`; }).join(''); @@ -21,12 +21,12 @@ function draw() { const day = (label, ds) => { const l = d.events.filter(e => e.allDay ? e.start <= ds && e.end > ds : ymd(new Date(e.start)) === ds).sort((a, b) => (b.allDay - a.allDay) || a.start - b.start); return `${label}` + (l.map(e => `
${esc(e.title)}${e.by ? ` ${esc(e.by)}` : ''}${e.allDay ? 'All day' : new Date(e.start).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
`).join('') || none('Nothing')); }; const pill = (c, cls) => ``; const pool = d.chores.filter(c => c.claimable && !c.done), per = {}; d.chores.filter(c => !(c.claimable && !c.done)).forEach(c => { (per[c.userName] = per[c.userName] || []).push(c); }); - const SHOW = 4, chores = (pool.length ? `Up for grabs: tap one
${pool.slice(0, 6).map(c => pill(c, 'pool')).join('')}${pool.length > 6 ? `` : ''}
` : '') + Object.keys(per).map(k => { const l = per[k], dn = l.filter(c => c.done).length, left = l.filter(c => !c.done); return `
${esc(k)}${dn} of ${l.length}
${left.slice(0, SHOW).map(c => pill(c)).join('')}${left.length > SHOW ? `+${left.length - SHOW}` : ''}${left.length ? '' : 'All done 🎉'}
`; }).join(''); - $('#grid').innerHTML = card('Today and tomorrow', day('Today', t0) + day('Tomorrow', t1), 'event') - + card('Chores today', chores || none('No chores today')) - + card('This week', weekCard(d.week)) + card('Shopping list', d.shopping.slice(0, 10).map(i => `
${esc(i.text)}${i.by ? `${esc(i.by)}` : ''}
`).join('') || none('Nothing to buy'), 'shopping') - + card('Family tasks', d.tasks.slice(0, 6).map(t => `
${esc(t.title)}${t.by ? ` ${esc(t.by)}` : ''}${t.due === t0 ? 'Today' : esc(t.due)}
`).join('') || none('Nothing due'), 'task') - + card('Family notes and lists', d.notes.slice(0, 4).map(n => `
${esc(n.title)}${n.type === 'list' ? ` ${n.done} of ${n.total} done${n.next ? ' · next: ' + esc(n.next) : ''}` : ` ${esc(n.body)}`}
`).join('') || none('No shared notes'), d.notes.some(n => n.type === 'list') ? 'item' : ''); + const SHOW = 6, chores = (pool.length ? `` : '') + '
' + Object.keys(per).map(k => { const l = per[k], dn = l.filter(c => c.done).length, left = l.filter(c => !c.done); return `
${esc(k)}${dn} of ${l.length}
${left.map(c => pill(c)).join('')}${left.length ? '' : 'All done 🎉'}
`; }).join('') + '
'; + $('#grid').innerHTML = card('Chores today', chores || none('No chores today'), '', 'wide') + + card('Today and tomorrow', day('Today', t0) + day('Tomorrow', t1), 'event') + + card('This week', weekCard(d.week)) + card('Shopping list', d.shopping.map(i => `
${esc(i.text)}${i.by ? `${esc(i.by)}` : ''}
`).join('') || none('Nothing to buy'), 'shopping') + + card('Family tasks', d.tasks.map(t => `
${esc(t.title)}${t.by ? ` ${esc(t.by)}` : ''}${t.due === t0 ? 'Today' : esc(t.due)}
`).join('') || none('Nothing due'), 'task') + + card('Family notes and lists', d.notes.map(n => `
${esc(n.title)}${n.type === 'list' ? ` ${n.done} of ${n.total} done${n.next ? ' · next: ' + esc(n.next) : ''}` : ` ${esc(n.body)}`}
`).join('') || none('No shared notes'), d.notes.some(n => n.type === 'list') ? 'item' : ''); wireChores(); } function poolAll() { diff --git a/recipes.js b/recipes.js index 53ea4a5..7395847 100644 --- a/recipes.js +++ b/recipes.js @@ -154,5 +154,5 @@ async function handle(req, res) { /** Recipes in Mealie that match the words (none when Mealie is not set up or does not answer). */ async function search(q) { if (!enabled()) return []; try { const j = await mealie(`/api/recipes?page=1&perPage=6&orderBy=name&orderDirection=asc&search=${encodeURIComponent(q)}`, { timeout: 6000 }); return (j.items || []).map(card); } catch { return []; } } /** The open items on the shopping list, for the family board ([] when Mealie is not set up or does not answer). */ -async function shoppingOpen() { if (!enabled()) return []; try { return (await readList()).items.filter(i => !i.checked).slice(0, 12).map(i => ({ id: i.id, text: i.text, by: i.by })); } catch { return []; } } +async function shoppingOpen() { if (!enabled()) return []; try { return (await readList()).items.filter(i => !i.checked).slice(0, 60).map(i => ({ id: i.id, text: i.text, by: i.by })); } catch { return []; } } module.exports = { shoppingOpen, handle, enabled, minutes, full, ingredientText, search }; diff --git a/tasks.js b/tasks.js index 46ea511..50c1dc0 100644 --- a/tasks.js +++ b/tasks.js @@ -188,5 +188,5 @@ async function allTasks() { } /** Open tasks on the shared Family list, soonest first, for the family board. */ -const familyOpen = () => { const t = readJ(famFile(), { tasks: [] }).tasks || []; return t.filter(x => !x.done && !x.parent).sort((a, b) => (a.due || '9999').localeCompare(b.due || '9999') || a.title.localeCompare(b.title)).slice(0, 8).map(x => ({ id: x.id, title: x.title, due: x.due || '', by: x.by || '' })); }; +const familyOpen = () => { const t = readJ(famFile(), { tasks: [] }).tasks || []; return t.filter(x => !x.done && !x.parent).sort((a, b) => (a.due || '9999').localeCompare(b.due || '9999') || a.title.localeCompare(b.title)).slice(0, 40).map(x => ({ id: x.id, title: x.title, due: x.due || '', by: x.by || '' })); }; module.exports = { familyOpen, handle, parseTodos, allTasks, nextDue, stepDate };