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

Implement hybrid print preview with CSS-based approach

Browse Source 
- Add hidden print-preview-copy div at app level for clean print isolation
- Use @media print rules to show only print copy (960x720) in landscape
- Auto-sync print copy with preview content on modal render via use_effect
- Copy CSS variables and data attributes for proper hour filtering
- Set explicit dimensions matching print-preview-paper content area
- Force landscape orientation with @page rule for better calendar printing

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-12 13:17:21 -04:00
parent a297d38276
commit 96585440d1
7 changed files with 105 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/Cargo.toml
View File

@@ -30,6 +30,8 @@ web-sys = { version = "0.3", features = [
"RequestMode",
"Response",
"CssStyleDeclaration",
"MediaQueryList",
"MediaQueryListEvent",
] }
wasm-bindgen = "0.2"
js-sys = "0.3"

2
frontend/Trunk.toml
View File

@@ -6,7 +6,7 @@ dist = "dist"
BACKEND_API_URL = "http://localhost:3000/api"
[watch]
watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "print.css", "print-preview.css", "index.html"]
watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "print-preview.css", "index.html"]
ignore = ["../backend/", "../target/"]
[serve]

1
frontend/index.html
View File

@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base data-trunk-public-url />
<link data-trunk rel="css" href="styles.css">
<link data-trunk rel="css" href="print.css">
<link data-trunk rel="css" href="print-preview.css">
<link data-trunk rel="copy-file" href="styles/google.css">
<link data-trunk rel="icon" href="favicon.ico">

34
frontend/print-preview.css
View File

@@ -1127,3 +1127,37 @@
.print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .week-days-grid,
.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels,
.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; }
/* Print Page Setup - Force landscape orientation */
@page {
size: landscape;
margin: 0.5in;
}
/* Print Media Rules - Show only the print-preview-copy when printing */
@media print {
/* Hide all top-level app content */
.app {
display: none !important;
}
/* Show only the print copy div */
#print-preview-copy {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 960px !important;
height: 720px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Ensure print content uses the full page */
body {
margin: 0 !important;
padding: 0 !important;
background: white !important;
}
}

474
frontend/print.css
View File

@@ -1,474 +0,0 @@
/* /* Print-specific styles for calendar printing */ */
/* @media print { */
/* /* Hide UI elements that shouldn't be printed */ */
/* .app-sidebar, */
/* .current-time-indicator-container, */
/* .current-time-indicator, */
/* .print-button, */
/* .nav-button, */
/* .today-button, */
/* .time-increment-button, */
/* .modal-backdrop, */
/* .create-event-modal, */
/* .event-modal, */
/* .calendar-management-modal, */
/* .context-menu { */
/* display: none !important; */
/* } */
/**/
/* /* Remove today highlighting from calendar elements */ */
/* .calendar-day.today, */
/* .week-day-header.today, */
/* .week-day-column.today { */
/* background-color: transparent !important; */
/* border-color: var(--border-color) !important; */
/* color: var(--text-color) !important; */
/* } */
/**/
/* /* Remove today-specific styling from day numbers */ */
/* .calendar-day.today .day-number { */
/* background-color: transparent !important; */
/* color: var(--text-color) !important; */
/* font-weight: normal !important; */
/* } */
/**/
/* /* Remove today indicator from week day headers */ */
/* .week-day-header.today .weekday-name { */
/* color: var(--text-color) !important; */
/* font-weight: normal !important; */
/* } */
/**/
/* /* Page setup */ */
/* @page { */
/* size: letter landscape; */
/* margin: 0.5in; */
/* } */
/**/
/* /* Make app and main container fill full page width */ */
/* .app, */
/* .app-main, */
/* .calendar-view { */
/* width: 100% !important; */
/* max-width: none !important; */
/* margin: 0 !important; */
/* padding: 0 !important; */
/* display: block !important; */
/* } */
/**/
/* /* Remove any flexbox constraints that might limit width */ */
/* .app { */
/* display: block !important; */
/* } */
/**/
/* .app-main { */
/* margin-left: 0 !important; /* Remove sidebar margin */ */
/* width: 100% !important; */
/* max-width: none !important; */
/* } */
/**/
/* /* Ensure calendar uses full available width */ */
/* .calendar-container, */
/* .calendar { */
/* width: 100% !important; */
/* max-width: none !important; */
/* margin: 0 !important; */
/* padding: 0 !important; */
/* } */
/**/
/* /* Adjust calendar header for printing */ */
/* .calendar-header { */
/* margin-bottom: 0.5rem !important; */
/* padding-bottom: 0.5rem !important; */
/* border-bottom: 1px solid var(--border-color) !important; */
/* } */
/**/
/* /* Ensure text is readable in print */ */
/* body, html { */
/* color: black !important; */
/* background: white !important; */
/* } */
/**/
/* /* Make sure event text is readable */ */
/* .week-event, */
/* .calendar-event, */
/* .month-event { */
/* border: 1px solid #333 !important; */
/* color: black !important; */
/* font-size: 0.8rem !important; */
/* line-height: 1.2 !important; */
/* } */
/**/
/* /* Ensure month view events are visible */ */
/* .calendar-day .event-list .event-item { */
/* background-color: #f5f5f5 !important; */
/* border: 1px solid #333 !important; */
/* color: black !important; */
/* } */
/**/
/* /* Week view specific adjustments - force full day view */ */
/* .week-view-container { */
/* width: 100% !important; */
/* height: auto !important; */
/* overflow: visible !important; */
/* } */
/**/
/* .week-day-column { */
/* border-right: 1px solid #333 !important; */
/* height: auto !important; */
/* overflow: visible !important; */
/* } */
/**/
/* .time-column { */
/* border-right: 2px solid #333 !important; */
/* width: 60px !important; */
/* min-width: 60px !important; */
/* height: auto !important; */
/* overflow: visible !important; */
/* } */
/**/
/* /* Dynamic time slot sizes based on hour range */ */
/* .time-slot { */
/* height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
/* min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
/* max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
/* border-bottom: 1px solid #ddd !important; */
/* overflow: visible !important; */
/* } */
/**/
/* /* Time slot quarters for 15-minute mode - use dynamic base unit */ */
/* .time-slot.quarter-mode .time-slot-quarter { */
/* height: calc(var(--print-base-unit, 30) * 1px) !important; */
/* min-height: calc(var(--print-base-unit, 30) * 1px) !important; */
/* max-height: calc(var(--print-base-unit, 30) * 1px) !important; */
/* border-bottom: 1px solid #eee !important; */
/* } */
/**/
/* /* Time slot halves for 30-minute mode - use dynamic base unit */ */
/* .time-slot .time-slot-half { */
/* height: calc(var(--print-base-unit, 30) * 1px) !important; */
/* min-height: calc(var(--print-base-unit, 30) * 1px) !important; */
/* max-height: calc(var(--print-base-unit, 30) * 1px) !important; */
/* border-bottom: 1px solid #eee !important; */
/* } */
/**/
/* /* Make hour boundaries more visible */ */
/* .time-slot:nth-child(4n) { */
/* border-bottom: 1px solid #333 !important; */
/* height: 20px !important; */
/* } */
/**/
/* /* Dynamic hour range hiding for print mode */ */
/* body[data-print-mode="true"][data-print-start-hour="1"] .week-view .time-slot:nth-child(1) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="2"] .week-view .time-slot:nth-child(-n+2) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="3"] .week-view .time-slot:nth-child(-n+3) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="4"] .week-view .time-slot:nth-child(-n+4) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="5"] .week-view .time-slot:nth-child(-n+5) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="6"] .week-view .time-slot:nth-child(-n+6) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="7"] .week-view .time-slot:nth-child(-n+7) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="8"] .week-view .time-slot:nth-child(-n+8) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="9"] .week-view .time-slot:nth-child(-n+9) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="10"] .week-view .time-slot:nth-child(-n+10) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="11"] .week-view .time-slot:nth-child(-n+11) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="12"] .week-view .time-slot:nth-child(-n+12) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="13"] .week-view .time-slot:nth-child(-n+13) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="14"] .week-view .time-slot:nth-child(-n+14) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="15"] .week-view .time-slot:nth-child(-n+15) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="16"] .week-view .time-slot:nth-child(-n+16) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="17"] .week-view .time-slot:nth-child(-n+17) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="18"] .week-view .time-slot:nth-child(-n+18) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="19"] .week-view .time-slot:nth-child(-n+19) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="20"] .week-view .time-slot:nth-child(-n+20) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="21"] .week-view .time-slot:nth-child(-n+21) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="22"] .week-view .time-slot:nth-child(-n+22) { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="23"] .week-view .time-slot:nth-child(-n+23) { display: none !important; } */
/**/
/* /* Hide hours after end-hour */ */
/* body[data-print-mode="true"][data-print-end-hour="1"] .week-view .time-slot:nth-child(n+2) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="2"] .week-view .time-slot:nth-child(n+3) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="3"] .week-view .time-slot:nth-child(n+4) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="4"] .week-view .time-slot:nth-child(n+5) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="5"] .week-view .time-slot:nth-child(n+6) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="6"] .week-view .time-slot:nth-child(n+7) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="7"] .week-view .time-slot:nth-child(n+8) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="8"] .week-view .time-slot:nth-child(n+9) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="9"] .week-view .time-slot:nth-child(n+10) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="10"] .week-view .time-slot:nth-child(n+11) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="11"] .week-view .time-slot:nth-child(n+12) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="12"] .week-view .time-slot:nth-child(n+13) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="13"] .week-view .time-slot:nth-child(n+14) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="14"] .week-view .time-slot:nth-child(n+15) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="15"] .week-view .time-slot:nth-child(n+16) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="16"] .week-view .time-slot:nth-child(n+17) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="17"] .week-view .time-slot:nth-child(n+18) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="18"] .week-view .time-slot:nth-child(n+19) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="19"] .week-view .time-slot:nth-child(n+20) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="20"] .week-view .time-slot:nth-child(n+21) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="21"] .week-view .time-slot:nth-child(n+22) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="22"] .week-view .time-slot:nth-child(n+23) { display: none !important; } */
/* body[data-print-mode="true"][data-print-end-hour="23"] .week-view .time-slot:nth-child(n+24) { display: none !important; } */
/**/
/* /* Hide time labels for hours before start hour using data attributes */ */
/* body[data-print-mode="true"][data-print-start-hour="1"] .time-label[data-hour="0"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="1"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="2"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="3"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="4"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="5"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="6"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="7"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="8"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="9"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="9"], */
/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="10"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="9"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="10"], */
/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="11"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="9"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="10"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="11"], */
/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="12"] { display: none !important; } */
/**/
/* /* Hide time labels for remaining start hours (14-23) */ */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="9"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="10"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="11"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="12"], */
/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="13"] { display: none !important; } */
/**/
/* /* Additional start hours 15-23 with similar patterns */ */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="0"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="9"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="10"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="11"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="12"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="13"], */
/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="14"] { display: none !important; } */
/**/
/* /* Continue pattern for hours 16-23 (abbreviated for brevity) */ */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="0"] { display: none !important; } */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="9"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="10"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="11"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="12"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="13"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="14"], */
/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="15"] { display: none !important; } */
/**/
/* /* Hide time labels for hours after end hour */ */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="1"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="2"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="3"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="4"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="5"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="6"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="7"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="8"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="9"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="10"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="11"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="12"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="13"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="14"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="15"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="16"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="17"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="18"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="19"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="20"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="21"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="22"], */
/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="23"] { display: none !important; } */
/**/
/* /* Force the week grid to show full height */ */
/* .week-grid, */
/* .week-content, */
/* .time-grid { */
/* height: auto !important; */
/* max-height: none !important; */
/* overflow: visible !important; */
/* } */
/**/
/* /* Ensure all hours are visible by removing any height constraints */ */
/* .week-view-container, */
/* .week-view-container > div { */
/* height: auto !important; */
/* max-height: none !important; */
/* overflow: visible !important; */
/* } */
/**/
/* /* Month view specific adjustments */ */
/* .calendar-grid { */
/* border: 1px solid #333 !important; */
/* } */
/**/
/* .calendar-day { */
/* border: 1px solid #333 !important; */
/* min-height: 80px !important; */
/* } */
/**/
/* /* Ensure grid lines are visible - handled above in main time-slot rules */ */
/**/
/* /* Make sure header text is visible */ */
/* .calendar-header h2, */
/* .calendar-header .month-year { */
/* color: black !important; */
/* font-size: 1.5rem !important; */
/* } */
/**/
/* .week-day-header .weekday-name, */
/* .week-day-header .date-number { */
/* color: black !important; */
/* } */
/**/
/* /* Time labels in week view - use dynamic heights to match time slots */ */
/* .time-label { */
/* color: #666 !important; */
/* font-size: 0.75rem !important; */
/* height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
/* min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
/* max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
/* } */
/**/
/* /* Remove any shadows or fancy effects */ */
/* * { */
/* box-shadow: none !important; */
/* text-shadow: none !important; */
/* } */
/**/
/* /* Ensure proper spacing */ */
/* .calendar-day .day-number { */
/* margin-bottom: 0.25rem !important; */
/* } */
/**/
/* /* Make sure events don't overlap text in month view */ */
/* .calendar-day .event-list { */
/* margin-top: 0.25rem !important; */
/* } */
/**/
/* /* Force page break before calendar if needed */ */
/* .calendar { */
/* page-break-inside: avoid !important; */
/* } */
/* } */
/**/
/* /* Additional print button styling for screen display */ */
/* .print-button { */
/* background: rgba(255,255,255,0.2); */
/* border: none; */
/* color: white; */
/* font-size: 1.2rem; */
/* width: 40px; */
/* height: 40px; */
/* border-radius: 50%; */
/* cursor: pointer; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* transition: background-color 0.2s; */
/* margin-left: 0.5rem; */
/* } */
/**/
/* .print-button:hover { */
/* background: rgba(255,255,255,0.3); */
/* } */
/**/
/* .print-button:active { */
/* transform: scale(0.95); */
/* } */

3
frontend/src/app.rs
View File

@@ -1702,6 +1702,9 @@ pub fn App() -> Html {
on_close={on_mobile_warning_close}
/>
</div>
// Hidden print copy that gets shown only during printing
<div id="print-preview-copy" class="print-preview-paper" style="display: none;"></div>
</BrowserRouter>
}
}

150
frontend/src/components/print_preview_modal.rs
View File

@@ -102,25 +102,16 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html {
// Calculate print dimensions for the current hour range
let (base_unit, pixels_per_hour, _available_height) = calculate_print_dimensions(*start_hour, *end_hour, props.time_increment);
let on_print = {
// Effect to update print copy whenever modal renders or content changes
{
let start_hour = *start_hour;
let end_hour = *end_hour;
let view_mode = props.view_mode.clone();
let base_unit_value = base_unit;
let pixels_per_hour_value = pixels_per_hour;
Callback::from(move |_: MouseEvent| {
use_effect(move || {
if let Some(window) = web_sys::window() {
if let Some(document) = window.document() {
// Find the print preview content element
if let Some(preview_content) = document.query_selector(".print-preview-content").ok().flatten() {
// Clone the content to print
if let Some(content_clone) = preview_content.clone_node_with_deep(true).ok() {
if let Some(body) = document.body() {
// Store original body content and styling
let original_body_html = body.inner_html();
let original_body_style = body.get_attribute("style").unwrap_or_default();
// Set CSS variables on document root for print
// Set CSS variables on document root
if let Some(document_element) = document.document_element() {
if let Some(html_element) = document_element.dyn_ref::<web_sys::HtmlElement>() {
let style = html_element.style();
@@ -131,116 +122,59 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html {
}
}
// Clear body and add only the preview content
body.set_inner_html("");
let _ = body.set_attribute("style", "margin: 0; padding: 0; background: white;");
let _ = body.append_child(&content_clone);
// Copy content from print-preview-content to the hidden print-preview-copy div
let copy_content = move || {
if let Some(preview_content) = document.query_selector(".print-preview-content").ok().flatten() {
if let Some(print_copy) = document.get_element_by_id("print-preview-copy") {
// Clone the preview content
if let Some(content_clone) = preview_content.clone_node_with_deep(true).ok() {
// Clear the print copy div and add the cloned content
print_copy.set_inner_html("");
let _ = print_copy.append_child(&content_clone);
// Set up restore content variables for later use
use std::rc::Rc;
let restore_body = Rc::new(body.clone());
let restore_document = Rc::new(document.clone());
let original_html = Rc::new(original_body_html.clone());
let original_style = Rc::new(original_body_style.clone());
let setup_window = Rc::new(window.clone());
// Add a small delay before printing to make the change visible
let print_window = window.clone();
let print_callback = Closure::wrap(Box::new(move || {
// Use visibility change event to detect when user returns to page
let restore_body = restore_body.clone();
let restore_document = restore_document.clone();
let original_html = original_html.clone();
let original_style = original_style.clone();
let setup_document1 = document.clone();
let setup_document2 = document.clone();
// Create restore function for both visibility and focus events
let restore_body_vis = restore_body.clone();
let restore_document_vis = restore_document.clone();
let original_html_vis = original_html.clone();
let original_style_vis = original_style.clone();
let setup_document_vis = setup_document1.clone();
let restore_body_focus = restore_body.clone();
let restore_document_focus = restore_document.clone();
let original_html_focus = original_html.clone();
let original_style_focus = original_style.clone();
// Try multiple approaches - visibility change
let visibility_callback = Closure::wrap(Box::new(move || {
if !setup_document_vis.hidden() {
// Restore original body content and style
restore_body_vis.set_inner_html(&original_html_vis);
if original_style_vis.is_empty() {
let _ = restore_body_vis.remove_attribute("style");
} else {
let _ = restore_body_vis.set_attribute("style", &original_style_vis);
// Copy the CSS variables and data attributes from the print-preview-paper
if let Some(preview_paper) = document.query_selector(".print-preview-paper").ok().flatten() {
if let Some(_paper_element) = preview_paper.dyn_ref::<web_sys::HtmlElement>() {
// Copy CSS custom properties (variables)
if let Some(print_copy_html) = print_copy.dyn_ref::<web_sys::HtmlElement>() {
let style = print_copy_html.style();
let _ = style.set_property("--print-start-hour", &start_hour.to_string());
let _ = style.set_property("--print-end-hour", &end_hour.to_string());
let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value));
let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value));
}
// Clean up CSS variables
if let Some(document_element) = restore_document_vis.document_element() {
if let Some(html_element) = document_element.dyn_ref::<web_sys::HtmlElement>() {
let style = html_element.style();
let _ = style.remove_property("--print-base-unit");
let _ = style.remove_property("--print-pixels-per-hour");
let _ = style.remove_property("--print-start-hour");
let _ = style.remove_property("--print-end-hour");
// Copy data attributes
let _ = print_copy.set_attribute("data-start-hour", &start_hour.to_string());
let _ = print_copy.set_attribute("data-end-hour", &end_hour.to_string());
}
}
}
}) as Box<dyn FnMut()>);
// And also try focus event as backup
let focus_callback = Closure::wrap(Box::new(move || {
// Restore original body content and style
restore_body_focus.set_inner_html(&original_html_focus);
if original_style_focus.is_empty() {
let _ = restore_body_focus.remove_attribute("style");
} else {
let _ = restore_body_focus.set_attribute("style", &original_style_focus);
}
// Clean up CSS variables
if let Some(document_element) = restore_document_focus.document_element() {
if let Some(html_element) = document_element.dyn_ref::<web_sys::HtmlElement>() {
let style = html_element.style();
let _ = style.remove_property("--print-base-unit");
let _ = style.remove_property("--print-pixels-per-hour");
let _ = style.remove_property("--print-start-hour");
let _ = style.remove_property("--print-end-hour");
}
}
}) as Box<dyn FnMut()>);
};
// Set up both listeners
let _ = setup_document2.add_event_listener_with_callback(
"visibilitychange",
visibility_callback.as_ref().unchecked_ref()
);
let _ = print_window.add_event_listener_with_callback(
"focus",
focus_callback.as_ref().unchecked_ref()
);
visibility_callback.forget();
focus_callback.forget();
// Now trigger the print dialog
let _ = print_window.print();
}) as Box<dyn FnMut()>);
// Copy content immediately
copy_content();
// Also set up a small delay to catch any async rendering
let copy_callback = Closure::wrap(Box::new(copy_content) as Box<dyn FnMut()>);
let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0(
print_callback.as_ref().unchecked_ref(),
100 // 100ms delay to see the content change
copy_callback.as_ref().unchecked_ref(),
100
);
print_callback.forget();
}
copy_callback.forget();
}
}
|| ()
});
}
let on_print = {
Callback::from(move |_: MouseEvent| {
if let Some(window) = web_sys::window() {
// Print copy is already updated by the use_effect, just trigger print
let _ = window.print();
}
})
};