From ba4144979a290cff8ca152eb7e2931b8053cfda5 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 13 Apr 2018 15:14:52 -0400
Subject: [PATCH] Updating the Billing account form

Removing the table and using css for the billing form.
---
 views/admin/billing/editAccount.html | 157 ++++++++++++++-------------
 1 file changed, 83 insertions(+), 74 deletions(-)

diff --git a/views/admin/billing/editAccount.html b/views/admin/billing/editAccount.html
index f766b66..ad5f3ea 100644
--- a/views/admin/billing/editAccount.html
+++ b/views/admin/billing/editAccount.html
@@ -10,12 +10,14 @@
 {if $accountInsertError}<span class="glm-notice glm-flash-updated">Account Insert Error</span>{/if}
 {if $accountAdded}<span class="glm-notice glm-flash-updated">Account Added</span>{/if}
 
-<form action="{$thisUrl}?page=glm-members-admin-menu-member" method="post">
-    <input type="hidden" name="page" value="glm-members-admin-menu-member" />
-    <input type="hidden" name="glm_action" value="billing" />
-    <input type="hidden" name="member" value="{$memberID}" />
-    <input type="hidden" name="ref_dest" value="{$memberID}" />
-    <input type="hidden" name="option" value="account" />
+<div class="glm-billing-form">
+
+    <form action="{$thisUrl}?page=glm-members-admin-menu-member" method="post">
+        <input type="hidden" name="page" value="glm-members-admin-menu-member" />
+        <input type="hidden" name="glm_action" value="billing" />
+        <input type="hidden" name="member" value="{$memberID}" />
+        <input type="hidden" name="ref_dest" value="{$memberID}" />
+        <input type="hidden" name="option" value="account" />
     {if $lockedToMember}
         <input type="hidden" name="anniversary_date" value="{$account.fieldData.anniversary_date.date}" />
         <input type="hidden" name="renewal_date" value="{$account.fieldData.renewal_date.date}" />
@@ -25,85 +27,92 @@
         <input type="hidden" name="id" value="{$accountID}">
     {/if}
 
-    <table class="glm-admin-table">
+    <fieldset>
+        <legend>Account Information</legend>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.ref_name} class="glm-required"{/if}>Name</th>
-            <td {if $account.fieldFail.ref_name}class="glm-form-bad-input" data-tabid="glm-name"{/if}>
+
+        <div class="glm-billing-field">
+            <div class="glm-billing-label{if $account.fieldRequired.ref_name} glm-required{/if}">Name</div>
+            <div class="glm-billing-input{if $account.fieldFail.ref_name} glm-form-bad-input{/if}" data-tabid="glm-name">
                 <input type="text" name="ref_name" value="{$account.fieldData.ref_name}" class="glm-form-text-input-medium">
             {if $account.fieldFail.ref_name}<p>{$account.fieldFail.ref_name}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
     {if !$lockedToMember}
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.anniversary_date} class="glm-required"{/if}>Anniversary Date</th>
-            <td {if $account.fieldFail.anniversary_date}class="glm-form-bad-input" data-tabid="glm-anniversary-date"{/if}>
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label{if $account.fieldRequired.anniversary_date} glm-required{/if}">Anniversary Date</div>
+            <div class="glm-billing-input{if $account.fieldFail.anniversary_date} glm-form-bad-input{/if}" data-tabid="glm-anniversary-date">
                 <input type="text" name="anniversary_date" value="{$account.fieldData.anniversary_date.date}" class="glm-form-text-input-medium">
             {if $account.fieldFail.anniversary_date}<p>{$account.fieldFail.anniversary_date}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.renewal_date} class="glm-required"{/if}>Renewal Date</th>
-            <td {if $account.fieldFail.renewal_date}class="glm-form-bad-input" data-tabid="glm-renewal-date"{/if}>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label{if $account.fieldRequired.renewal_date} glm-required{/if}">Renewal Date</div>
+            <div class="glm-billing-input{if $account.fieldFail.renewal_date} glm-form-bad-input{/if}" data-tabid="glm-renewal-date">
                 <input type="text" name="renewal_date" value="{$account.fieldData.renewal_date.date}" class="glm-form-text-input-medium">
             {if $account.fieldFail.renewal_date}<p>{$account.fieldFail.renewal_date}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
     {/if}
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.email} class="glm-required"{/if}>Billing Email</th>
-            <td {if $account.fieldFail.email}class="glm-form-bad-input" data-tabid="glm-email"{/if}>
+    </fieldset>
+
+    <fieldset>
+        <legend>Billing Information</legend>
+
+        <div class="glm-billing-field">
+            <div class="glm-billing-label{if $account.fieldRequired.email} glm-required{/if}">Billing Email</div>
+            <div class="glm-billing-input{if $account.fieldFail.email} glm-form-bad-input{/if}" data-tabid="glm-email">
                 <input type="text" name="email" value="{$account.fieldData.email}" class="glm-form-text-input-medium">
             {if $account.fieldFail.email}<p>{$account.fieldFail.email}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_fname} class="glm-required"{/if}>Billing First Name</th>
-            <td {if $account.fieldFail.billing_fname}class="glm-form-bad-input" data-tabid="glm-billing-fname"{/if}>
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_fname} glm-required{/if}">Billing First Name</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_fname} glm-form-bad-input{/if}" data-tabid="glm-billing-fname">
                 <input type="text" name="billing_fname" value="{$account.fieldData.billing_fname}" class="glm-form-text-input-medium">
             {if $account.fieldFail.billing_fname}<p>{$account.fieldFail.billing_fname}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_lname} class="glm-required"{/if}>Billing Last Name</th>
-            <td {if $account.fieldFail.billing_lname}class="glm-form-bad-input" data-tabid="glm-billing-lname"{/if}>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_lname} glm-required{/if}">Billing Last Name</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_lname} glm-form-bad-input{/if}" data-tabid="glm-billing-lname">
                 <input type="text" name="billing_lname" value="{$account.fieldData.billing_lname}" class="glm-form-text-input-medium">
             {if $account.fieldFail.billing_lname}<p>{$account.fieldFail.billing_lname}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_addr1} class="glm-required"{/if}>Billing Address 1</th>
-            <td {if $account.fieldFail.billing_addr1}class="glm-form-bad-input" data-tabid="glm-billing-addr1"{/if}>
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_addr1} glm-required{/if}">Billing Address 1</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_addr1} glm-form-bad-input{/if}" data-tabid="glm-billing-addr1">
                 <input type="text" name="billing_addr1" value="{$account.fieldData.billing_addr1}" class="glm-form-text-input-medium">
             {if $account.fieldFail.billing_addr1}<p>{$account.fieldFail.billing_addr1}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_addr2} class="glm-required"{/if}>Billing Address2</th>
-            <td {if $account.fieldFail.billing_addr2}class="glm-form-bad-input" data-tabid="glm-billing-addr2"{/if}>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_addr2} glm-required{/if}">Billing Address2</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_addr2} glm-form-bad-input{/if}" data-tabid="glm-billing-addr2">
                 <input type="text" name="billing_addr2" value="{$account.fieldData.billing_addr2}" class="glm-form-text-input-medium">
             {if $account.fieldFail.billing_addr2}<p>{$account.fieldFail.billing_addr2}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_city} class="glm-required"{/if}>Billing City</th>
-            <td {if $account.fieldFail.billing_city}class="glm-form-bad-input" data-tabid="glm-billing-city"{/if}>
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_city} glm-required{/if}">Billing City</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_city} glm-form-bad-input{/if}" data-tabid="glm-billing-city">
                 <input type="text" name="billing_city" value="{$account.fieldData.billing_city}" class="glm-form-text-input-medium">
             {if $account.fieldFail.billing_city}<p>{$account.fieldFail.billing_city}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_state} class="glm-required"{/if}>Billing State</th>
-            <td {if $account.fieldFail.billing_state}class="glm-form-bad-input" data-tabid="glm-billing-state"{/if}>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_state} glm-required{/if}">Billing State</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_state} glm-form-bad-input{/if}" data-tabid="glm-billing-state">
                 <select name="billing_state">
                     <option value=""></option>
                     {foreach $account.fieldData.billing_state.list as $s}
@@ -113,34 +122,34 @@
                     {/foreach}
                 </select>
             {if $account.fieldFail.billing_state}<p>{$account.fieldFail.billing_state}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_zip} class="glm-required"{/if}>Billing Zip</th>
-            <td {if $account.fieldFail.billing_zip}class="glm-form-bad-input" data-tabid="glm-billing-zip"{/if}>
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_zip} glm-required{/if}">Billing Zip</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_zip} glm-form-bad-input{/if}" data-tabid="glm-billing-zip">
                 <input type="text" name="billing_zip" value="{$account.fieldData.billing_zip}" class="glm-form-text-input-medium">
             {if $account.fieldFail.billing_zip}<p>{$account.fieldFail.billing_zip}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
 
-        <tr>
-            <th style="text-align: right;" {if $account.fieldRequired.billing_phone} class="glm-required"{/if}>Billing Phone</th>
-            <td {if $account.fieldFail.billing_phone}class="glm-form-bad-input" data-tabid="glm-billing-phone"{/if}>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label{if $account.fieldRequired.billing_phone} glm-required{/if}">Billing Phone</div>
+            <div class="glm-billing-input{if $account.fieldFail.billing_phone} glm-form-bad-input{/if}" data-tabid="glm-billing-phone">
                 <input type="text" name="billing_phone" value="{$account.fieldData.billing_phone}" class="glm-form-text-input-medium">
             {if $account.fieldFail.billing_phone}<p>{$account.fieldFail.billing_phone}</p>{/if}<br>
-            </td>
-        </tr>
+            </div>
+        </div>
+
+        </fieldset>
+
+        <input class="button button-primary" type="submit" value="{if $haveAccount}Save{else}Create{/if} Account">
+
 
-        <tr>
-            <td colspan="2">
-                <input class="button button-primary" type="submit" value="{if $haveAccount}Save{else}Create{/if} Account">
-            </td>
-        </tr>
 
+    </form>
 
-    </table>
-</form>
+</div>
 
 <script>
 jQuery(document).ready(function($){
-- 
2.17.1