Adapt the invoice design to Oriol’s

This commit is contained in:
jordi fita mas 2023-02-25 13:48:57 +01:00
parent fffab62135
commit 843f7746cf
2 changed files with 39 additions and 16 deletions

View File

@ -8,27 +8,33 @@
padding: 0 1rem 0 0; padding: 0 1rem 0 0;
display: block; display: block;
background: initial; background: initial;
border-right: 2px dashed lightgray; border-right: 1px solid black;
} }
.invoice h1 { .invoice h1 {
font-size: 1.6rem; font-size: 1.6rem;
} }
.invoice .invoicer {
margin-top: 20rem;
}
.invoice > div { .invoice > div {
display: flex;
flex-direction: column;
flex: 3; flex: 3;
padding: 0 0 0 2.5rem; padding: 0 0 0 2.5rem;
align-items: flex-end;
} }
.invoice .invoicee, .invoice .invoicer { .invoice .invoicee, .invoice .invoicer {
min-width: 18rem; font-style: normal;
}
.invoice header > div {
margin-top: 2em;
}
.invoice .invoicer {
margin-top: 9rem;
}
.invoice .invoicee {
margin-top: 1em;
text-align: right;
} }
.invoice table { .invoice table {
@ -42,7 +48,7 @@
.invoice thead th { .invoice thead th {
text-align: left; text-align: left;
border-bottom: 2px solid black; border-bottom: 1px solid black;
} }
.invoice .tfoot th, .invoice .numeric { .invoice .tfoot th, .invoice .numeric {
@ -79,13 +85,20 @@
} }
.invoice .legal { .invoice .legal {
margin-top: 16rem;
font-size: 1.2rem; font-size: 1.2rem;
text-align: justify;
}
@media screen {
.invoice .legal {
margin-top: 16rem;
}
} }
@media print { @media print {
@page { @page {
size: A4; size: A4;
margin: 64px 48px;
} }
*, *::before, *::after { *, *::before, *::after {
@ -126,7 +139,16 @@
display: none; display: none;
} }
.invoice { .invoice header {
height: 100vh; height: 260mm;
}
.invoice .legal {
position: absolute;
width: 40em;
left: 0;
top: 0;
transform-origin: top left;
transform: translateY(260mm) rotate(-90deg);
} }
} }

View File

@ -14,8 +14,10 @@
<link rel="stylesheet" type="text/css" href="/static/invoice.css"> <link rel="stylesheet" type="text/css" href="/static/invoice.css">
<article class="invoice"> <article class="invoice">
<header> <header>
<div>
<h1>{{ .Number | printf ( pgettext "Invoice %s" "title" )}}</h1> <h1>{{ .Number | printf ( pgettext "Invoice %s" "title" )}}</h1>
<p class="date">{{( pgettext "Date" "title" )}} {{ .Date | formatDate }}</p> <p class="date">{{( pgettext "Date" "title" )}} {{ .Date | formatDate }}</p>
</div>
<address class="invoicer"> <address class="invoicer">
{{ .Invoicer.Name }}<br> {{ .Invoicer.Name }}<br>
@ -92,7 +94,6 @@
{{ end }} {{ end }}
</tbody> </tbody>
{{- end }} {{- end }}
</table> </table>
{{ if .Notes -}} {{ if .Notes -}}