Adjust invoice.css to work with WeasyPrint too

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

@@ -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)
 		},

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;
+    padding: 0 0 0 2.5rem;
-    align-items: end;
+    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 {
+.invoice .legal {
-    margin-top: 8rem;
+    margin-top: 16rem;
     font-size: 1.2rem;
 }
 

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}}