Merge pull request #4690 from beganovich/v5-0114-design-improvements

(v5) Invoices/quotes design improvements

app/Utils/HtmlEngine.php

@@ -96,7 +96,7 @@ class HtmlEngine
         }
 
         $data = [];
-        $data['$global_margin'] = ['value' => '0cm', 'label' => ''];
+        $data['$global_margin'] = ['value' => '6.35mm', 'label' => ''];
         $data['$tax'] = ['value' => '', 'label' => ctrans('texts.tax')];
         $data['$app_url'] = ['value' => $this->generateAppUrl(), 'label' => ''];
         $data['$from'] = ['value' => '', 'label' => ctrans('texts.from')];

resources/views/pdf-designs/bold.html

@@ -1,20 +1,18 @@
 <style id="style">
     :root {
-        --primary-color: $primary_color;
+        --primary-color: $ primary_color;
-        --secondary-color: $secondary_color;
+        --secondary-color: $ secondary_color;
-    }
-
-    * {
-        margin: 0;
-        padding: 0;
-        font-size: "$font_size";
     }
 
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         font-family: Arial, Helvetica, sans-serif;
-        margin: $global_margin;
+        font-size: "$font_size";
+    }
+
+    @page {
+        margin: -0.25cm !important;
     }
 
     p {
@@ -23,13 +21,6 @@
         page-break-after: always;
     }
 
-    @media print {
-        body {
-            margin-top: 0;
-            margin-right: 0;
-        }
-    }
-
     .header-wrapper {
         display: grid;
         grid-template-columns: 1.5fr 1fr 1fr;
@@ -93,7 +84,7 @@
         /* margin-bottom: 200px; */
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;
@@ -108,7 +99,7 @@
     #product-table > thead > tr > th,
     #delivery-note-table > thead > tr > th,
     #task-table > thead > tr > th {
-        padding: 2rem;
+        padding: 1.5rem;
         font-size: 1.5rem;
     }
 
@@ -176,6 +167,7 @@
     }
 </style>
 
+
 <div class="header-wrapper" id="header">
     <div></div>
 

resources/views/pdf-designs/business.html

@@ -102,7 +102,7 @@
         overflow-wrap: break-word;
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;
@@ -168,13 +168,6 @@
         font-weight: bold !important;
     }
 
-    @media print {
-        body {
-            margin-top: 0;
-            margin-right: 0;
-        }
-    }
-
     #table-totals {
         page-break-inside: avoid;
     }

resources/views/pdf-designs/clean.html

@@ -9,6 +9,9 @@
         -moz-osx-font-smoothing: grayscale;
         font-family: Arial, Helvetica, sans-serif;
         font-size: "$font_size";
+    }
+
+    @page {
         margin: $global_margin;
     }
 
@@ -87,7 +90,7 @@
         overflow-wrap: break-word;
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;

resources/views/pdf-designs/creative.html

@@ -4,33 +4,20 @@
         --secondary-color: $secondary_color;
     }
 
-    * {
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
         font-size: "$font_size";
     }
 
+    @page {
+        margin: $global_margin;
+    }
+
     p {
         margin: 0;
         padding: 0;
-        page-break-after: always;
-    }
-
-    body {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
-        margin-top: 1cm;
-        margin-bottom: 1cm;
-    }
-
-    @media print {
-        body {
-            margin: 0;
-            padding: 0;
-        }
-    }
-
-    body {
-        margin: $global_margin;
     }
 
     .header-wrapper {
@@ -102,7 +89,7 @@
         margin-top: 3rem;
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;

resources/views/pdf-designs/elegant.html

@@ -4,22 +4,22 @@
         --secondary-color: $secondary_color;
     }
 
-    * {
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
         font-size: "$font_size";
     }
 
+    @page {
+        margin: $global_margin;
+    }
+
     p {
         margin: 0;
         padding: 0;
     }
 
-    body {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
-        margin: $global_margin;
-    }
-
     .company-logo-wrapper {
         display: flex;
         flex-direction: row;
@@ -89,7 +89,7 @@
         overflow-wrap: break-word;
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;

resources/views/pdf-designs/hipster.html

@@ -4,25 +4,22 @@
         --secondary-color: $secondary_color;
     }
 
-    * {
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
         font-size: "$font_size";
     }
 
+    @page {
+        margin: $global_margin;
+    }
+
     p {
         margin: 0;
         padding: 0;
     }
 
-    body {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
-    }
-
-    @page {
-        margin: $global_margin;
-    }
-
     .header-wrapper {
         display: grid;
         grid-template-columns: 1.2fr 1.8fr;
@@ -107,7 +104,7 @@
         overflow-wrap: break-word;
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;

resources/views/pdf-designs/modern.html

@@ -4,18 +4,19 @@
         --secondary-color: $secondary_color;
     }
 
-    * {
-        font-size: "$font_size";
-    }
-
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         font-family: Arial, Helvetica, sans-serif;
+        font-size: "$font_size";
         margin: 0;
         padding: 0;
     }
 
+    @page {
+        margin: -0.22cm;
+    }
+
     p {
         margin: 0;
         padding: 0;
@@ -78,10 +79,17 @@
         overflow-wrap: break-word;
     }
 
+    .task-time-details {
+        display: block;
+        margin-top: 5px;
+        color: grey;
+    }
+
     #product-table > thead,
     #delivery-note-table > thead,
     #task-table > thead {
         text-align: left;
+        width: 100%;
     }
 
     #product-table > thead > tr > th,
@@ -90,6 +98,7 @@
         padding: 0.8rem;
         background-color: var(--secondary-color);
         color: white;
+        width: 100%;
     }
 
     #product-table > thead > tr > th:last-child,
@@ -188,6 +197,7 @@
 
     table.page-container {
         page-break-after: always;
+        min-width: 100%;
     }
 
     thead.page-header {

resources/views/pdf-designs/plain.html

@@ -1,21 +1,25 @@
 <style id="style">
-    * {
+    :root {
-        font-size: "$font_size";
+        --primary-color: $primary_color;
-    }
+        --secondary-color: $secondary_color;
-
-    p {
-        margin: 0;
-        padding: 0;
-        page-break-after: always;
     }
 
     body {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         font-family: Arial, Helvetica, sans-serif;
+        font-size: "$font_size";
+    }
+
+    @page {
         margin: $global_margin;
     }
 
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
     .header-wrapper {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
@@ -68,7 +72,7 @@
         /* margin-bottom: 200px; */
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;

resources/views/pdf-designs/playful.html

@@ -4,22 +4,22 @@
         --secondary-color: $secondary_color;
     }
 
-    * {
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
         font-size: "$font_size";
     }
 
+    @page {
+        margin: $global_margin;
+    }
+
     p {
         margin: 0;
         padding: 0;
     }
 
-    body {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        font-family: Arial, Helvetica, sans-serif;
-        margin: $global_margin;
-    }
-
     .header-wrapper {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
@@ -97,7 +97,7 @@
         overflow-wrap: break-word;
     }
 
-    .task-duration {
+    .task-time-details {
         display: block;
         margin-top: 5px;
         color: grey;