From 04d1b2eff838bd3fc3e2ff3876e3718343c77f37 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 29 Sep 2017 12:06:47 +0300
Subject: [PATCH] Fixes #9: print styles and page breaks

---
 src/app/core/scss/partials/_print.scss        | 42 ++++++++++++-------
 .../invoices/compact/compact.component.html   | 40 ++++++++++++++++--
 .../invoices/modern/modern.component.html     | 40 ++++++++++++++++--
 3 files changed, 100 insertions(+), 22 deletions(-)

diff --git a/src/app/core/scss/partials/_print.scss b/src/app/core/scss/partials/_print.scss
index ca03b476..e4c7971a 100644
--- a/src/app/core/scss/partials/_print.scss
+++ b/src/app/core/scss/partials/_print.scss
@@ -4,8 +4,9 @@
 
 @media all {
 
-    /* Never show page break in normal view */
-    .page-break {
+    /* Never show page breaks in normal view */
+    .page-break-after,
+    .page-break-before {
         display: none;
     }
 
@@ -13,22 +14,30 @@
 
 @media print {
 
-    /* Page Styles */
-    @page {
-        //margin: 0.5cm;
+    /* html and body tweaks */
+    html, body {
+        height: auto !important;
+        overflow: initial !important;
     }
 
-    /* Page break */
-    .page-break {
+    /* Page breaks */
+    .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 */
-    .printable {
-        overflow: visible !important;
-        height: auto !important;
+        .mat-drawer-container,
+        .mat-sidenav-container {
+            background-color: white !important;
+
+            .mat-drawer-content,
+            .mat-sidenav-content {
+                overflow: initial !important;
+                height: auto !important
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/app/main/content/pages/invoices/compact/compact.component.html b/src/app/main/content/pages/invoices/compact/compact.component.html
index 7aa864df..3ad6e8a5 100644
--- a/src/app/main/content/pages/invoices/compact/compact.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/main/content/pages/invoices/modern/modern.component.html b/src/app/main/content/pages/invoices/modern/modern.component.html
index 4e903924..061f7dec 100644
--- a/src/app/main/content/pages/invoices/modern/modern.component.html
+++ b/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>
\ No newline at end of file