Print improvements

pinaxcon/templates/registrasion/_invoice_details.html

@@ -25,13 +25,16 @@
 
 <p>This invoice has been issued as a result of an application to attend {% conference_name %}. All amounts are in New Zealand Dollars (NZD).</p>
 
-<table class="table table-striped">
+<table class="table table-striped my-4">
+  <thead>
     <tr>
       <th>Description</th>
       <th class="text-right">Quantity</th>
       <th class="text-right">Price/Unit</th>
       <th class="text-right">Total</th>
     </tr>
+  </thead>
+  <tbody>
     {% for line_item in invoice.lineitem_set.all %}
       <tr>
         <td>{{ line_item.description }}</td>
@@ -65,11 +68,12 @@
         <td class="text-right">${{ invoice.balance_due }}</td>
       </tr>
     {% endif %}
+  </tbody>
 </table>
 
 {% if invoice.paymentbase_set.all %}
-  <hr />
+  <div class="page-break"></div>
-  <h3>Payments received</h3>
+  <h3 class="pt-4">Payments received</h3>
   {% include "registrasion/payment_list.html" with payments=invoice.paymentbase_set.all %}
 {% endif %}
 

pinaxcon/templates/registrasion/payment_list.html

@@ -1,10 +1,13 @@
 {% if payments %}
 <table class="table table-striped">
+  <thead>
     <tr>
       <th>Payment time</th>
       <th>Reference</th>
       <th>Amount</th>
     </tr>
+  </thead>
+  <tbody>
     {% for payment in payments %}
       <tr>
         <td>{{payment.time}}</td>
@@ -12,5 +15,6 @@
         <td>{{payment.amount}}</td>
       </tr>
     {% endfor %}
+  </tbody>
 </table>
 {% endif %}

static/src/scss/app.scss

@@ -459,6 +459,49 @@ hr {
     .hidden-print {
         display: none !important
     }
+
+    .page-break {
+        page-break-after: always;
+    }
+
+    .jumbotron {
+        font-size: 8pt;
+        padding: 0;
+        background-color: white;
+        border: none;
+        color: #000;
+
+        h3 {
+            margin-top: 4rem;
+        }
+
+        h4 {
+            margin-top: 2rem;
+        }
+
+        table {
+            margin-top: 2rem;
+            border: none !important;
+
+            th, td {
+                padding: 0.75rem 0;
+                border: none;
+            }
+
+            thead th {
+                border-bottom: 1px solid black;
+            }
+
+            th[colspan="4"] {
+                display: none;
+
+            }
+        }
+    }
+
+    footer {
+        display: none !important;
+    }
 }
 
 .card-group.key-dates {