Fixes #9: print styles and page breaks

src/app/core/scss/partials/_print.scss

@@ -4,8 +4,9 @@
 
 @media all {
 
-    /* Never show page break in normal view */
+    /* Never show page breaks in normal view */
-    .page-break {
+    .page-break-after,
+    .page-break-before {
         display: none;
     }
 
@@ -13,22 +14,30 @@
 
 @media print {
 
-    /* Page Styles */
+    /* html and body tweaks */
-    @page {
+    html, body {
-        //margin: 0.5cm;
+        height: auto !important;
+        overflow: initial !important;
     }
 
-    /* Page break */
+    /* Page breaks */
-    .page-break {
+    .page-break-after {
         display: block;
-        break-after: always;
         page-break-after: always;
+        position: relative;
+    }
+
+    .page-break-before {
+        display: block;
+        page-break-before: always;
+        position: relative;
     }
 
     /* General styles */
     fuse-root {
 
-        fuse-navbar,
+        fuse-navbar-vertical,
+        fuse-navbar-horizontal,
         fuse-toolbar,
         fuse-footer,
         fuse-quick-panel,
@@ -41,11 +50,16 @@
         .ps {
             overflow: visible !important;
         }
-    }
 
-    /* Printable page specific styles */
+        .mat-drawer-container,
-    .printable {
+        .mat-sidenav-container {
-        overflow: visible !important;
+            background-color: white !important;
-        height: auto !important;
+
+            .mat-drawer-content,
+            .mat-sidenav-content {
+                overflow: initial !important;
+                height: auto !important
+            }
+        }
     }
 }

src/app/main/content/pages/invoices/compact/compact.component.html

@@ -136,12 +136,44 @@
                     </div>
                 </div>
             </div>
+
+            <!--
+
+            Use the following elements to add breaks to your pages. This will make sure that the section in between
+            these elements will be printed on a new page. The following two elements must be used before and after the
+            page content that you want to show as a new page. So, you have to wrap your content with them.
+
+            Elements:
+            ---------
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            -->
+
+            <!--
+
+            Example:
+            --------
+
+            Initial page content!
+
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            This is the second page!
+
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            This is the third page!
+
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            -->
+
         </div>
         <!-- / INVOICE -->
 
-        <!-- Use the following element to add breaks to your pages -->
-        <!-- This will make sure that the section after this element will be printed on a new page -->
-        <div class="page-break"></div>
-
     </div>
 </div>

src/app/main/content/pages/invoices/modern/modern.component.html

@@ -158,13 +158,45 @@
                     </div>
                 </div>
             </div>
+
+            <!--
+
+            Use the following elements to add breaks to your pages. This will make sure that the section in between
+            these elements will be printed on a new page. The following two elements must be used before and after the
+            page content that you want to show as a new page. So, you have to wrap your content with them.
+
+            Elements:
+            ---------
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            -->
+
+            <!--
+
+            Example:
+            --------
+
+            Initial page content!
+
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            This is the second page!
+
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            This is the third page!
+
+            <div class="page-break-after"></div>
+            <div class="page-break-before"></div>
+
+            -->
+
         </div>
         <!-- / INVOICE -->
 
-        <!-- Use the following element to add breaks to your pages -->
-        <!-- This will make sure that the section after this element will be printed on a new page -->
-        <div class="page-break"></div>
-
     </div>
 
 </div>