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:
parent
191401abe9
commit
419ac3ed46
|
|
@ -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)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 -}}
|
||||
{{ if .Description }}
|
||||
{{ $lastIndex := len .Products | sub 1 }}
|
||||
{{ range $index, $product := .Products -}}
|
||||
<tbody>
|
||||
{{ if .Description }}
|
||||
<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 }}
|
||||
{{- end }}
|
||||
<tbody class="tfoot">
|
||||
<tr>
|
||||
{{ if (eq $index $lastIndex) }}
|
||||
<tr class="tfoot">
|
||||
<th scope="row" colspan="3">{{( pgettext "Subtotal" "title" )}}</th>
|
||||
<td class="numeric">{{ .Subtotal | formatPrice }}</td>
|
||||
<td class="numeric">{{ $.Subtotal | formatPrice }}</td>
|
||||
</tr>
|
||||
{{ range $tax := .Taxes -}}
|
||||
<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>
|
||||
<tr class="tfoot">
|
||||
<th scope="row" colspan="3">{{( pgettext "Total" "title" )}}</th>
|
||||
<td class="numeric">{{ .Total | formatPrice }}</td>
|
||||
<td class="numeric">{{ $.Total | formatPrice }}</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
{{- end }}
|
||||
|
||||
</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}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue