|
|
@@ -4,22 +4,54 @@
|
|
|
<title>Facture N°{{ invoice.number }}</title>
|
|
|
|
|
|
<style>
|
|
|
- @page {
|
|
|
- size: a4 portrait;
|
|
|
- @frame header_frame {
|
|
|
- -pdf-frame-content: header_content;
|
|
|
- left: 50pt; width: 512pt; top: 50pt; height: 70pt;
|
|
|
- }
|
|
|
- @frame content_frame {
|
|
|
- left: 50pt; width: 512pt; top: 120pt; height: 632pt;
|
|
|
- }
|
|
|
- @frame footer_frame {
|
|
|
- -pdf-frame-content: footer_content;
|
|
|
- left: 50pt; width: 512pt; top: 772pt; height: 30pt;
|
|
|
- }
|
|
|
- }
|
|
|
+ @page {
|
|
|
+ margin: 0; padding: 40pt;
|
|
|
+ }
|
|
|
+
|
|
|
+ header {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ header table {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ aside {
|
|
|
+ margin-top: 60pt;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 12pt;
|
|
|
+ }
|
|
|
+
|
|
|
+ header img {
|
|
|
+ height: 50pt;
|
|
|
+ }
|
|
|
+
|
|
|
+ header td {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ footer {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ footer img {
|
|
|
+ height: 20pt;
|
|
|
+ }
|
|
|
+ html {
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ *, *:before, *:after {
|
|
|
+ box-sizing: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
body {
|
|
|
- font-size: 9pt;
|
|
|
+ font-size: 9pt;
|
|
|
+ font-family: sans-serif;
|
|
|
}
|
|
|
#coordonnees_isp {
|
|
|
font-size:9pt;
|
|
|
@@ -27,17 +59,19 @@
|
|
|
#coordonnees_client {
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
-
|
|
|
+ table {
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
table#details {
|
|
|
- width:100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- th.cell {border:0px;}
|
|
|
+ th.cell {border:0px;}
|
|
|
.cell.result {border:0px; font-weight: bold}
|
|
|
.cell { padding:2pt; border:1px solid #DDD; }
|
|
|
- .cell.label { width:400pt;}
|
|
|
- .cell.quantity {width:50pt;}
|
|
|
- .cell.amount {width:50pt;}
|
|
|
- .cell.total {width:50pt;}
|
|
|
+ .cell.label { width: 73%;}
|
|
|
+ .cell.quantity,
|
|
|
+ .cell.quantity,
|
|
|
+ .cell.total {width: 9%;}
|
|
|
|
|
|
.period {color:#888;}
|
|
|
|
|
|
@@ -53,27 +87,16 @@
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div id="header_content">
|
|
|
- <table widht="100%">
|
|
|
- <tr>
|
|
|
+ <header>
|
|
|
+ <table>
|
|
|
+ <tr>
|
|
|
<td><img id="logo" src="{{ branding.logoURL }}" height="70" /></td>
|
|
|
<td><h1>Facture N°{{ invoice.number }}</h1>
|
|
|
Le {{ invoice.date }}</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
- </div>
|
|
|
- <div id="footer_content">
|
|
|
- <hr />
|
|
|
- <table widht="100%">
|
|
|
- <tr>
|
|
|
- <td width="50"><img id="logo" src="{{ branding.logoURL }}" height="20" /></td>
|
|
|
- <td>{{ branding.shortname|upper }}, association loi de 1901 à but non lucratif - SIRET : {{ branding.registeredoffice.siret }}</td>
|
|
|
- <td width="20"><pdf:pagenumber>
|
|
|
- /<pdf:pagecount>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
+ </header>
|
|
|
+ <aside>
|
|
|
<table>
|
|
|
<tr>
|
|
|
<td id="coordonnees_isp">
|
|
|
@@ -97,6 +120,7 @@
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
+ </aside>
|
|
|
|
|
|
<hr />
|
|
|
Facture N°{{ invoice.number }}
|
|
|
@@ -130,6 +154,17 @@
|
|
|
<div id="paiements">
|
|
|
{% include "billing/payment_howto.html" %}
|
|
|
</div>
|
|
|
-
|
|
|
+ <footer>
|
|
|
+ <hr />
|
|
|
+ <table>
|
|
|
+ <tr>
|
|
|
+ <td width="50"><img id="logo" src="{{ branding.logoURL }}" height="20" /></td>
|
|
|
+ <td>{{ branding.shortname|upper }}, association loi de 1901 à but non lucratif - SIRET : {{ branding.registeredoffice.siret }}</td>
|
|
|
+ <td width="20"><pdf:pagenumber>
|
|
|
+ /<pdf:pagecount>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </footer>
|
|
|
</body>
|
|
|
</html>
|
