diff --git a/web/static/invoice.css b/web/static/invoice.css index ac25a0b..f89b198 100644 --- a/web/static/invoice.css +++ b/web/static/invoice.css @@ -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); } } diff --git a/web/template/invoices/view.gohtml b/web/template/invoices/view.gohtml index f660d1e..fc99b47 100644 --- a/web/template/invoices/view.gohtml +++ b/web/template/invoices/view.gohtml @@ -14,8 +14,10 @@
-

{{ .Number | printf ( pgettext "Invoice %s" "title" )}}

-

{{( pgettext "Date" "title" )}} {{ .Date | formatDate }}

+
+

{{ .Number | printf ( pgettext "Invoice %s" "title" )}}

+

{{( pgettext "Date" "title" )}} {{ .Date | formatDate }}

+
{{ .Invoicer.Name }}
@@ -92,7 +94,6 @@ {{ end }} {{- end }} - {{ if .Notes -}}