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”.
This commit is contained in:
jordi fita mas 2023-02-25 03:16:20 +01:00
parent 191401abe9
commit 419ac3ed46
3 changed files with 51 additions and 40 deletions

View File

@ -54,6 +54,9 @@ func mustRenderTemplate(wr io.Writer, r *http.Request, layout string, filename s
field.Attributes = append(field.Attributes, template.HTMLAttr(attr)) field.Attributes = append(field.Attributes, template.HTMLAttr(attr))
return field return field
}, },
"sub": func(y, x int) int {
return x - y
},
"deleteMethod": func() template.HTML { "deleteMethod": func() template.HTML {
return overrideMethodField(http.MethodDelete) return overrideMethodField(http.MethodDelete)
}, },

View File

@ -1,11 +1,10 @@
.invoice { .invoice {
display: flex; display: flex;
gap: 2.5rem;
} }
.invoice header { .invoice header {
flex: 1; flex: 1;
min-width: 20rem; min-width: 18rem;
padding: 0 1rem 0 0; padding: 0 1rem 0 0;
display: block; display: block;
background: initial; background: initial;
@ -24,8 +23,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 3; 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 { .invoice th {
@ -42,7 +49,7 @@
text-align: right; text-align: right;
} }
.invoice .notes, .invoice footer { .invoice .notes {
white-space: pre; white-space: pre;
text-align: right; text-align: right;
} }
@ -51,7 +58,7 @@
vertical-align: top; vertical-align: top;
} }
.invoice tbody, .invoice footer { .invoice tbody, .invoice .legal {
page-break-inside: avoid; page-break-inside: avoid;
} }
@ -59,7 +66,6 @@
background-color: initial; background-color: initial;
} }
.invoice tbody:not(:first-of-type) tr:first-child td, .invoice .tfoot th, .invoice .tfoot td { .invoice tbody:not(:first-of-type) tr:first-child td, .invoice .tfoot th, .invoice .tfoot td {
padding-top: 1em; padding-top: 1em;
} }
@ -72,8 +78,8 @@
max-width: 20rem; max-width: 20rem;
} }
.invoice footer { .invoice .legal {
margin-top: 8rem; margin-top: 16rem;
font-size: 1.2rem; font-size: 1.2rem;
} }

View File

@ -25,6 +25,15 @@
{{ .Invoicer.Email }}<br> {{ .Invoicer.Email }}<br>
{{ .Invoicer.Phone }}<br> {{ .Invoicer.Phone }}<br>
</address> </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> </header>
<div> <div>
@ -44,9 +53,10 @@
<th class="numeric">{{( pgettext "Subtotal" "title" )}}</th> <th class="numeric">{{( pgettext "Subtotal" "title" )}}</th>
</tr> </tr>
</thead> </thead>
{{ range $product := .Products -}} {{ $lastIndex := len .Products | sub 1 }}
{{ if .Description }} {{ range $index, $product := .Products -}}
<tbody> <tbody>
{{ if .Description }}
<tr class="name"> <tr class="name">
<td colspan="4">{{ .Name }}</td> <td colspan="4">{{ .Name }}</td>
</tr> </tr>
@ -56,47 +66,39 @@
<td class="numeric">{{ .Quantity }}</td> <td class="numeric">{{ .Quantity }}</td>
<td class="numeric">{{ .Total | formatPrice }}</td> <td class="numeric">{{ .Total | formatPrice }}</td>
</tr> </tr>
</tbody>
{{ else }} {{ else }}
<tbody>
<tr class="name"> <tr class="name">
<td>{{ .Name }}</td> <td>{{ .Name }}</td>
<td class="numeric">{{ .Price | formatPrice }}</td> <td class="numeric">{{ .Price | formatPrice }}</td>
<td class="numeric">{{ .Quantity }}</td> <td class="numeric">{{ .Quantity }}</td>
<td class="numeric">{{ .Total | formatPrice }}</td> <td class="numeric">{{ .Total | formatPrice }}</td>
</tr> </tr>
</tbody>
{{- end }} {{- end }}
{{- end }} {{ if (eq $index $lastIndex) }}
<tbody class="tfoot"> <tr class="tfoot">
<tr>
<th scope="row" colspan="3">{{( pgettext "Subtotal" "title" )}}</th> <th scope="row" colspan="3">{{( pgettext "Subtotal" "title" )}}</th>
<td class="numeric">{{ .Subtotal | formatPrice }}</td> <td class="numeric">{{ $.Subtotal | formatPrice }}</td>
</tr> </tr>
{{ range $tax := .Taxes -}} {{ range $tax := $.Taxes -}}
<tr> <tr class="tfoot">
<th scope="row" colspan="3">{{ index . 0 }}</th> <th scope="row" colspan="3">{{ index . 0 }}</th>
<td class="numeric">{{ index . 1 | formatPrice }}</td> <td class="numeric">{{ index . 1 | formatPrice }}</td>
</tr> </tr>
{{- end }} {{- end }}
<tr> <tr class="tfoot">
<th scope="row" colspan="3">{{( pgettext "Total" "title" )}}</th> <th scope="row" colspan="3">{{( pgettext "Total" "title" )}}</th>
<td class="numeric">{{ .Total | formatPrice }}</td> <td class="numeric">{{ $.Total | formatPrice }}</td>
</tr> </tr>
{{ end }}
</tbody> </tbody>
{{- end }}
</table> </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> </div>
</article> </article>
{{- end}} {{- end}}