From 1cb8574dd8e055dac9f8a6c151e6c45efe2709ad Mon Sep 17 00:00:00 2001
From: Joshua Dwire <jdwire@boldcompass.com>
Date: Tue, 5 Oct 2021 19:35:13 -0400
Subject: [PATCH] Design updates

---
 resources/views/pdf-designs/bold.html   | 28 ++++++++++---------
 resources/views/pdf-designs/modern.html | 36 ++++++++++---------------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index e3704e7d1cc5..8545f2b65c00 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -19,20 +19,23 @@
     }
 
     @page {
-        margin: 0 -5px !important;
+        margin: 0 !important;
         size: $page_size $page_layout;
     }
 
     p {
         margin: 0;
         padding: 0;
-        /* page-break-after: always; */
     }
 
     #spacer-table > * > tr > td {
         padding: 0;
     }
 
+    #spacer-table{
+        width: 100%;
+    }
+
     #header {
         display: grid;
         grid-template-columns: 1.5fr 1fr 1fr;
@@ -44,12 +47,12 @@
         top: 0;
     }
 
+
     #header, #header-spacer {
         height: 160px;
         padding: 3rem;
         margin-bottom: 3rem;
     }
-
     .company-logo {
         height: 100%;
         max-width: 100%;
@@ -108,7 +111,11 @@
         table-layout: fixed;
         overflow-wrap: break-word;
         margin-top: 3rem;
-        /* margin-bottom: 200px; */
+        margin-bottom: 200px;
+    }
+
+    [data-ref="table"]:last-child{
+        margin-bottom:0;
     }
 
     .task-time-details {
@@ -307,7 +314,7 @@
     <div id="company-address"></div>
 </div>
 <div id="body">
-    <table id="spacer-table">
+    <table id="spacer-table" cellspacing="0" >
         <thead>
         <tr>
             <td>
@@ -331,7 +338,6 @@
                     </div>
                 </div>
 
-                <!-- Start Print Content -->
                 <table id="product-table" cellspacing="0" data-ref="table"></table>
 
                 <table id="task-table" cellspacing="0" data-ref="table"></table>
@@ -346,7 +352,6 @@
 
                 <table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
                 <div id="statement-aging-table-totals" data-ref="statement-totals"></div>
-                <!-- End Print Content -->
                 <div id="table-totals" cellspacing="0"></div>
             </td>
         </tr>
@@ -368,14 +373,13 @@
             // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
             document.addEventListener('DOMContentLoaded', () => {
                 let tables = [
-                    'product-table', 'task-table', 'delivery-note-table',
-                    'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',
+                    'product-table', 'task-table', 'delivery-note-table',  'statement-invoice-table-totals', 'statement-payment-table-totals','statement-invoice-table-totals',
+                    'statement-invoice-table', 'statement-payment-table', 'statement-aging-table', 'statement-aging-table-totals', 'statement-payment-table-totals'
                 ];
 
                 tables.forEach((tableIdentifier) => {
-                    document.getElementById(tableIdentifier).childElementCount === 0
-                            ? document.getElementById(tableIdentifier).style.display = 'none'
-                            : '';
+                    const el =document.getElementById(tableIdentifier);
+                    if(el && el.childElementCount === 0)el.remove()
                 });
             });
         </script>
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index 86fdc51ca9ca..712af9dd6925 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -18,7 +18,7 @@
       }
 
       @page {
-          margin: 0 -5px !important;
+          margin: 0 !important;
           size: $page_size $page_layout;
       }
 
@@ -27,6 +27,14 @@
         padding: 0;
       }
 
+      #spacer-table > * > tr > td {
+          padding: 0;
+      }
+
+      #spacer-table{
+          width: 100%;
+      }
+
       #header {
           background-color: var(--primary-color);
           color: white;
@@ -34,6 +42,7 @@
           grid-template-columns: 1.5fr 1fr;
           position:fixed;
           top: 0;
+          width: 100%;
       }
 
       #header, #header-spacer {
@@ -214,23 +223,6 @@
         font-size: 1.3rem;
       }
 
-      table.page-container {
-        page-break-after: always;
-        min-width: 100%;
-      }
-
-      thead.page-header {
-        display: table-header-group;
-      }
-
-      tfoot.page-footer {
-        display: table-footer-group;
-      }
-
-      .page-content-cell {
-        padding: 1rem;
-      }
-
       [data-ref="total_table-footer"] {
           margin-top: 2rem;
           margin-bottom: 2rem;
@@ -305,7 +297,7 @@
     <table id="entity-details" cellspacing="0" dir="$dir"></table>
 </div>
 <div id="body">
-    <table id="spacer-table">
+    <table id="spacer-table" cellspacing="0">
         <thead>
         <tr>
             <td>
@@ -359,13 +351,13 @@
                 // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
                 document.addEventListener('DOMContentLoaded', () => {
                     let tables = [
-                        'product-table', 'task-table', 'delivery-note-table',
-                        'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',
+                        'product-table', 'task-table', 'delivery-note-table',  'statement-invoice-table-totals', 'statement-payment-table-totals','statement-invoice-table-totals',
+                        'statement-invoice-table', 'statement-payment-table', 'statement-aging-table', 'statement-aging-table-totals', 'statement-payment-table-totals'
                     ];
 
                     tables.forEach((tableIdentifier) => {
                         document.getElementById(tableIdentifier).childElementCount === 0
-                                ? document.getElementById(tableIdentifier).style.display = 'none'
+                                ? document.getElementById(tableIdentifier).remove()
                                 : '';
                     });
                 });