feat(cb2-10900): Correcting formatting and dynamic footer

dvsa · Feb 15, 2024 · 24b6aa2 · 24b6aa2
1 parent 60c53e8
commit 24b6aa2
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 51 deletions.
diff --git a/src/main/resources/assets/stylesheets/iva-30.hbs b/src/main/resources/assets/stylesheets/iva-30.hbs
@@ -1,10 +1,13 @@
 
 @page {
+counter-increment: page;
+counter-reset: page 1;
 size: A4 portrait;
 margin: 20px 24px 0 24px;
-padding: 0;
+@bottom-center {
+content: element(footer);
+}
 }
-
 p { margin:5px; }
 
 p,
@@ -26,31 +29,33 @@ page-break-inside: avoid;
 font-size: 90%;
 }
 
+.separate-page{
+page-break-after: always;
+}
+
 *,
 :after,
 :before {
 box-sizing: border-box;
 line-height: 1;
 }
 
-.separate-page {
-page-break-after: always;
-}
 .section-border {
 border-style: solid;
-border-color: black grey grey grey;
+border-color: black black black black;
 margin-bottom: 5px;
 }
 
 .section-title-border {
 border-style: solid;
 border-width: 2px;
 border-color: black;
-background-color: grey;
+background-color: #d0d0d0;
 font-weight:bold;
 text-align: center;
 margin-top: -2px;
-width: 100%;
+margin-left: -1px;
+width: 100.4%;
 }
 
 .section-title-border h1 {
@@ -77,7 +82,7 @@ width: 50%;
 }
 
 .footer {
-width: 100%;
+position: running(footer);
 }
 
 .footer-left {
@@ -90,6 +95,16 @@ display: inline-block;
 text-align: center;
 }
 
+.footer-current-page-number:before{
+content: counter(page);
+font-weight: bold;
+}
+
+.footer-total-page-count:before{
+content: counter(pages);
+font-weight: bold;
+}
+
 .footer-right {
 text-align: right;
 display: inline-block;
@@ -146,14 +161,15 @@ background-color: white;
 }
 
 .header-serial-no {
-width: fit-content;
+width: 250px;
 border-style: solid;
 border-width: 1px;
 margin-bottom: 1px;
 }
 
 .header-serial-no-title {
 padding: 2px;
+margin-bottom: 0px;
 }
 
 .header-serial-no-value {
@@ -170,24 +186,33 @@ padding-left: 1em;
 padding-right: 1em;
 padding-top: 2em;
 padding-bottom: 2em;
+margin-top: 0px;
 }
 
-.vehicle-detail-table {
+.table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 1em;
+table-layout: auto;
 }
 
-.inspector-detail-table {
-width: 100%;
-border-collapse: collapse;
+.vd-table-row-cell {
+border-style: solid;
+border-width: 1px;
+width: 50%;
 }
 
 .table-row-cell {
 border-style: solid;
 border-width: 1px;
+width: 50%;
 }
 
-#data-prot-section{
-margin-top: 5px;
+.no-border-cell{
+border: none;
+}
+
+#appointment-text{
+text-align: center;
+font-size: 85%;
 }
diff --git a/src/main/resources/views/CommercialVehicles/IVA30.hbs b/src/main/resources/views/CommercialVehicles/IVA30.hbs
@@ -2,12 +2,22 @@
 <html>
 <head>
     <title>IVA30</title>
-    <style type="text/css" media="print, screen">
-            {{~> assets/stylesheets/iva-30 this}}
-    </style>
+    <!-- <style type="text/css" media="print, screen">
+        {{~> assets/stylesheets/iva-30 this}}
+    </style> -->
+    <link rel="stylesheet" href = "style.css">
 </head>
 
 <body>
+
+<div class="footer">
+    <p class="footer-left"> <b class="bold-title">IVA30VTA (DVSA0842) </b> </p>
+    <span class="footer-current-page-number"></span>
+    <span class="footer__bottom-page-counter-text"><b>of</b></span>
+    <span class="footer-total-page-count"></span>
+    <p class="footer-right"> <b>Version 1.0 Apr 2024</b> </p>
+</div>
+
 <div class="separate-page">
     <!-- Header Section -->
     <div class="page-header">
@@ -20,7 +30,7 @@
             <div class="header-pagination"> Page 1 of 2</div>
         </div>
         <div class="header-right">
-            <img src="{{root}}*/assets/images/dvsa-crest-small.png" alt="DVSA" width="110"/>
+            <img src="{{root}}/assets/images/dvsa_crest.png" alt="DVSA" width="110"/>
         </div>
     </div>
     <div class="section-title-border">
@@ -29,27 +39,27 @@
         <p><b>The Road Vehicles (Approval) Regulations 2020</b></p>
     </div>
 
-    <p> AN APPOINTMENT FOR RE-EXAMINATION <b>CANNOT</b> BE MADE ON THE DAY ON WHICH THIS EXAMINATION WAS CARRIED OUT
+    <p id = "appointment-text"> AN APPOINTMENT FOR RE-EXAMINATION <b>CANNOT</b> BE MADE ON THE DAY ON WHICH THIS EXAMINATION WAS CARRIED OUT
         PLEASE CONTACT <b> (0300) 200 1188 </b> TO MAKE AN APPOINTMENT QUOTING YOUR TAS REFERENCE NUMBER </p>
 
     <!-- put details table here -->
-    <table class="vehicle-detail-table">
+    <table class="table">
         <thead>
-            <th scope="row" colspan="2" class="section-title-border">
-                <h1> VEHICLE DETAILS </h1>
-            </th>
+        <th scope="row" colspan="2" class="section-title-border">
+            <h1> VEHICLE DETAILS </h1>
+        </th>
         </thead>
-        <tr class="table-row-cell">
-            <td class="table-row-cell"><b>Vehicle/Trailer NR No: </b> <!--Put data here --> </td>
-            <td class="table-row-cell"><b>Test Category: </b> <!--Put data here --> </td>
+        <tr class="vd-table-row-cell">
+            <td class="vd-table-row-cell"><b>Vehicle/Trailer NR No: </b> <!--Put data here --> </td>
+            <td class="vd-table-row-cell"><b>Test Category: </b> <!--Put data here --> </td>
         </tr>
-        <tr class="table-row-cell">
-            <td class="table-row-cell"><b>Make/Model: </b> <!--Put data here --> </td>
-            <td class="table-row-cell"><b>VIN/Chassis No: </b> <!--Put data here --> </td>
+        <tr class="vd-table-row-cell">
+            <td class="vd-table-row-cell"><b>Make/Model: </b> <!--Put data here --> </td>
+            <td class="vd-table-row-cell"><b>VIN/Chassis No: </b> <!--Put data here --> </td>
         </tr>
-        <tr class="table-row-cell">
-            <td class="table-row-cell"> <b>Body Type: </b> <!--Put data here --> </td>
-            <td></td>
+        <tr class="vd-table-row-cell">
+            <td class="vd-table-row-cell"> <b>Body Type: </b> <!--Put data here --> </td>
+            <td class = "no-border-cell"></td>
         </tr>
     </table>
 
@@ -71,7 +81,7 @@
         (Approval) Regulations 2020 </p>
 
     <!-- Date/name table here -->
-    <table class="inspector-detail-table">
+    <table class="table">
         <tr>
             <td></td>
             <td class="table-row-cell"> <b>Reapplication Required By: </b> <!--Put data here --> </td>
@@ -94,7 +104,7 @@
 
 
     <!-- Data Protection Section -->
-    <div class="section-border" id = "data-prot-section">
+    <div class="section-border">
         <div class="section-title-border">
             <h1> DATA PROTECTION STATEMENT 2019 </h1>
         </div>
@@ -105,15 +115,9 @@
                 investigation or to prevent fraud. Find out more at <a href="www.gov.uk/dvsa/privacy">www.gov.uk/dvsa/privacy</a></p>
         </div>
     </div>
-
-    <!-- footer -->
-    <div class="footer">
-        <p class="footer-left"> <b class="bold-title">IVA30VTA (DVSA0842) </b> </p>
-        <p class="footer-mid"> <b> 1 of 2 </b> </p>
-        <p class="footer-right"> <b>Version 1.0 Oct 2023</b> </p>
-    </div>
 </div>
 
+
 <div class="separate-page">
     <!-- first box -->
     <div class="section-border">
@@ -213,7 +217,6 @@
             <h1>YOUR RIGHT TO APPEAL</h1>
         </div>
         <div class="section-text-wrapper">
-
             <p>If you do not agree with the refusal to issue an Individual Approval Certificate, you may appeal. If you
                 wish to appeal against all or any of the grounds for refusal you must complete form IVA17 which is
                 available from the test location or from the gov.uk website <strong>www.gov.uk/vehicleapproval</strong>. The form, together
@@ -224,13 +227,6 @@
                 test as this may affect the outcome of the appeal.</p>
         </div>
     </div>
-
-    <!-- footer -->
-    <div class="footer">
-        <p class="footer-left"> <b class="bold-title">IVA30VTA (DVSA0842) </b> </p>
-        <p class="footer-right"> <b>Version 1.0 Oct 2023</b> </p>
-    </div>
 </div>
-
 </body>
 </html>