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;
display: block;
background: initial;
border-right: 2px dashed lightgray;
border-right: 1px solid black;
}
.invoice h1 {
font-size: 1.6rem;
}
.invoice .invoicer {
margin-top: 20rem;
}
.invoice > div {
display: flex;
flex-direction: column;
flex: 3;
padding: 0 0 0 2.5rem;
align-items: flex-end;
}
.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 {
@ -42,7 +48,7 @@
.invoice thead th {
text-align: left;
border-bottom: 2px solid black;
border-bottom: 1px solid black;
}
.invoice .tfoot th, .invoice .numeric {
@ -79,13 +85,20 @@
}
.invoice .legal {
margin-top: 16rem;
font-size: 1.2rem;
text-align: justify;
}
@media screen {
.invoice .legal {
margin-top: 16rem;
}
}
@media print {
@page {
size: A4;
margin: 64px 48px;
}
*, *::before, *::after {
@ -126,7 +139,16 @@
display: none;
}
.invoice {
height: 100vh;
.invoice header {
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">
<article class="invoice">
<header>
<div>
<h1>{{ .Number | printf ( pgettext "Invoice %s" "title" )}}</h1>
<p class="date">{{( pgettext "Date" "title" )}} {{ .Date | formatDate }}</p>
</div>
<address class="invoicer">
{{ .Invoicer.Name }}<br>
@ -92,7 +94,6 @@
{{ end }}
</tbody>
{{- end }}
</table>
{{ if .Notes -}}