diff --git a/app.py b/app.py index 724a24c..86f296a 100644 --- a/app.py +++ b/app.py @@ -133,7 +133,7 @@ def parse_member_and_title(summary, family_members): return None, summary -NUM_DAYS = 5 +NUM_DAYS = 6 def empty_days_payload(start_date, members): diff --git a/static/css/style.css b/static/css/style.css index a556ed2..66252ea 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -65,7 +65,8 @@ html, body { .week-grid { flex: 1; display: grid; - grid-template-columns: repeat(5, 1fr) 190px; + grid-template-columns: repeat(3, 1fr) 210px; + grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; } @@ -89,7 +90,7 @@ html, body { } .day-name { - font-size: 11px; + font-size: 13px; font-weight: 700; text-transform: uppercase; color: #A6AAB4; @@ -97,13 +98,13 @@ html, body { } .day-number { - font-size: 20px; + font-size: 26px; font-weight: 700; color: #1F2430; } .day-count { - font-size: 11px; + font-size: 12px; color: #A6AAB4; margin-top: 2px; } @@ -118,16 +119,16 @@ html, body { .event-card { border-radius: 8px; - padding: 6px 8px; + padding: 8px 10px; border-left: 5px solid transparent; - font-size: 12.5px; + font-size: 14px; line-height: 1.35; } .event-time { font-weight: 700; color: rgba(0, 0, 0, 0.5); - font-size: 11.5px; + font-size: 13px; } .event-title { @@ -137,7 +138,7 @@ html, body { } .event-member { - font-size: 11px; + font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, 0.45); margin-top: 2px; @@ -165,7 +166,7 @@ html, body { } .info-clock { - font-size: 42px; + font-size: 52px; font-weight: 700; color: #1F2430; letter-spacing: -1px; diff --git a/static/js/app.js b/static/js/app.js index 1e6f9e0..ee176c0 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -157,6 +157,12 @@ function eventCardHTML(event) { `; } +// Grid positions for 6 days arranged 3-per-row, info panel in col 4 spanning both rows +const DAY_GRID_POSITIONS = [ + {col: 1, row: 1}, {col: 2, row: 1}, {col: 3, row: 1}, + {col: 1, row: 2}, {col: 2, row: 2}, {col: 3, row: 2}, +]; + function renderDays(data) { const grid = document.getElementById('week-grid'); grid.innerHTML = ''; @@ -164,12 +170,15 @@ function renderDays(data) { const todayISO = toISODate(new Date()); const now = new Date(); - data.days.forEach(day => { + data.days.forEach((day, i) => { const dayDate = new Date(day.date + 'T00:00:00'); const events = filterEvents(day.events); + const pos = DAY_GRID_POSITIONS[i]; const column = document.createElement('div'); column.className = 'day-column' + (day.date === todayISO ? ' is-today' : ''); + column.style.gridColumn = pos.col; + column.style.gridRow = pos.row; column.innerHTML = `