connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix print preview event positioning to respond to hour range changes

Browse Source 
- Add print_start_hour parameter to calculate_event_position function
- Implement proper hour offset calculation for events in print mode
- Remove CSS transform hacks for event positioning
- Use dynamic pixels_per_hour for proper scaling with hour ranges
- Increase modal max-width to 1600px for better visibility
- Events now correctly reposition when start/end hours change

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-11 20:38:56 -04:00
parent c6c7b38bef
commit 4fdaa9931d
3 changed files with 28 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/print-preview.css
View File

@@ -5,7 +5,7 @@
.print-preview-modal {
width: 90vw;
max-width: 1200px;
max-width: 1600px;
height: auto; /* Let modal size itself based on content */
max-height: 90vh; /* But don't exceed viewport */
margin: 5vh auto;
@@ -1021,60 +1021,6 @@
/* End hour 24 (midnight next day) hides no hours since it includes the full day */
.print-preview-paper[data-end-hour="24"] { /* Shows all hours - no additional hiding needed */ }
/* Event positioning adjustments - shift events up when start hours are hidden */
/* Each hidden hour = 60px in 30-min mode, 120px in 15-min mode */
/* Reposition events to align with visible time labels */
/* 30-minute mode: Each hidden hour = 60px to shift up */
.print-preview-paper[data-start-hour="1"] .week-event { transform: translateY(-60px); }
.print-preview-paper[data-start-hour="2"] .week-event { transform: translateY(-120px); }
.print-preview-paper[data-start-hour="3"] .week-event { transform: translateY(-180px); }
.print-preview-paper[data-start-hour="4"] .week-event { transform: translateY(-240px); }
.print-preview-paper[data-start-hour="5"] .week-event { transform: translateY(-300px); }
.print-preview-paper[data-start-hour="6"] .week-event { transform: translateY(-360px); }
.print-preview-paper[data-start-hour="7"] .week-event { transform: translateY(-420px); }
.print-preview-paper[data-start-hour="8"] .week-event { transform: translateY(-480px); }
.print-preview-paper[data-start-hour="9"] .week-event { transform: translateY(-540px); }
.print-preview-paper[data-start-hour="10"] .week-event { transform: translateY(-600px); }
.print-preview-paper[data-start-hour="11"] .week-event { transform: translateY(-660px); }
.print-preview-paper[data-start-hour="12"] .week-event { transform: translateY(-720px); }
.print-preview-paper[data-start-hour="13"] .week-event { transform: translateY(-780px); }
.print-preview-paper[data-start-hour="14"] .week-event { transform: translateY(-840px); }
.print-preview-paper[data-start-hour="15"] .week-event { transform: translateY(-900px); }
.print-preview-paper[data-start-hour="16"] .week-event { transform: translateY(-960px); }
.print-preview-paper[data-start-hour="17"] .week-event { transform: translateY(-1020px); }
.print-preview-paper[data-start-hour="18"] .week-event { transform: translateY(-1080px); }
.print-preview-paper[data-start-hour="19"] .week-event { transform: translateY(-1140px); }
.print-preview-paper[data-start-hour="20"] .week-event { transform: translateY(-1200px); }
.print-preview-paper[data-start-hour="21"] .week-event { transform: translateY(-1260px); }
.print-preview-paper[data-start-hour="22"] .week-event { transform: translateY(-1320px); }
.print-preview-paper[data-start-hour="23"] .week-event { transform: translateY(-1380px); }
/* 15-minute mode: Each hidden hour = 120px to shift up */
.print-preview-paper[data-start-hour="1"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-120px); }
.print-preview-paper[data-start-hour="2"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-240px); }
.print-preview-paper[data-start-hour="3"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-360px); }
.print-preview-paper[data-start-hour="4"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-480px); }
.print-preview-paper[data-start-hour="5"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-600px); }
.print-preview-paper[data-start-hour="6"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-720px); }
.print-preview-paper[data-start-hour="7"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-840px); }
.print-preview-paper[data-start-hour="8"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-960px); }
.print-preview-paper[data-start-hour="9"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1080px); }
.print-preview-paper[data-start-hour="10"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1200px); }
.print-preview-paper[data-start-hour="11"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1320px); }
.print-preview-paper[data-start-hour="12"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1440px); }
.print-preview-paper[data-start-hour="13"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1560px); }
.print-preview-paper[data-start-hour="14"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1680px); }
.print-preview-paper[data-start-hour="15"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1800px); }
.print-preview-paper[data-start-hour="16"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1920px); }
.print-preview-paper[data-start-hour="17"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2040px); }
.print-preview-paper[data-start-hour="18"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2160px); }
.print-preview-paper[data-start-hour="19"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2280px); }
.print-preview-paper[data-start-hour="20"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2400px); }
.print-preview-paper[data-start-hour="21"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2520px); }
.print-preview-paper[data-start-hour="22"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2640px); }
.print-preview-paper[data-start-hour="23"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2760px); }
/* Hide events that are completely outside the visible time range */
/* Clip events outside the visible hour range using overflow: hidden */