LP1928005 Bootstrap Opac: Current charges not aligned on mobile.

This patch removes the classes from the charges table that presents the table in a vertical format.
It wraps the table in a <div> that uses the table-responsive class.

To test add some charges to a patron record.
Bring that patron's account up in the opac and view the charges table in the smallest browser size
possible.
Notice that the table switches to a vertical format and the column names are mis-aligned.

Apply the patch.

View the table again.  The table should now be horizontal with all of the columns correct.

Signed-off-by: Garry Collum <gcollum@gmail.com>
Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>

diff --git a/Open-ILS/src/templates-bootstrap/opac/myopac/charges.tt2 b/Open-ILS/src/templates-bootstrap/opac/myopac/charges.tt2
index febd838..efb7276 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/myopac/charges.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/myopac/charges.tt2
@@ -129,7 +129,7 @@
 
     [% IF ctx.fines.grocery.size > 0 %]
     <!-- Table for all non-circulation transactions -->
-    <div id='myopac_trans_div'>
+    <div id='myopac_trans_div' class="mt-3">
         <h3>
                 [% l("Charges On Your Account") %]
         </h3>
@@ -143,7 +143,8 @@
         </div>             
         [% END %]
         
-         <table id="acct_fees_main_header" class="table table-hover table-bordered miniTable chargesTable my-3" title="[% l('Other Fines and Fees') %]">
+        <div class="table-responsive">
+         <table id="acct_fees_main_header" class="table table-hover table-bordered  my-3" title="[% l('Other Fines and Fees') %]">
             <thead>
                 <tr>
                 
@@ -203,6 +204,7 @@
                 [% END %]
             </tbody>
         </table>
+    </div>
    
     </div>
     [% END %]