Adapt the invoice design to Oriol’s
This commit is contained in:
parent
fffab62135
commit
843f7746cf
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 -}}
|
||||
|
|
Loading…
Reference in New Issue