From 419ac3ed46165786e676d2414f93ff26117bf8c6 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Sat, 25 Feb 2023 03:16:20 +0100
Subject: [PATCH] Adjust invoice.css to work with WeasyPrint too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I am planning to use WeasyPrint to “generate PDF” from the same HTML
that the user view, but it seems that it does not support flex’s gap
and some other properties that i had to change to work in both user
agents.

I also moved the invoice’s “footer” inside the last product’s body
because i do not want the footer to be a “widow”.
---
 pkg/template.go                   |  3 ++
 web/static/invoice.css            | 24 +++++++-----
 web/template/invoices/view.gohtml | 64 ++++++++++++++++---------------
 3 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/pkg/template.go b/pkg/template.go
index ee5a862..5575d55 100644
--- a/pkg/template.go
+++ b/pkg/template.go
@@ -54,6 +54,9 @@ func mustRenderTemplate(wr io.Writer, r *http.Request, layout string, filename s
 			field.Attributes = append(field.Attributes, template.HTMLAttr(attr))
 			return field
 		},
+		"sub": func(y, x int) int {
+			return x - y
+		},
 		"deleteMethod": func() template.HTML {
 			return overrideMethodField(http.MethodDelete)
 		},
diff --git a/web/static/invoice.css b/web/static/invoice.css
index 1d0ad36..ac25a0b 100644
--- a/web/static/invoice.css
+++ b/web/static/invoice.css
@@ -1,11 +1,10 @@
 .invoice {
     display: flex;
-    gap: 2.5rem;
 }
 
 .invoice header {
     flex: 1;
-    min-width: 20rem;
+    min-width: 18rem;
     padding: 0 1rem 0 0;
     display: block;
     background: initial;
@@ -24,8 +23,16 @@
     display: flex;
     flex-direction: column;
     flex: 3;
-    gap: 5rem;
-    align-items: end;
+    padding: 0 0 0 2.5rem;
+    align-items: flex-end;
+}
+
+.invoice .invoicee, .invoice .invoicer {
+    min-width: 18rem;
+}
+
+.invoice table {
+    margin: 5rem 0;
 }
 
 .invoice th {
@@ -42,7 +49,7 @@
     text-align: right;
 }
 
-.invoice .notes, .invoice footer {
+.invoice .notes {
     white-space: pre;
     text-align: right;
 }
@@ -51,7 +58,7 @@
     vertical-align: top;
 }
 
-.invoice tbody, .invoice footer {
+.invoice tbody, .invoice .legal {
     page-break-inside: avoid;
 }
 
@@ -59,7 +66,6 @@
     background-color: initial;
 }
 
-
 .invoice tbody:not(:first-of-type) tr:first-child td, .invoice .tfoot th, .invoice .tfoot td {
     padding-top: 1em;
 }
@@ -72,8 +78,8 @@
     max-width: 20rem;
 }
 
-.invoice footer {
-    margin-top: 8rem;
+.invoice .legal {
+    margin-top: 16rem;
     font-size: 1.2rem;
 }
 
diff --git a/web/template/invoices/view.gohtml b/web/template/invoices/view.gohtml
index cb22192..f660d1e 100644
--- a/web/template/invoices/view.gohtml
+++ b/web/template/invoices/view.gohtml
@@ -25,6 +25,15 @@
                 {{ .Invoicer.Email }}<br>
                 {{ .Invoicer.Phone }}<br>
             </address>
+
+            <p class="legal">Oriol Carbonell Pujolàs és Responsable del Tractament de les seves dades d'acord
+                amb el RGPD i la LOPDGDDGDD, i les tracta per a mantenir una relació
+                mercantil/comercial amb vostè. Les conservarà mentre es mantingui aquesta relació
+                i no es comunicaran a tercers. Pot exercir els drets d'accés, rectificació, portabilitat,
+                supressió, limitació i oposició a Oriol Carbonell pUJOLÀS, amb domicili Carrer dels
+                Sastres 14, 17800 Olot o enviant un correu electrònic a info@visavis.cat. Per a
+                qualsevol reclamació pot acudir a agpd.es. Per a més informació pot consultar la
+                nostra política de privacitat a www.visavis.cat.</p>
         </header>
 
         <div>
@@ -44,9 +53,10 @@
                     <th class="numeric">{{( pgettext "Subtotal" "title" )}}</th>
                 </tr>
                 </thead>
-                {{ range $product := .Products -}}
+                {{ $lastIndex := len .Products | sub 1 }}
+                {{ range $index, $product := .Products -}}
+                    <tbody>
                     {{ if .Description }}
-                        <tbody>
                         <tr class="name">
                             <td colspan="4">{{ .Name }}</td>
                         </tr>
@@ -56,47 +66,39 @@
                             <td class="numeric">{{ .Quantity }}</td>
                             <td class="numeric">{{ .Total | formatPrice }}</td>
                         </tr>
-                        </tbody>
                     {{ else }}
-                        <tbody>
                         <tr class="name">
                             <td>{{ .Name }}</td>
                             <td class="numeric">{{ .Price | formatPrice }}</td>
                             <td class="numeric">{{ .Quantity }}</td>
                             <td class="numeric">{{ .Total | formatPrice }}</td>
                         </tr>
-                        </tbody>
                     {{- end }}
+                    {{ if (eq $index $lastIndex) }}
+                        <tr class="tfoot">
+                            <th scope="row" colspan="3">{{( pgettext "Subtotal" "title" )}}</th>
+                            <td class="numeric">{{ $.Subtotal | formatPrice }}</td>
+                        </tr>
+                        {{ range $tax := $.Taxes -}}
+                            <tr class="tfoot">
+                                <th scope="row" colspan="3">{{ index . 0 }}</th>
+                                <td class="numeric">{{ index . 1 | formatPrice }}</td>
+                            </tr>
+                        {{- end }}
+                        <tr class="tfoot">
+                            <th scope="row" colspan="3">{{( pgettext "Total" "title" )}}</th>
+                            <td class="numeric">{{ $.Total | formatPrice }}</td>
+                        </tr>
+                    {{ end }}
+                    </tbody>
                 {{- end }}
-                <tbody class="tfoot">
-                <tr>
-                    <th scope="row" colspan="3">{{( pgettext "Subtotal" "title" )}}</th>
-                    <td class="numeric">{{ .Subtotal | formatPrice }}</td>
-                </tr>
-                {{ range $tax := .Taxes -}}
-                    <tr>
-                        <th scope="row" colspan="3">{{ index . 0 }}</th>
-                        <td class="numeric">{{ index . 1 | formatPrice }}</td>
-                    </tr>
-                {{- end }}
-                <tr>
-                    <th scope="row" colspan="3">{{( pgettext "Total" "title" )}}</th>
-                    <td class="numeric">{{ .Total | formatPrice }}</td>
-                </tr>
-                </tbody>
+
             </table>
 
-            <div class="notes">{{ .Notes }}</div>
+            {{ if .Notes -}}
+                <p class="notes">{{ .Notes }}</p>
+            {{- end }}
 
-            <footer>Oriol Carbonell Pujolàs és Responsable del Tractament de les seves dades d'acord
-                amb el RGPD i la LOPDGDDGDD, i les tracta per a mantenir una relació
-                mercantil/comercial amb vostè. Les conservarà mentre es mantingui aquesta relació
-                i no es comunicaran a tercers. Pot exercir els drets d'accés, rectificació, portabilitat,
-                supressió, limitació i oposició a Oriol Carbonell pUJOLÀS, amb domicili Carrer dels
-                Sastres 14, 17800 Olot o enviant un correu electrònic a info@visavis.cat. Per a
-                qualsevol reclamació pot acudir a agpd.es. Per a més informació pot consultar la
-                nostra política de privacitat a www.visavis.cat.
-            </footer>
         </div>
     </article>
 {{- end}}