hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Fix calendar layout sizing and responsive grid rendering

Browse Source
This commit is contained in:
Florian Heinz
2026-04-11 19:38:25 +02:00
parent a3b24ccac1
commit 291e98fb5a
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+7 -3
View File
@@ -395,7 +395,7 @@ button {
} }
.calendar-heatmap { .calendar-heatmap {
min-height: 16rem; min-height: 0;
overflow-x: auto; overflow-x: auto;
} }
@@ -403,7 +403,7 @@ button {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.45rem; gap: 0.45rem;
margin-top: 1rem; margin-top: 0.55rem;
color: var(--muted); color: var(--muted);
font-size: 0.82rem; font-size: 0.82rem;
} }
@@ -442,11 +442,15 @@ button {
.calendar-svg, .calendar-svg,
.line-chart svg { .line-chart svg {
width: 100%;
height: auto; height: auto;
display: block; display: block;
} }
.calendar-svg {
width: auto;
max-width: 100%;
}
.calendar-tooltip { .calendar-tooltip {
fill: var(--muted); fill: var(--muted);
font-size: 11px; font-size: 11px;
assets/js/app.js
+18 -7
View File
@@ -397,9 +397,19 @@
const start = new Date(end); const start = new Date(end);
start.setDate(end.getDate() - 364); start.setDate(end.getDate() - 364);
const gridStart = new Date(start);
const startWeekday = gridStart.getDay();
const startOffset = startWeekday === 0 ? 6 : startWeekday - 1;
gridStart.setDate(gridStart.getDate() - startOffset);
const gridEnd = new Date(end);
const endWeekday = gridEnd.getDay();
const endOffset = endWeekday === 0 ? 0 : 7 - endWeekday;
gridEnd.setDate(gridEnd.getDate() + endOffset);
const days = []; const days = [];
const cursor = new Date(start); const cursor = new Date(gridStart);
while (cursor <= end) { while (cursor <= gridEnd) {
const iso = toLocalIso(cursor); const iso = toLocalIso(cursor);
const entry = map.get(iso) || null; const entry = map.get(iso) || null;
days.push({ days.push({
@@ -413,12 +423,13 @@
} }
const totalWeeks = Math.floor((days.length - 1) / 7) + 1; const totalWeeks = Math.floor((days.length - 1) / 7) + 1;
const height = 148;
const cellSize = 12; const cellSize = 12;
const cellGap = 5; const cellGap = 5;
const xOffset = 34; const xOffset = 34;
const yOffset = 24; const yOffset = 22;
const width = xOffset + ((totalWeeks - 1) * (cellSize + cellGap)) + cellSize + 28; const gridHeight = (7 * cellSize) + (6 * cellGap);
const height = yOffset + gridHeight + 8;
const width = xOffset + ((totalWeeks - 1) * (cellSize + cellGap)) + cellSize + 12;
const monthLabels = []; const monthLabels = [];
let lastMonth = -1; let lastMonth = -1;
@@ -429,7 +440,7 @@
const y = yOffset + (row * (cellSize + cellGap)); const y = yOffset + (row * (cellSize + cellGap));
const fill = calendarColor(item.entry); const fill = calendarColor(item.entry);
if (item.day <= 7 && item.month !== lastMonth) { if (item.day <= 7 && item.month !== lastMonth && item.entry !== null) {
monthLabels.push({ monthLabels.push({
x, x,
label: new Intl.DateTimeFormat("de-DE", { month: "short" }).format(new Date(`${item.date}T12:00:00`)), label: new Intl.DateTimeFormat("de-DE", { month: "short" }).format(new Date(`${item.date}T12:00:00`)),
@@ -454,7 +465,7 @@
}).join(""); }).join("");
container.innerHTML = ` container.innerHTML = `
<svg class="calendar-svg" viewBox="0 0 ${width} ${height}" role="img" aria-label="Kalender"> <svg class="calendar-svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="Kalender">
${monthLabels.map(item => `<text class="calendar-tooltip" x="${item.x}" y="14">${item.label}</text>`).join("")} ${monthLabels.map(item => `<text class="calendar-tooltip" x="${item.x}" y="14">${item.label}</text>`).join("")}
<text class="calendar-tooltip" x="0" y="34">Mo</text> <text class="calendar-tooltip" x="0" y="34">Mo</text>
<text class="calendar-tooltip" x="0" y="68">Mi</text> <text class="calendar-tooltip" x="0" y="68">Mi</text>