fix: print styling

pl4nty · Jul 9, 2024 · a432654 · a432654
1 parent 3038ed3
commit a432654
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/src/App.js b/src/App.js
@@ -185,9 +185,9 @@ let App = () => {
   const [isPrintView, setIsPrintView] = useState(false)
   const [printViewCaptureFirstSection, setPrintViewCaptureFirstSection] = useState(true)
 
-  useEffect(() => {
-    document.body.className = isPrintView ? 'print-view' : ''
-  }, [isPrintView])
+  // useEffect(() => {
+  //   document.body.className = isPrintView ? 'print-view' : ''
+  // }, [isPrintView])
 
   // const state = {
   //   timeZone, year, session, sessions, timetableData, modules, selectedModules, weekStart, darkMode,

diff --git a/src/Calendar.js b/src/Calendar.js
@@ -208,7 +208,7 @@ export default function Calendar({ timetableData, selectedModules, session, year
     bootstrapFontAwesome={false}
     //   expandRows={true}
     // can't apply in print context because FC events need JS to resize (CSS inset prop)
-    viewClassNames={isPrintView ? 'print-view' : ''}
+    // viewClassNames={isPrintView ? 'print-view' : ''}
     height='100%'
     expandRows={true}
 

diff --git a/src/index.scss b/src/index.scss
@@ -307,24 +307,32 @@ body[data-theme="dark"] {
   }
 }
 
-// print formatting - designed for calendar.current
-.print-view {
-  @page {
-    size: landscape;
-  }
-
+// Print formatting
+@page {
+  size: landscape;
+  margin: 0;
+}
+// designed for calendar.current
+// .print-view {
+@media print {
   body {
+    print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
   }
 
-  // A4 Sheet
-  .fc-view-harness {
-    flex-grow: 0 !important; // override FullCalendar css
-    height: 21cm;
-    width: 29.7cm;
-    font-size: 12pt;
+  // Assumes A4; will look tiny for larger paper sizes
+  .fc {
+    zoom: 0.7;
   }
 
+  // A4 Sheet
+  // .fc-view-harness {
+  //   flex-grow: 0 !important; // override FullCalendar css
+  //   height: 21cm;
+  //   width: 29.7cm;
+  //   font-size: 12pt;
+  // }
+
   button {
     visibility: hidden;
   }