From: Kathy Lussier <klussier@masslnc.org>
Date: Sat, 20 Aug 2016 04:54:40 +0000 (-0400)
Subject: LP#1614807: Fix spacing issues in responsive design for My Account screens
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=f414ddd5c21e97a51909546c51afef3b71441e8d;p=evergreen%2Fpines.git

LP#1614807: Fix spacing issues in responsive design for My Account screens

This commit fixes the following spacing issues that are found in the My Account
screens when loaded on a small-screen device:

* When a field has no value, the text in the table header, which displays along
 the left, is cut off at the bottom. The Notes field on the Holds page is one
place where this issue is commonly seen. With the fix, the headers are slightly
out of alignment with the field data, but this is still an improvement over
cutting off text on the screen.

* If the only title(s) listed on the screen are short, requiring little width
in a table cell, the text in the table header runs into field data. A good
example in the Concerto data is if the user only has a check out for record ID
2 (Le concerto) on their account.

* The checkboxes in the Check Out History and Items on Hold screen were pushed
to the right. We fix it by giving the cells with a checkbox a "checkbox_column"
class, which was already in use by the checkbox on the Items Out screen.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Mike Rylander <mrylander@gmail.com>
---

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 7637863264..528107d669 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -2026,6 +2026,10 @@ a.preflib_change {
                 left: -9999px;
         }
 
+        table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header {
+                width: 90%;
+        }
+
         table#acct_checked_main_header tr, table#acct_holds_main_header tr, table#acct_checked_hist_header tr { border: 1px solid #ddd; }
 
         table#acct_checked_main_header td, table#acct_holds_main_header td, table#acct_checked_hist_header td {
@@ -2040,6 +2044,7 @@ a.preflib_change {
                 /* Now like a table header */
                 position: absolute;
                 /* Top/left values mimic padding */
+                top: 2px;
                 left: 2px;
                 width: 40%;
                 padding-right: 10px;
diff --git a/Open-ILS/src/templates/opac/myopac/circ_history.tt2 b/Open-ILS/src/templates/opac/myopac/circ_history.tt2
index fa0e16e6bf..7e6edc4f9d 100644
--- a/Open-ILS/src/templates/opac/myopac/circ_history.tt2
+++ b/Open-ILS/src/templates/opac/myopac/circ_history.tt2
@@ -86,7 +86,7 @@
             title="[% l('History of Items Checked Out') %]">
             <thead>
                 <tr>
-                    <th align="center">
+                    <th class="checkbox_column">
                         <input type="checkbox" onclick="var inputs=document.getElementsByTagName('input'); for (i = 0; i < inputs.length; i++) { if (inputs[i].name == 'circ_id' && !inputs[i].disabled) inputs[i].checked = this.checked;}"/>
                     </th>
                     <th>[% sort_head("sort_title", l("Title")) %]</th>
@@ -162,7 +162,7 @@
 
                 FOR circ IN circ_items; %]
                     <tr>
-            <td align="center" style="text-align:center;">
+            <td class="checkbox_column">
                 <input type="checkbox" name="circ_id" value="[% circ.circ.id %]" />
             </td>
                         <td>
diff --git a/Open-ILS/src/templates/opac/myopac/holds.tt2 b/Open-ILS/src/templates/opac/myopac/holds.tt2
index 68f9b4edc4..6c2827576c 100644
--- a/Open-ILS/src/templates/opac/myopac/holds.tt2
+++ b/Open-ILS/src/templates/opac/myopac/holds.tt2
@@ -101,7 +101,7 @@
             class="table_no_border_space table_no_cell_pad">
             <thead>
             <tr>
-                <th align="center">
+                <th class="checkbox_column"> 
                     <input type="checkbox" title="[% l('Select All Holds') %]"
                       onclick="var inputs=document.getElementsByTagName('input'); for (i = 0; i < inputs.length; i++) { if (inputs[i].name == 'hold_id' &amp;&amp; !inputs[i].disabled) inputs[i].checked = this.checked;}"/>
                 </th>
@@ -173,7 +173,7 @@
                     ahr = hold.hold.hold %]
                 <tr name="acct_holds_temp"
                     class="acct_holds_temp[% ahr.frozen == 't' ? ' inactive-hold' : '' %]">
-                    <td align="center" style="text-align:center;">
+                    <td class="checkbox_column">
                         <input type="checkbox" name="hold_id" value="[% ahr.id %]" 
                             [% html_text_attr('title', l('Select hold [_1]', attrs.title)) %]/>
                     </td>