msupply-foundation#6 - Improvement in visual

bijaySussol · May 22, 2022 · a54e298 · a54e298
1 parent 601bdee
commit a54e298
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 62 deletions.
diff --git a/picklist/footer.html b/picklist/footer.html
@@ -1,2 +1,3 @@
 <div style="font-size: 10px; padding-top: 8px; text-align: center; width: 100%;">
+</span>Page number: <span class="pageNumber"></span>
 </div>
diff --git a/picklist/header.html b/picklist/header.html
@@ -1,4 +1,20 @@
-<div style="font-size: 13px; padding-top: 15px; text-align: center; width: 100%;">
-  <span>{{ data.invoice.otherPartyName }}</span>
-</div>
-
+<div style="font-size: 10px; padding-top: 8px; text-align: center; width: 98%;">
+  <table class="header_image_section" style="width: 98%;height: 98%;"> 
+      <tr> 
+          <td style="padding-left: 8px;">
+              <img style='display:block; width:25%;' src="{% include "logo_msupply" %}"/>
+          </td> 
+          <td>
+              <span style="text-align: center;font-size: 7pt;font-weight: bold;font-family: Tahoma;">National Medical Store Nepal</span><br>
+              <span style="text-align: center;font-size: 6pt;font-family: Tahoma;">Kanibahal,Lagankhel Lalitpur, Kathmandu, Nepal</span><br>
+              <span style="text-align: center;font-size: 5pt;font-family: Tahoma;">Opposite NIMS College</span>
+          </td>
+          <td style="padding-left: 8px;">
+              <span class="invoice_number" 
+                  style="text-align: right;font-weight: bold;font-size: 7pt;float: right;margin-left: 20px;">
+                  Packing slip #: {{ data.invoice.invoiceNumber }}
+              </span>
+          </td>
+      </tr>     
+  </table>
+</div>
diff --git a/picklist/picklist.css b/picklist/picklist.css
@@ -3,46 +3,74 @@
         size: portrait
     }
 }
+.header_image_section, .header_supplied_section, .header_date_section, .body_section, .body_total_section {
+    margin-left: 8px;
+}
 
-.header_section_field {
-    text-align: right;
-    font-family: Verdana;
-    font-size: xx-small;
+.header_supplied_section {
+    width: 98%;
+    font-family: Tahoma;
+    font-size: 8pt;
+    border-bottom: 0.5px solid black;
+    padding-top: 1pt;
+} 
+
+.header_image_section {
+    width: 98%;
+    font-family: Tahoma;
+    font-size: 8pt;
+    border-bottom: 0.5px solid black;
+    padding-top: 8pt;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+} 
+
+.header_date_section {
+    width: 98%;
+    font-family: Tahoma;
+    font-size: 8pt;
+    border-bottom: 0.5px solid black;
+    padding-top: 1pt;
 }
-.header_section_invoice_field {
-    text-align: right;
-    font-family: Verdana;
-    font-size: small;
-    font-weight: bold;
 
+.header_section_field_right {
+    text-align: right;
+    font-family: Tahoma;
+    font-size: 8pt;
 }
-.header_section_field_supp_to {
+
+.header_section_field_left {
     text-align: left;
-    font-family: Verdana;
-    font-size: x-small;
-    font-weight: bold;
+    font-family: Tahoma;
+    font-size: 8pt;
 }
-.header_section_field_sup_add_label {
+
+.line_number, .quantity, .pack, .expiry{
+    text-align: right;
+    font-family: Tahoma;
+    font-size: 8pt;
+}
+
+.location, .item_name, .batch, .issued {
     text-align: left;
-    font-family: Verdana;
-    font-size: xx-small;
+    font-family: Tahoma;
+    font-size: 8pt
 }
 
-.header_section, .body_section {
-    max-width: 100%;
-    font-family: Verdana;
-    font-size: x-small;
-    width: 690px;
-} 
-.line_number, .quantity, .issued, .pack, .expiry {
-   font-size: x-small;
-   text-align: right;
-   font-family: Verdana;
+.body_section, .body_total_section {
+    width: 98%;
+    font-family: Tahoma;
 }
 
-.location, .item_name, .batch {
-    font-size: x-small;
-    text-align: left;
-    font-family: Verdana;
+.body_section tr.body_column_label th {
+    border-bottom: 0.5px solid black;
+}
+
+.body_value td {
+    border-bottom: 0.5px solid black;
 }
 
+hr {
+    width: 98%; 
+    margin-left: 8px; 
+    border: 0.1px solid black;
+}
diff --git a/picklist/picklist.html b/picklist/picklist.html
@@ -1,44 +1,33 @@
 <style>
     {% include "picklist.css" %}
 </style>
+<hr />
 
-<table class="header_section"> 
+<table class="header_supplied_section">
     <tr> 
-        <td class="header_section_field"></td> 
-        <th class="header_section_invoice_field" 
-            style="text-align: right;">Packing Slip: {{ data.invoice.invoiceNumber }}
-        </th>
+        <td class="header_section_field_left"></td>
+        <td id= "date" class="header_section_field_right"> Printed date: {{ now() | date(format="%m/%d/%Y") }}</td>
     </tr> 
 
     <tr> 
-        <td class="header_section_field"></td>
-        <td id= "date" class="header_section_field">Printed date:{{ now() | date(format="%m/%d/%Y") }}</td>
+        <td class="header_section_field_left">Supplied to:</td> 
+        <td class="header_section_field_right">Status: {{ data.invoice.status }}</td>
     </tr> 
 
     <tr> 
-        <td class="header_section_field"></td> 
-        <td class="header_section_field">Status: {{ data.invoice.status }}</td>
+        <td class="header_section_field_left">{{ data.invoice.otherPartyName }}</td> 
+        <td class="header_section_field_right">Entered date: {{ data.invoice.createdDatetime | date(format="%m/%d/%Y") }}</td>
     </tr> 
-
-    <tr> 
-        <td class="header_section_field_supp_to">Supplied to: {{ data.invoice.otherPartyName }}</td> 
-        <td class="header_section_field">Entered date: {{ data.invoice.createdDatetime | date(format="%m/%d/%Y") }}</td>
-    </tr> 
-
+
     <tr> 
-        <td class="header_section_field_sup_add_label">Kanibahal,Lagankhel</td> 
-        <td class="header_section_field">Our ref: {{ data.invoice.theirReference }}</td>
+        <td class="header_section_field_left">Lalitpur, Kathmandu, Nepal Opposite NIMS College</td> 
+        <td class="header_section_field_right">Confirmed Date: {{ data.invoice.createdDatetime | date(format="%m/%d/%Y") }}</td>
     </tr>
-
-    <tr> 
-        <td class="header_section_field_sup_add_label">Lalitpur, Kathmandu, Nepal Opposite NIMS College</td> 
-        <td class="header_section_field"></td>
-    </tr>
-
+
 </table>
 
-<table class="body_section">
-    <tr>
+<table class="body_section" cellpadding="2" cellspacing="0">
+    <tr class="body_column_label">
         <th class="line_number" style="width: 5%;">Line</th>
         <th class="location" style="width: 13%;">Location</th>
         <th class="item_name" style="width: 38%;">Item name</th>
@@ -49,15 +38,15 @@
         <th class="expiry" style="width: 10%;">Expiry</th>
     </tr>
     {% for line in data.invoice.lines.nodes -%}
-    <tr>
+    <tr class="body_value">
         <td class="line_number" style="width: 5%;">{{ loop.index }}</td>
         <td class="location" style="width: 13%;">{{ line.locationName }}</td>
-        <td class="item_name" style="width: 38%;">{{ line.itemName }}</td>
+        <td class="item_name" style="width: 40%;">{{ line.itemName }}</td>
         <td class="quantity" style="width: 8%;">{{ line.numberOfPacks }}</td>
         <td class="issued" style="width: 5%;">___________</td>
         <td class="pack" style="width: 8%;">{{ line.packSize }}</td>
         <td class="batch" style="width: 8%;">{{ line.batch }}</td>
-        <td class="expiry" style="width: 10%;">{{ line.batch }}</td>
+        <td class="expiry" style="width: 8%;">{{ line.expiryDate }}</td>
     </tr>
     {%- endfor %}
 </table>