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

Implement dynamic base unit calculation for print preview scaling

Browse Source 
- Add dynamic height calculation system based on selected hour range and time increment
- Replace hardcoded CSS heights with CSS variables (--print-base-unit, --print-pixels-per-hour)
- Update WeekView component with print mode support and dynamic event positioning
- Optimize week header for print: reduced to 50px height with smaller fonts
- Account for all borders and spacing in calculation (660px available content height)
- Remove debug styling (blue borders, yellow backgrounds)
- Ensure time slots, time labels, and events scale together proportionally
- Perfect fit within 720px content area regardless of hour selection

🤖 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 19:26:53 -04:00
parent 78db2cc00f
commit c6c7b38bef
3 changed files with 83 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/print-preview.css
View File

@@ -315,27 +315,51 @@
overflow: visible !important;
}
/* Scale time slots appropriately in preview */
/* Dynamic time slot heights based on calculated base unit */
.print-preview-paper .time-slot {
height: 60px !important; /* Default for 30-minute mode: 2 × 30px = 60px */
min-height: 60px !important;
max-height: 60px !important;
height: calc(var(--print-pixels-per-hour) * 1px) !important;
min-height: calc(var(--print-pixels-per-hour) * 1px) !important;
max-height: calc(var(--print-pixels-per-hour) * 1px) !important;
border-bottom: 1px solid #ddd !important;
overflow: visible !important;
}
/* 15-minute mode (quarter-mode) gets more height */
.print-preview-paper .time-slot.quarter-mode {
height: 120px !important; /* 15-minute mode: 4 slots × 30px = 120px */
min-height: 120px !important;
max-height: 120px !important;
/* Dynamic time label heights - should match time slots */
.print-preview-paper .time-label {
height: calc(var(--print-pixels-per-hour) * 1px) !important;
min-height: calc(var(--print-pixels-per-hour) * 1px) !important;
max-height: calc(var(--print-pixels-per-hour) * 1px) !important;
}
/* Sub-hour time slot styling */
/* Fixed week header height for print - smaller to maximize content */
.print-preview-paper .week-day-header {
height: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
padding: 0.25rem !important; /* Reduce padding to fit content */
}
.print-preview-paper .weekday-name {
font-size: 0.75rem !important; /* Slightly smaller font */
margin-bottom: 0.125rem !important;
}
.print-preview-paper .week-day-header .day-number {
font-size: 1.25rem !important; /* Slightly smaller day number */
}
/* 15-minute and 30-minute modes use the same calculated height */
.print-preview-paper .time-slot.quarter-mode {
height: calc(var(--print-pixels-per-hour) * 1px) !important;
min-height: calc(var(--print-pixels-per-hour) * 1px) !important;
max-height: calc(var(--print-pixels-per-hour) * 1px) !important;
}
/* Sub-hour time slot styling - use dynamic base unit */
.print-preview-paper .time-slot-half {
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
height: calc(var(--print-base-unit) * 1px) !important;
min-height: calc(var(--print-base-unit) * 1px) !important;
max-height: calc(var(--print-base-unit) * 1px) !important;
border-bottom: 1px dotted #ddd !important;
overflow: visible !important;
}
@@ -345,9 +369,9 @@
}
.print-preview-paper .time-slot-quarter {
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
height: calc(var(--print-base-unit) * 1px) !important;
min-height: calc(var(--print-base-unit) * 1px) !important;
max-height: calc(var(--print-base-unit) * 1px) !important;
border-bottom: 1px dotted #eee !important;
overflow: visible !important;
}
@@ -356,23 +380,7 @@
border-bottom: none !important;
}
/* Debug: Test if data attributes are working at all */
.print-preview-paper .time-slot[data-hour] {
border-left: 3px solid blue !important;
}
.print-preview-paper .time-label[data-hour] {
background-color: yellow !important;
}
/* Test specific hour targeting */
.print-preview-paper .time-slot[data-hour="0"] {
border-left: 3px solid red !important;
}
.print-preview-paper .time-label[data-hour="0"] {
background-color: red !important;
}
/* Debug styles removed */
/* Use data attributes for precise hour targeting */
/* Hide hours before start hour - both time slots AND time labels */
@@ -1089,7 +1097,6 @@
.print-preview-paper[data-start-hour][data-end-hour] .time-grid,
.print-preview-paper[data-start-hour][data-end-hour] .week-day-column {
min-height: 400px !important;
border: 2px solid red !important; /* Debug border to see if this rule applies */
}
/* Height adjustments based on visible hours = end_hour - start_hour */