LP#1614807: Make holds history more responsive

When retrieving the holds history page on a mobile device, re-orient the table
as we do with other My Account screens.

Test plan
Pre-patch, retrieve the holds history screen for a patron that has enabled
holds history. Resize the screen to a width of 600 pixels or smaller. No
adjustments will be made to the table, and horizontal scrolling is required to
see some data.

Post-patch, after resizing this screen, the table should reorient itself with
the headers displaying in the left column, as is done on the other My Account
screens.

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 528107d..b266730 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -2012,10 +2012,10 @@ a.preflib_change {
         border-bottom: none;
     }
         /* Force table to not be like tables anymore */
-        table#acct_checked_main_header thead tr th, table#acct_holds_main_header thead tr th, table#acct_checked_hist_header thead tr th {
+        table#acct_checked_main_header thead tr th, table#acct_holds_main_header thead tr th, table#acct_checked_hist_header thead tr th, #acct_holds_hist_header thead tr th {
                 display: block;
         }
-        table#acct_checked_main_header tbody tr td, table#acct_holds_main_header tbody tr td, table#acct_checked_hist_header tbody tr td {
+        table#acct_checked_main_header tbody tr td, table#acct_holds_main_header tbody tr td, table#acct_checked_hist_header tbody tr td, #acct_holds_hist_header tbody tr td {
                 display: block;
         }
 
@@ -2026,13 +2026,19 @@ a.preflib_change {
                 left: -9999px;
         }
 
-        table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header {
+        table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header, #acct_holds_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 {
+        /* Holds history gets large white border to mimic header cell on other
+           account screens that provide visual cue for next title */
+
+        table#acct_holds_hist_header tr { border-top: 25px solid #fff; }
+
+
+        table#acct_checked_main_header td, table#acct_holds_main_header td, table#acct_checked_hist_header td, #acct_holds_hist_header td {
                 /* Behave  like a "row" */
                 border: none;
                 border-bottom: 1px solid #eee;
@@ -2040,7 +2046,7 @@ a.preflib_change {
                 padding-left: 40%;
         }
 
-         table#acct_checked_main_header td:before, table#acct_holds_main_header td:before, table#acct_checked_hist_header td:before {
+         table#acct_checked_main_header td:before, table#acct_holds_main_header td:before, table#acct_checked_hist_header td:before, #acct_holds_hist_header td_before {
                 /* Now like a table header */
                 position: absolute;
                 /* Top/left values mimic padding */
@@ -2079,6 +2085,16 @@ a.preflib_change {
         table#acct_holds_main_header td:nth-of-type(9):before { content: "[% l('Status') %]"; }
         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
 
+        table#acct_holds_hist_header td:nth-of-type(1):before { content: "[% l('Title') %]";}
+        table#acct_holds_hist_header td:nth-of-type(2):before { content: "[% l('Author') %]"; }
+        table#acct_holds_hist_header td:nth-of-type(3):before { content: "[% l('Format') %]"; }
+        table#acct_holds_hist_header td:nth-of-type(4):before { content: "[% l('Pickup Location') %]"; }
+        table#acct_holds_hist_header td:nth-of-type(5):before { content: "[% l('Activate') %]"; }
+        table#acct_holds_hist_header td:nth-of-type(6):before { content: "[% l('Active') %]"; }
+        table#acct_holds_hist_header td:nth-of-type(7):before { content: "[% l('Date Fulfilled') %]"; }
+        table#acct_holds_hist_header td:nth-of-type(8):before { content: "[% l('Status') %]"; }
+
+
        /*Want to see these in mobile ONLY */
        .mobile_view{
           display:block;