mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: date vertical offset scales with headline font size

Browse Source 
Compute vertical offset relative to the weekday headline font size
instead of the date's own small font. Top shifts up 55%, center 25%,
bottom stays at baseline — giving visible, proportional alignment.

v1.34.4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
mARTin 2026-03-15 09:13:35 +01:00
parent d6009ef7b2
commit 6409dd8908
2 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "my-weekly-todo-list",
"version": "1.34.3",
"version": "1.34.4",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js",
"scripts": {

67
src/components/WeeklyView.tsx
View File

@ -6420,37 +6420,42 @@ export default function WeeklyView() {
gap: profile.dateAlignment === "tight" ? "2px" : (profile.dayHeaderGap || "0.35em"),
}}
>
{activeDateLayout === "left" && (
<span className="weekly-day-date" style={{
flexShrink: 0,
marginBottom: 0,
position: "relative",
top: profile.dateVerticalAlign === "top" ? "-0.35em" : profile.dateVerticalAlign === "bottom" ? "0.1em" : "-0.1em",
}}>
{formatDateHeader(date, language)}
</span>
)}
<h3
className={`weekly-day-name ${isSameDay(date, new Date()) ? "is-today" : ""}`}
style={{ marginBottom: 0, flexShrink: 0 }}
>
{getDayName(date, language, weekdayFormat, customWeekdayNames, weekStartDay, weekdayCase)}
</h3>
{(activeDateLayout === "right" ||
activeDateLayout === "above" ||
activeDateLayout === "below" ||
activeDateLayout === undefined) && (
<span className="weekly-day-date" style={{
flexShrink: 0,
marginBottom: (activeDateLayout === "above" || activeDateLayout === "below") ? undefined : 0,
...(activeDateLayout !== "above" && activeDateLayout !== "below" ? {
position: "relative" as const,
top: profile.dateVerticalAlign === "top" ? "-0.35em" : profile.dateVerticalAlign === "bottom" ? "0.1em" : "-0.1em",
} : {}),
}}>
{formatDateHeader(date, language)}
</span>
)}
{(() => {
// Compute date vertical offset relative to weekday font size
const isHorizontal = activeDateLayout === "left" || activeDateLayout === "right" || activeDateLayout === undefined;
const headlineSizePx = parseFloat(profile.headlineFontSize || "1.25rem") * (String(profile.headlineFontSize || "").includes("px") ? 1 : 16);
const dateOffset = !isHorizontal ? undefined
: profile.dateVerticalAlign === "top" ? `${-headlineSizePx * 0.55}px`
: profile.dateVerticalAlign === "bottom" ? "0px"
: `${-headlineSizePx * 0.25}px`; // center
const dateStyle = isHorizontal ? {
flexShrink: 0 as const, marginBottom: 0,
position: "relative" as const, top: dateOffset,
} : { flexShrink: 0 as const };
return (
<>
{activeDateLayout === "left" && (
<span className="weekly-day-date" style={dateStyle}>
{formatDateHeader(date, language)}
</span>
)}
<h3
className={`weekly-day-name ${isSameDay(date, new Date()) ? "is-today" : ""}`}
style={{ marginBottom: 0, flexShrink: 0 }}
>
{getDayName(date, language, weekdayFormat, customWeekdayNames, weekStartDay, weekdayCase)}
</h3>
{(activeDateLayout === "right" ||
activeDateLayout === "above" ||
activeDateLayout === "below" ||
activeDateLayout === undefined) && (
<span className="weekly-day-date" style={dateStyle}>
{formatDateHeader(date, language)}
</span>
)}
</>
);
})()}
</div>
</header>