Replaced CSS padding and margin with linebreaks

hasgeek · Apr 5, 2024 · 2612128 · 2612128
1 parent da7121a
commit 2612128
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/boxoffice/templates/layout_email.html.jinja2 b/boxoffice/templates/layout_email.html.jinja2
@@ -371,15 +371,13 @@
       .invoice-header > p {
         font-size: 18px;
         font-weight: 600;
-        margin-top: 32px;
         margin-bottom: 0 !important;
         font-variant: all-small-caps;
       }
       .invoice-label > p {
         margin-bottom: 4px !important;
       }
       .invoice-label > p:first-child {
-        margin-top: 16px;
         font-size: 14px;
         font-weight: 600;
         color: #4d576398;
@@ -400,33 +398,33 @@
       }
       .order-summary > th {
         font-size: 14px;
-        line-height: 24px;
+        line-height: 40px;
         font-variant: all-small-caps;
         font-weight: 600;
-        padding: 8px 0;
         border-bottom: 1px solid #656565;
       }
       .order-description {
         padding-bottom: 0;
       }
       .order-description > p:first-child {
         font-weight: 600;
-        margin-top: 16px;
       }
       .base-price {
-        padding-top: 16px;
         font-weight: 600;
       }
       .total-price > p {
         font-weight: 700;
         font-variant: all-small-caps;
         font-size: 21px !important;
       }
-      .receipt-title {
-        padding-bottom: 16px;
+      .receipt-title > h1 {
+        line-height: 52px;
+      }
+      .receipt-subtitle > p {
+        line-height: 36px;
       }
-      .receipt-subtitle {
-        padding-top: 8px;
+      .item-description-container {
+        border-bottom: 1px solid #1f2d3d;
       }
       .item-description > p {
         margin-top: 0;
@@ -439,6 +437,12 @@
         font-size: 14px;
         padding-bottom: 16px;
       }
+      .linebreak {
+        line-height: 16px;
+      }
+      .double_linebreak {
+        line-height: 24px;
+      }
     </style>
 
 

diff --git a/boxoffice/templates/macros_email.html.jinja2 b/boxoffice/templates/macros_email.html.jinja2
@@ -20,9 +20,9 @@
     </div>
 {% endmacro %}
 
-{% macro line_break() %}
+{% macro line_break(ln_break) %}
     <tr>
-        <td>
+    <td class={{ ln_break }}>
             <br>
         </td>
     </tr>

diff --git a/boxoffice/templates/payment_receipt.html.jinja2 b/boxoffice/templates/payment_receipt.html.jinja2
@@ -1,7 +1,6 @@
 {%- extends "layout_email.html.jinja2" -%}
 {%- from "macros_email.html.jinja2" import cta_button, line_break -%}
 {%- block content -%}
-  <br/>
   <tr>
     <td class ="receipt-title" colspan="4">
       <h1>
@@ -23,6 +22,8 @@
     </td>
   </tr>
 
+  {{ line_break(gettext('double_linebreak')) }}
+
   <tr align="left">
     <td class="invoice-header" colspan="4">
       <p>{{ org.details.get('name') }}</p>
@@ -37,6 +38,7 @@
       <![endif]-->
         <div style="display:inline-block;vertical-align:top;width: auto; margin-right: 68px">
           <table>
+            {{ line_break(gettext('linebreak')) }}
             {%- if org.details %}
             <tr align="left">
               <td class="invoice-label">
@@ -46,6 +48,7 @@
                 <p>{{ org.details.get('address')|safe }}<p>
               </td>
             </tr>
+            {{ line_break(gettext('linebreak')) }}
             <tr>
               <td class="invoice-label">
                 <p>
@@ -63,6 +66,7 @@
         <div style="display:inline-block;vertical-align:top;width: auto">
           <table>
             {%- if org.details %}
+            {{ line_break(gettext('linebreak')) }}
             <tr>
               <td class="invoice-label">
                 <p>
@@ -72,6 +76,7 @@
               </td>
             </tr>
             {%- endif %}
+            {{ line_break(gettext('linebreak')) }}
             <tr>
               <td class="invoice-label">
                 <p>
@@ -90,6 +95,8 @@
     </td>
   </tr>
 
+  {{ line_break(gettext('double_linebreak')) }}
+
   <tr align="left">
     <td class="invoice-header" colspan="4">
       <p>
@@ -106,6 +113,7 @@
       <![endif]-->
         <div style="display:inline-block;vertical-align:top;width: 49.5%">
           <table>
+            {{ line_break(gettext('linebreak')) }}
             <tr align="left">
               <td class="invoice-label">
                 <p>
@@ -114,6 +122,7 @@
                 <p>{{ order.buyer_fullname }}</p>
               </td>
             </tr>
+            {{ line_break(gettext('linebreak')) }}
             <tr>
               <td class="invoice-label">
                 <p>
@@ -130,13 +139,15 @@
         <div style="display:inline-block;vertical-align:top;width: auto">
           <table>
             <tr>
+              {{ line_break(gettext('linebreak')) }}
               <td class="invoice-label">
                 <p>
                   {%- trans %}Paid on{% endtrans -%}
                 </p>
                 <p>{{ order.paid_at | longdate }}</p>
               </td>
             </tr>
+            {{ line_break(gettext('linebreak')) }}
             <tr>
               <td class="invoice-label">
                 <p>
@@ -155,13 +166,16 @@
     </td>
   </tr>
 
+  {{ line_break(gettext('linebreak')) }}
+
   <tr align="left">
     <td class="invoice-header" colspan="4">
       <p>
         {%- trans %}Order Summary{% endtrans -%}
       </p>
     </td>
   </tr>
+  {{ line_break(gettext('linebreak')) }}
   <tr align="left" class="order-summary">
     <th colspan="3">
       {%- trans %}Item{% endtrans -%}
@@ -170,6 +184,7 @@
       {%- trans %}Price{% endtrans -%}
     </th>
   </tr>
+  {{ line_break(gettext('linebreak')) }}
   {% for line_item in line_items -%}
     <tr>
       <td colspan="3" class="order-description">
@@ -179,12 +194,10 @@
         <p>{{ currency_symbol }} {{ line_item.base_amount }}</p>
       </td>
     </tr>
-    <tr>
+    <tr class="item-description-container">
       <td class="item-description" colspan="3">{{ line_item.ticket.description| safe}}</td>
     </tr>
-    <tr>
-      <td colspan="4"><hr/><br/></td>
-    </tr>
+    {{ line_break(gettext('linebreak')) }}
     <tr align="right">
       <td colspan="4">
         <table style="width:100%">
@@ -224,6 +237,7 @@
     {%- endfor %}
 
     {%- if order.refunded_amount %}
+    {{ line_break(gettext('double_linebreak')) }}
       <tr align="left">
         <td class="invoice-header" colspan="4">
           <p>
@@ -309,22 +323,22 @@
           </tr>
       </table>
     {%- endif %}
-    {{ line_break() }}
+    {{ line_break(gettext('linebreak')) }}
     <tr>
       <td colspan="4">
         <p>
           {%- trans %}To access the benefits of this ticket please ensure you are logged in to your Hasgeek account with this same email address.{% endtrans -%}
         </p>
       </td>
     </tr>
-  {{ line_break() }}
+  {{ line_break(gettext('linebreak')) }}
   <tr>
     <td colspan="4">
       {{ cta_button('{base_url}/order/{access_token}/ticket'.format(base_url=base_url, access_token=order.access_token), gettext("Assign ticket"), gettext("primary") )}}
       {{ cta_button('{base_url}/order/{access_token}/invoice'.format(base_url=base_url, access_token=order.access_token), gettext("GST invoice"), gettext("dark") )}}
     </td>
   </tr>
-  {{ line_break() }}
+  {{ line_break(gettext('linebreak')) }}
   <tr colspan="4">
     <td colspan="4">
       <div align="left" class="policy">