[FIX] l10n_ch: zoom isr and have margin for title

1. A zoom is needed because the virtual viewport of wkhtml is bigger than
a A4 paper size. Hence we go over the size of the A4 paper with the zoom
and the content is then resized down to what we want.

2. There was also an issue for example with the title (outside the isr)
which had no margin so could be over the report header.

3. Tidy-up some comments in the ISR report

4. Use OCR-B font for optical reference if available

task-30535

2 files changed, 60 insertions, 40 deletions

diff --git a/addons/l10n_ch/report/isr_report.xml b/addons/l10n_ch/report/isr_report.xml
index 312f2cbdb68..23ff2f70758 100644
--- a/addons/l10n_ch/report/isr_report.xml
+++ b/addons/l10n_ch/report/isr_report.xml
@@ -43,38 +43,37 @@
             </xpath>
         </template>
 
-        <!--TODO: this template needs to be modified in order to respect the ISR
-        layout given in PostFinance's specifications.
-
-        The titles given here, are temporary, and only used for clarity purposes.
-        They should not be on the final version of the report, as they will be
-        pre-printed on paper.-->
         <template id="l10n_ch_isr_report_template">
             <t t-call="report.external_layout">
                 <t t-set="split_total_amount" t-value="invoice.split_total_amount()"/>
-                <t t-set="invoice_bank_id" t-value="invoice.company_id.l10n_ch_isr_print_bank_location and invoice.partner_bank_id.bank_id"/>
+                <t t-set="print_bank" t-value="invoice.company_id.l10n_ch_isr_print_bank_location"/>
+
+                <!-- add class to body tag -->
+                <script>document.body.className += " l10n_ch_isr";</script>
 
-                <h1>ISR for invoice <t t-esc="invoice.number"/></h1>
+                <!-- since the body content take the whole page we need a way to add margin
+                     back on content outside the ISR so it does not overlap with the header -->
+                <div id="content_outside_isr">
+                    <h1>ISR for invoice <t t-esc="invoice.number"/></h1>
+                </div>
 
-                <div id="l10n_ch_isr" t-att-class="'isr-print-bank' if invoice_bank_id else None">
+                <div id="isr" t-att-class="'isr-print-bank' if print_bank else None">
 
                     <!--Voucher, left part of the ISR.-->
                     <div id="voucher">
-                        <!--<h1>Voucher</h1>-->
-
-                        <!--<h2>Einzahlung für/Versement pour/Versamento per</h2>-->
+                        <!--Einzahlung für/Versement pour/Versamento per-->
 
                         <!--If we use the alternate ISR layout, displaying name
                         and location of the bank.-->
-                        <t t-if="invoice_bank_id">
+                        <t t-if="print_bank">
                             <div id="voucher-for-bank">
                                 <p>
-                                    <t t-esc="invoice_bank_id.name"/><br />
-                                    <t t-esc="invoice_bank_id.zip"/>
-                                    <t t-esc="invoice_bank_id.city"/>
+                                    <t t-esc="invoice.partner_bank_id.bank_id.name"/><br />
+                                    <t t-esc="invoice.partner_bank_id.bank_id.zip"/>
+                                    <t t-esc="invoice.partner_bank_id.bank_id.city"/>
                                 </p>
                             </div>
-                            <!--<h2>Zugunsten von/En faveur de/A favore di</h2>-->
+                            <!--Zugunsten von/En faveur de/A favore di-->
                         </t>
                         <div id="voucher-for-contact">
                             <p id="voucher-for_name" t-field="invoice.company_id.display_name"/>
@@ -87,7 +86,7 @@
                         </div>
 
                         <div id="voucher-bank">
-                            <!--<h2>Konto/Compte/Conto</h2>-->
+                            <!--Konto/Compte/Conto-->
                             <p id="voucher-bank_ref" t-field="invoice.l10n_ch_isr_postal_formatted"/>
                         </div>
 
@@ -96,7 +95,7 @@
                         <p id="voucher-amount_cents" t-esc="split_total_amount[1]"/>
 
                         <div id="voucher-by">
-                            <!--<h2>Einbezahlt von/Versé par/Versato da</h2>-->
+                            <!--Einbezahlt von/Versé par/Versato da-->
                             <p id="voucher-by_reference_number" t-field="invoice.l10n_ch_isr_number"/>
                             <address id="voucher-by_customer_address" t-field="invoice.partner_id" t-options='{"widget": "contact", "fields": ["address","name"], "no_marker": True}' />
                         </div>
@@ -104,21 +103,19 @@
 
                     <!--Slip, right part of the ISR.-->
                     <div id="slip">
-                        <!--<h1>Slip</h1>-->
-
-                        <!--<h2>Einzahlung für/Versement pour/Versamento per</h2>-->
+                        <!--Einzahlung für/Versement pour/Versamento per-->
 
                         <!--If we use the alternate ISR layout, displaying name
                         and location of the bank.-->
-                        <t t-if="invoice_bank_id">
+                        <t t-if="print_bank">
                             <div id="slip-for-bank">
                                 <p>
-                                    <t t-esc="invoice_bank_id.name"/><br />
-                                    <t t-esc="invoice_bank_id.zip"/>
-                                    <t t-esc="invoice_bank_id.city"/>
+                                    <t t-esc="invoice.partner_bank_id.bank_id.name"/><br />
+                                    <t t-esc="invoice.partner_bank_id.bank_id.zip"/>
+                                    <t t-esc="invoice.partner_bank_id.bank_id.city"/>
                                 </p>
                             </div>
-                            <!--<h2>Zugunsten von/En faveur de/A favore di</h2>-->
+                            <!--Zugunsten von/En faveur de/A favore di-->
                         </t>
 
                         <div id="slip-for-contact">
@@ -132,7 +129,7 @@
                         </div>
 
                         <div id="slip-bank">
-                            <!--<h2>Konto/Compte/Conto</h2>-->
+                            <!--Konto/Compte/Conto-->
                             <p id="slip-bank_ref" t-field="invoice.l10n_ch_isr_postal_formatted"/>
                         </div>
 
@@ -141,17 +138,17 @@
                         <p id="slip-amount_cents" t-esc="split_total_amount[1]"/>
 
                         <div id="slip-reference">
-                            <!--<h2>Referenz-Nr./N°de référence/N°di riferimento</h2>-->
+                            <!--Referenz-Nr./N°de référence/N°di riferimento-->
                             <p id="slip-reference_number" t-field="invoice.l10n_ch_isr_number_spaced"/>
                         </div>
 
                         <div id="slip-by">
-                            <!--<h2>Einbezahlt von/Versé par/Versato da</h2>-->
+                            <!--Einbezahlt von/Versé par/Versato da-->
                             <address id="slip-by_customer_address" t-field="invoice.partner_id" t-options='{"widget": "contact", "fields": ["address","name"], "no_marker": True}' />
                         </div>
 
                         <div id="slip-optical">
-                            <!--<h2>Optical reference</h2>-->
+                            <!--Optical reference-->
                             <span id="slip-optical_ref_line" t-field="invoice.l10n_ch_isr_optical_line"/>
                         </div>
                     </div>
diff --git a/addons/l10n_ch/static/src/less/report_isr.less b/addons/l10n_ch/static/src/less/report_isr.less
index 5c7916928ff..be366e54ddd 100644
--- a/addons/l10n_ch/static/src/less/report_isr.less
+++ b/addons/l10n_ch/static/src/less/report_isr.less
@@ -1,15 +1,33 @@
-body.o_in_iframe {
-    #l10n_ch_isr {
-        background: url(/l10n_ch/static/src/img/background_virgin_isr.png) bottom no-repeat;
-        background-size: 100%;
-
-        &.isr-print-bank {
-            background-image: url(/l10n_ch/static/src/img/background_virgin_isr_bank.png);
+body.l10n_ch_isr {
+    /*
+        all elements are positionned for A4 format (210 x 297mm) but the viewport
+        is bigger than this, hence we zoom the whole page to be bigger than the viewport
+        which will then be resized down by wkhtmltopdf to get back to an A4 format
+     */
+    zoom: 1.25;
+
+    &.o_in_iframe {
+        zoom: 1;
+
+        /* display dummy check bacground in html rendering to help see the end result */
+        #isr {
+            background: url(/l10n_ch/static/src/img/background_virgin_isr.png) bottom no-repeat;
+            background-size: 100%;
+
+            &.isr-print-bank {
+                background-image: url(/l10n_ch/static/src/img/background_virgin_isr_bank.png);
+            }
         }
     }
 }
 
-#l10n_ch_isr {
+/* content outside isr needs margins to not overlap header */
+body.l10n_ch_isr #content_outside_isr {
+    padding: 15px;
+    padding-top: 150px;
+}
+
+body.l10n_ch_isr #isr {
     height: 106mm;
     width: 210mm;
 
@@ -164,7 +182,12 @@ body.o_in_iframe {
             bottom: 4/6in;
 
             text-align: right;
-            font-height: 1/6in;
+
+            /* Letter spacing is set for OCRB of Tsukurimashou Font Family */
+            font-family: OCRB, Courier, monospace;
+            line-height: 0.1in;
+            font-size: 10pt;
+            letter-spacing: -0.3px;
         }
     }
 }