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;
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 -}}
|
||||||
|
|
Loading…
Reference in New Issue