PINES Customization: Mobile view for fines payment form

Modified table so that the form design doesn't go off the side
of the screen in mobile view.

Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>

diff --git a/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2 b/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2
index 455af6a..d1de781 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2
+++ b/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2
@@ -101,13 +101,65 @@
         <input type="hidden" name="stripe_token" id="stripe_token" />
         [% END %]
 
-         <table id="billing_info_table">
-          <tbody>
-              <tr>
-                  <td colspan='2' class="cc_header"><strong>[% l('Billing Information') %]</strong></td>
-               </tr>
-               <tr> 
-                <td><label for="payment-first-name">[% l('First Name') %]</label></td>
+        <table title="[% l('Billing Information') %]">
+            <tbody>
+                <tr>
+                    <td colspan='2'>
+                    <!-- PINES Customization for mobile views -->
+                    <div class="small_view_only">
+                            <strong>[% l('Total amount to pay:') %]
+                            [% money(ctx.fines.balance_owed) %]</strong>
+                            <br/>
+                    </div>
+                    <strong>[% l('Billing Information') %]</strong></td>
+                    <td rowspan='13' valign='top' class="mobile_hide">
+                        <p>[% l('Selected fines you are paying for:') %]</p>
+                        <table title="[% l('List of Transactions') %]"
+                            class="table_no_border_space table_no_cell_pad myopac_payments_table">
+                            <thead>
+                                <tr>
+                                    <th>[% l('Name') %]</th>
+                                    <th>[% l('Amount') %]</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            [%
+                            FOR f IN ctx.fines.circulation;
+                                NEXT IF CGI.param('xact').size &&
+                                    !CGI.param('xact').grep(f.xact.id).size;
+                                attrs = {marc_xml => f.marc_xml};
+                                IF f.marc_xml;
+                                    PROCESS get_marc_attrs args=attrs;
+                                ELSIF f.xact.reservation;
+                                    attrs.title = f.xact.reservation.target_resource_type.name;
+                                END %]
+                                <tr>
+                                    <td>[% attrs.title | html %]</td>
+                                    <td class="text-right">[% money(f.xact.balance_owed) %]</td>
+                                </tr>
+                            [%
+                            END;
+                            FOR f IN ctx.fines.grocery;
+                                NEXT IF CGI.param('xact_misc').size &&
+                                    !CGI.param('xact_misc').grep(f.xact.id).size %]
+                                <tr>
+                                    <td>[% f.xact.last_billing_type | html %]</td>
+                                    <td class="text-right">[% money(f.xact.balance_owed) %]</td>
+                                </tr>
+                            [% END %]
+                            </tbody>
+                        </table>
+                        <br />
+                        <div>
+                            [% l('Total amount to pay:') %]
+                            <strong>[% money(ctx.fines.balance_owed) %]</strong>
+                        </div>
+                        <br />
+                        [% | l('<strong>', '</strong>') %]Click [_1]Cancel[_2] to go back and (un)select other fines.[% END %]
+                    </td>
+                </tr>
+                <tr>
+                    <td><label for="payment-first-name">[% l('First Name') %]</label></td>
                     <td><input type="text"  name="billing_first" id="payment-first-name" 
                         value="[% ctx.user.first_given_name | html %]" /></td>
                 </tr>