styling: Configure print page

DSD-DBS · Apr 10, 2024 · f109971 · f109971
1 parent 3e5ad9a
commit f109971
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -44,3 +44,9 @@
 .read-the-docs {
   color: #888;
 }
+
+@media print {
+  .header {
+    display: none !important;
+  }
+}
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
@@ -7,7 +7,7 @@ import {ThemeSwitcher} from "./ThemeSwitcher";
 
 export const Header = () => {
     return (
-      <header className=" text-gray-700 p-4 flex justify-between items-center">
+      <header className="header text-gray-700 p-4 flex justify-between items-center">
           <div><Breadcrumbs /></div>
           <div></div>
           <div><ThemeSwitcher /></div>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -107,3 +107,10 @@ button:focus-visible {
 ul {
   @apply list-disc pl-5;
 }
+
+@media print {
+  body, .html-wrapper, .flex-1, .html-content {
+    overflow: visible !important;
+  }
+  @page  { margin: 15mm; }   
+}
diff --git a/frontend/src/views/TemplateView.jsx b/frontend/src/views/TemplateView.jsx
@@ -41,7 +41,7 @@ export const TemplateView = ({ endpoint }) => {
                 </aside>
                 {/* Main Content */}
                 <main className="flex-1 overflow-hidden p-4">
-                    <div className="w-full p-4 max-w-none lg:max-w-4xl min-w-0 lg:min-w-[850px] overflow-y-hidden h-full flex items-center justify-center">
+                    <div className="html-wrapper w-full p-4 max-w-none lg:max-w-4xl min-w-0 lg:min-w-[850px] overflow-y-hidden h-full flex items-center justify-center">
                         {" "}
                         {/* Ensure main content is scrollable and fills the height */}
                         {!!!objectID && !!!singleObjectID && (