feat: ⚡️ more stable view in the html preview and pdf

- the header can span over the whole page width. - the with of elements is given hard coded instead of relaying on margins. - for the footer the page number cant be processed py the html view therefore don't show it. - the footer is not positioned right in the html view. a lot off margin parameters are handled different in html view and pdf. for the footer none could be found to solve it for both. therefore the html view got an fixed positoned footer.
alyf-de · Oct 16, 2024 · 6846ede · 6846ede
1 parent bb70ff0
commit 6846ede
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 88 deletions.
diff --git a/print_format/delivery_note.jinja b/print_format/delivery_note.jinja
@@ -1,13 +1,3 @@
-<style>
-    .print-format {
-        margin-left: 0mm;
-        margin-right: 0mm;
-        margin-top: 10mm;
-        margin-bottom: 45mm;
-        font-size: 10pt;
-    }
-</style>
-
 {% set company = frappe.get_doc("Company", doc.company) %}
 {% set cmp_addr = frappe.get_doc("Address", doc.company_address) if doc.company_address else None %}
 {% set ship_addr = frappe.get_doc("Address", doc.shipping_address_name) if doc.shipping_address_name else None %}
@@ -134,10 +124,13 @@
 <!-- FOOTER -->
 <div id="footer-html" class="visible-pdf">
     <div class="letter-head-footer">
-        <p id="pagenum">
+        <p id="pagenum" class="visible-pdf">
             {{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
         </p>
-        <div class="print-format-footer">
+        <div class="print-format-footer visible-pdf">
+            {{ footer }}
+        </div>
+        <div class="print-format-footer-html hidden-pdf">
             {{ footer }}
         </div>
     </div>

diff --git a/print_format/dunning.jinja b/print_format/dunning.jinja
@@ -1,13 +1,3 @@
-<style>
-    .print-format {
-        margin-left: 0mm;
-        margin-right: 0mm;
-        margin-top: 10mm;
-        margin-bottom: 45mm;
-        font-size: 10pt;
-    }
-</style>
-
 {% set sales_invoice = frappe.get_doc("Sales Invoice", doc.sales_invoice) %}
 {% set company = frappe.get_doc("Company", doc.company) %}
 {% set cmp_addr = frappe.get_doc("Address", sales_invoice.company_address) if sales_invoice.company_address else None %}
@@ -168,10 +158,13 @@
 <!-- FOOTER -->
 <div id="footer-html" class="visible-pdf">
     <div class="letter-head-footer">
-        <p id="pagenum">
+        <p id="pagenum" class="visible-pdf">
             {{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
         </p>
-        <div class="print-format-footer">
+        <div class="print-format-footer visible-pdf">
+            {{ footer }}
+        </div>
+        <div class="print-format-footer-html hidden-pdf">
             {{ footer }}
         </div>
     </div>

diff --git a/print_format/purchase_order.jinja b/print_format/purchase_order.jinja
@@ -1,13 +1,3 @@
-<style>
-    .print-format {
-        margin-left: 0mm;
-        margin-right: 0mm;
-        margin-top: 10mm;
-        margin-bottom: 45mm;
-        font-size: 10pt;
-    }
-</style>
-
 {% set company = frappe.get_doc("Company", doc.company) %}
 {% set cmp_addr = frappe.get_doc("Address", doc.billing_address) if doc.billing_address else None %}
 {% set pay_addr = frappe.get_doc("Address", doc.supplier_address) if doc.supplier_address else None %}
@@ -202,10 +192,13 @@
 <!-- FOOTER -->
 <div id="footer-html" class="visible-pdf">
     <div class="letter-head-footer">
-        <p id="pagenum">
+        <p id="pagenum" class="visible-pdf">
             {{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
         </p>
-        <div class="print-format-footer">
+        <div class="print-format-footer visible-pdf">
+            {{ footer }}
+        </div>
+        <div class="print-format-footer-html hidden-pdf">
             {{ footer }}
         </div>
     </div>

diff --git a/print_format/quotation.jinja b/print_format/quotation.jinja
@@ -1,13 +1,3 @@
-<style>
-    .print-format {
-        margin-left: 0mm;
-        margin-right: 0mm;
-        margin-top: 10mm;
-        margin-bottom: 45mm;
-        font-size: 10pt;
-    }
-</style>
-
 {% set company = frappe.get_doc("Company", doc.company) %}
 {% set cmp_addr = frappe.get_doc("Address", doc.company_address) if  doc.company_address else None %}
 {% set pay_addr = frappe.get_doc("Address", doc.customer_address) if doc.customer_address else None %}
@@ -218,10 +208,13 @@
 <!-- FOOTER -->
 <div id="footer-html" class="visible-pdf">
     <div class="letter-head-footer">
-        <p id="pagenum">
+        <p id="pagenum" class="visible-pdf">
             {{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
         </p>
-        <div class="print-format-footer">
+        <div class="print-format-footer visible-pdf">
+            {{ footer }}
+        </div>
+        <div class="print-format-footer-html hidden-pdf">
             {{ footer }}
         </div>
     </div>

diff --git a/print_format/request_for_quotation.jinja b/print_format/request_for_quotation.jinja
@@ -1,13 +1,3 @@
-<style>
-    .print-format {
-        margin-left: 0mm;
-        margin-right: 0mm;
-        margin-top: 10mm;
-        margin-bottom: 45mm;
-        font-size: 10pt;
-    }
-</style>
-
 {% set bill_addr = frappe.get_doc("Address", doc.company_address) if doc.company_address else None %}
 {% set company = frappe.get_doc("Company", doc.company) %}
 
@@ -133,10 +123,13 @@
 <!-- FOOTER -->
 <div id="footer-html" class="visible-pdf">
     <div class="letter-head-footer">
-        <p id="pagenum">
+        <p id="pagenum" class="visible-pdf">
             {{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
         </p>
-        <div class="print-format-footer">
+        <div class="print-format-footer visible-pdf">
+            {{ footer }}
+        </div>
+        <div class="print-format-footer-html hidden-pdf">
             {{ footer }}
         </div>
     </div>

diff --git a/print_format/sales_invoice.jinja b/print_format/sales_invoice.jinja
@@ -1,13 +1,3 @@
-<style>
-    .print-format {
-        margin-left: 0mm;
-        margin-right: 0mm;
-        margin-top: 10mm;
-        margin-bottom: 45mm;
-        font-size: 10pt;
-    }
-</style>
-
 {% set company = frappe.get_doc("Company", doc.company) %}
 {% set cmp_addr = frappe.get_doc("Address", doc.company_address) if doc.company_address else None %}
 {% set pay_addr = frappe.get_doc("Address", doc.customer_address) %}
@@ -354,10 +344,13 @@
 <!-- FOOTER -->
 <div id="footer-html" class="visible-pdf">
     <div class="letter-head-footer">
-        <p id="pagenum">
+        <p id="pagenum" class="visible-pdf">
             {{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
         </p>
-        <div class="print-format-footer">
+        <div class="print-format-footer visible-pdf">
+            {{ footer }}
+        </div>
+        <div class="print-format-footer-html hidden-pdf">
             {{ footer }}
         </div>
     </div>

diff --git a/print_format/sales_order.jinja b/print_format/sales_order.jinja
@@ -1,13 +1,3 @@
-<style>
-    .print-format {
-        margin-left: 0mm;
-        margin-right: 0mm;
-        margin-top: 10mm;
-        margin-bottom: 45mm;
-        font-size: 10pt;
-    }
-</style>
-
 {% set company = frappe.get_doc("Company", doc.company) %}
 {% set cmp_addr = frappe.get_doc("Address", doc.company_address) if doc.company_address else None %}
 {% set pay_addr = frappe.get_doc("Address", doc.customer_address) %}
@@ -241,10 +231,13 @@
 <!-- FOOTER -->
 <div id="footer-html" class="visible-pdf">
     <div class="letter-head-footer">
-        <p id="pagenum">
+        <p id="pagenum" class="visible-pdf">
             {{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
         </p>
-        <div class="print-format-footer">
+        <div class="print-format-footer visible-pdf">
+            {{ footer }}
+        </div>
+        <div class="print-format-footer-html hidden-pdf">
             {{ footer }}
         </div>
     </div>

diff --git a/print_style/print_style.scss b/print_style/print_style.scss
@@ -1,13 +1,15 @@
 .print-format {
     padding: 0;
     position: relative;
+    margin-left: 0mm;
+    margin-right: 0mm;
+    margin-top: 10mm;
+    margin-bottom: 45mm;
+    font-size: 10pt;
 
     #header {
-        width: 100%;
         /* ( 45 mm - 10 mm margin ) */
         height: 35mm;
-        /* Overwrite empty header inserted by frappe */
-        margin-top: -10mm;
         overflow: hidden;
         position: relative;
         margin-left: 25mm;
@@ -84,6 +86,7 @@
         margin-top: 8.46mm;
         margin-left: 25mm;
         margin-right: 20mm;
+        width: 165mm;
     }
 
     .text-right {
@@ -135,14 +138,27 @@
 
 .print-format-footer {
     margin-left: 25mm;
-    padding-right: 20mm;
+    width: 165mm;
+    margin-right: 20mm;
+}
+
+.print-format-footer-html {
+  margin-left: 25mm;
+  width: 165mm;
+  height: 20mm;
+  margin-right: 20mm;
+  margin-top: -45mm;
+  bottom: 10mm;
+  position: absolute;
 }
 
 #pagenum {
     text-align: right;
     margin-right: 20mm;
     margin-top: 4.23mm;
     margin-bottom: 4.23mm;
+    margin-left: 25mm;
+    width: 165mm;
 }
 
 body, html {