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

fix: PDF export style and header fixes

Browse Source 
- Fix weather toggle disabled when lat/lon set but weatherEnabled=false:
  now enabled whenever a weather location is configured
- Default task duration: no-endTime tasks default to 30min (not 60min)
- Tasks without a project: remove left border entirely — only project-
  assigned tasks show a colored left border; this matches the user's
  explicit request that only calendar events have background/indicators
- Header order: show date first (top), then weekday name below — matches
  webapp "above" date layout setting
- Lighten grid lines (#ececec) and stripes (#fafafa/#f0f7ff) to reduce
  the heavy calendar-grid appearance; remove half-hour separator lines
- Lighten outer grid border and time-column border/bg to match

v1.96.1
This commit is contained in:
mARTin 2026-04-13 12:41:15 +02:00
parent 62ebc56c71
commit 38462c50f7
3 changed files with 44 additions and 74 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", "name": "my-weekly-todo-list",
"version": "1.96.0", "version": "1.96.1",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

112
src/app/api/user/export-week-view/route.ts
View File

@ -306,8 +306,8 @@ function WeekCalendarPDF({
flexDirection: 'row', flexDirection: 'row',
height: calendarH, height: calendarH,
borderWidth: 1, borderWidth: 1,
borderColor: BORDER, borderColor: '#e8eaed',
borderRadius: 4, borderRadius: 2,
overflow: 'hidden', overflow: 'hidden',
}, },
}, },
@ -319,8 +319,8 @@ function WeekCalendarPDF({
flexDirection: 'column', flexDirection: 'column',
flexShrink: 0, flexShrink: 0,
borderRightWidth: 1, borderRightWidth: 1,
borderRightColor: BORDER, borderRightColor: '#ebebeb',
backgroundColor: '#f8fafc', backgroundColor: '#fafafa',
}, },
}, },
// Spacer matching day header row // Spacer matching day header row
@ -411,11 +411,11 @@ function WeekCalendarPDF({
flex: 1, flex: 1,
flexDirection: 'column', flexDirection: 'column',
borderRightWidth: 1, borderRightWidth: 1,
borderRightColor: BORDER, borderRightColor: '#ebebeb',
}, },
}, },
// ── Day header (colored weekday name + date, matching webapp) // ── Day header: date first (top), then weekday name (bottom) — matches webapp "above" layout
React.createElement(View, { React.createElement(View, {
style: { style: {
height: DAY_HDR_H, height: DAY_HDR_H,
@ -427,6 +427,15 @@ function WeekCalendarPDF({
paddingHorizontal: 3, paddingHorizontal: 3,
}, },
}, },
React.createElement(Text, {
style: {
fontSize: 7,
color: dayColor(d, isToday, userStyle),
textAlign: 'center',
fontFamily: 'Helvetica',
lineHeight: 1.2,
},
}, dateStr),
React.createElement(Text, { React.createElement(Text, {
style: { style: {
fontFamily: headlineFontFamily, fontFamily: headlineFontFamily,
@ -436,17 +445,9 @@ function WeekCalendarPDF({
textAlign: 'center', textAlign: 'center',
letterSpacing: 0.5, letterSpacing: 0.5,
lineHeight: 1.1, lineHeight: 1.1,
marginTop: 1,
}, },
}, dayName), }, dayName),
React.createElement(Text, {
style: {
fontSize: 7.5,
color: dayColor(d, isToday, userStyle),
textAlign: 'center',
marginTop: 2,
fontFamily: 'Helvetica',
},
}, dateStr),
wLabel ? React.createElement(Text, { wLabel ? React.createElement(Text, {
style: { fontSize: 6, color: MUTED, textAlign: 'center', marginTop: 1 }, style: { fontSize: 6, color: MUTED, textAlign: 'center', marginTop: 1 },
}, wLabel) : null, }, wLabel) : null,
@ -506,7 +507,7 @@ function WeekCalendarPDF({
backgroundColor: isToday ? todayColBg : WHITE, backgroundColor: isToday ? todayColBg : WHITE,
}, },
}, },
// Alternating hour stripe // Very subtle alternating hour stripe (lighter than before)
...Array.from({ length: numHours }, (_, i) => { ...Array.from({ length: numHours }, (_, i) => {
if (i % 2 === 0) return null; if (i % 2 === 0) return null;
return React.createElement(View, { return React.createElement(View, {
@ -516,12 +517,12 @@ function WeekCalendarPDF({
top: minutesToY(i * 60), top: minutesToY(i * 60),
left: 0, right: 0, left: 0, right: 0,
height: minutesToY(60), height: minutesToY(60),
backgroundColor: isToday ? '#e8f2ff' : STRIPE, backgroundColor: isToday ? '#f0f7ff' : '#fafafa',
}, },
}); });
}).filter(Boolean), }).filter(Boolean),
// Hour separator lines // Light hour separator lines
...Array.from({ length: numHours - 1 }, (_, i) => ...Array.from({ length: numHours - 1 }, (_, i) =>
React.createElement(View, { React.createElement(View, {
key: `hl${i}`, key: `hl${i}`,
@ -530,21 +531,7 @@ function WeekCalendarPDF({
top: minutesToY((i + 1) * 60), top: minutesToY((i + 1) * 60),
left: 0, right: 0, left: 0, right: 0,
height: 1, height: 1,
backgroundColor: BORDER, backgroundColor: '#ececec',
},
})
),
// Half-hour dashes
...Array.from({ length: numHours }, (_, i) =>
React.createElement(View, {
key: `hh${i}`,
style: {
position: 'absolute',
top: minutesToY(i * 60 + 30),
left: 0, right: 0,
height: 1,
backgroundColor: '#f0f4f8',
}, },
}) })
), ),
@ -556,7 +543,7 @@ function WeekCalendarPDF({
const startMins = parseTimeMinutes(t.startTime)!; const startMins = parseTimeMinutes(t.startTime)!;
const endMins = t.endTime const endMins = t.endTime
? parseTimeMinutes(t.endTime)! ? parseTimeMinutes(t.endTime)!
: startMins + 60; : startMins + 30; // 30min default, not 60
const gridStart = startHour * 60; const gridStart = startHour * 60;
const gridEnd = endHour * 60; const gridEnd = endHour * 60;
@ -568,67 +555,50 @@ function WeekCalendarPDF({
const rawH = minutesToY(ceMin - csMin); const rawH = minutesToY(ceMin - csMin);
const taskH = Math.max(rawH, 14); const taskH = Math.max(rawH, 14);
const accentColor = t.project?.color || userStyle.weekdayColor; // Project color → left border; external events always have calendarColor
const projectColor = t.project?.color || null;
const isShort = (ceMin - csMin) <= 30; const isShort = (ceMin - csMin) <= 30;
const showTime = t.startTime && (!t.startTime.endsWith(':00') || isShort); const showTime = !!t.startTime && (!t.startTime.endsWith(':00') || isShort);
const baseStyle = { position: 'absolute' as const, top: topPx + 1, left: 2, right: 2, height: taskH - 2, overflow: 'hidden' as const };
if (t.completed) { if (t.completed) {
// Completed: subtle strikethrough-style, always plain
return React.createElement(View, { return React.createElement(View, {
key: t.id, key: t.id,
style: { style: { ...baseStyle, paddingLeft: 4, paddingRight: 3, paddingVertical: 2 },
position: 'absolute', top: topPx + 1, left: 2, right: 2,
height: taskH - 2, backgroundColor: WHITE,
borderLeftWidth: 2, borderLeftColor: DONE_BG,
paddingLeft: 5, paddingRight: 3, paddingVertical: 2,
overflow: 'hidden',
}, },
}, React.createElement(Text, { style: { fontSize: 7, color: DONE_TEXT, lineHeight: 1.25 } }, (t.title || '').slice(0, 44)),
React.createElement(Text, {
style: { fontSize: 7, color: DONE_TEXT, lineHeight: 1.25 },
}, (t.title || '').slice(0, 44)),
); );
} }
if (t.isExternal) { if (t.isExternal) {
// External calendar event: light tinted background box // Calendar event: light tinted bg + left border + rounded corners
const bg = lighten(accentColor, 0.8); const evColor = projectColor || '#6366f1';
const bg = lighten(evColor, 0.8);
return React.createElement(View, { return React.createElement(View, {
key: t.id, key: t.id,
style: { style: {
position: 'absolute', top: topPx + 1, left: 2, right: 2, ...baseStyle, backgroundColor: bg,
height: taskH - 2, backgroundColor: bg, borderRadius: 3, borderLeftWidth: 3, borderLeftColor: evColor,
borderRadius: 3, borderLeftWidth: 3, borderLeftColor: accentColor,
paddingLeft: 5, paddingRight: 3, paddingVertical: 2, paddingLeft: 5, paddingRight: 3, paddingVertical: 2,
overflow: 'hidden',
}, },
}, },
React.createElement(Text, { React.createElement(Text, { style: { fontFamily: 'Helvetica-Bold', fontSize: 7, color: '#1e293b', lineHeight: 1.25 } }, (t.title || '').slice(0, 44)),
style: { fontFamily: 'Helvetica-Bold', fontSize: 7, color: '#1e293b', lineHeight: 1.25 }, showTime ? React.createElement(Text, { style: { fontSize: 6, color: evColor, marginTop: 0.5 } }, fmtTime(t.startTime!)) : null,
}, (t.title || '').slice(0, 44)),
showTime ? React.createElement(Text, {
style: { fontSize: 6, color: accentColor, marginTop: 0.5 },
}, fmtTime(t.startTime!)) : null,
); );
} }
// Regular user task: transparent, thin colored left border (matches webapp simple view) // Regular user task: left border only if task has a project color
return React.createElement(View, { return React.createElement(View, {
key: t.id, key: t.id,
style: { style: {
position: 'absolute', top: topPx + 1, left: 2, right: 2, ...baseStyle,
height: taskH - 2, ...(projectColor ? { borderLeftWidth: 3, borderLeftColor: projectColor } : {}),
borderLeftWidth: 3, borderLeftColor: accentColor, paddingLeft: projectColor ? 5 : 2,
paddingLeft: 5, paddingRight: 3, paddingVertical: 2, paddingRight: 3, paddingVertical: 2,
overflow: 'hidden',
}, },
}, },
React.createElement(Text, { React.createElement(Text, { style: { fontFamily: 'Helvetica-Bold', fontSize: 7, color: '#1e293b', lineHeight: 1.25 } }, (t.title || '').slice(0, 44)),
style: { fontFamily: 'Helvetica-Bold', fontSize: 7, color: '#1e293b', lineHeight: 1.25 }, showTime && projectColor ? React.createElement(Text, { style: { fontSize: 6, color: projectColor, marginTop: 0.5 } }, fmtTime(t.startTime!)) : null,
}, (t.title || '').slice(0, 44)),
showTime ? React.createElement(Text, {
style: { fontSize: 6, color: accentColor, marginTop: 0.5 },
}, fmtTime(t.startTime!)) : null,
); );
}).filter(Boolean), }).filter(Boolean),
), // end time grid ), // end time grid

2
src/components/WeeklyView.tsx
View File

@ -9244,7 +9244,7 @@ export default function WeeklyView() {
startHour={startHour} startHour={startHour}
endHour={endHour} endHour={endHour}
language={profile.language || "de"} language={profile.language || "de"}
weatherEnabled={!!(profile.weatherEnabled && profile.weatherLat && profile.weatherLon)} weatherEnabled={!!(profile.weatherLat && profile.weatherLon)}
/> />
{/* Mobile: Floating Action Button with quick menu */} {/* Mobile: Floating Action Button with quick menu */}