LP#1614807: Fix Circ History table header display on small screens

Because the table in circs.tt2 and circ_history.tt2 shared the same CSS class,
circ_history.tt2 was displaying circs.tt2's column headers on mobile devices
and other small screens. The two tables now have distinct classes, and
styles.css.tt2 has been updated to provide the correct table headers for the
circ history page.

Test plan
Pre-patch, pull up a user account that has a circ history in My Account, go to
the Check Out History tab, then resize the screen to a width of 600 pixels or
smaller. The table headers will now display along the side, but the headers
will be the ones that typically display in the Items Out screen. The Barcode
will display in the Date Returned row and the Call number will display in the
Barcode row.

Post-patch, after resizing the screen, the headers that display along the side
should match the ones from the Checkout History interface. All data should
display in its appropriate row.

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 166950f..dacad7a 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_checked_main_header thead tr th, table#acct_holds_main_header thead tr th, table#acct_checked_hist_header thead tr th {
                 display: block;
         }
-        table#acct_checked_main_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 {
                 display: block;
         }
 
@@ -2026,9 +2026,9 @@ a.preflib_change {
                 left: -9999px;
         }
 
-        table#acct_checked_main_header tr { border: 1px solid #ddd; }
+        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_checked_main_header td, table#acct_holds_main_header td, table#acct_checked_hist_header td {
                 /* Behave  like a "row" */
                 border: none;
                 border-bottom: 1px solid #eee;
@@ -2036,7 +2036,7 @@ a.preflib_change {
                 padding-left: 40%;
         }
 
-        table#acct_checked_main_header td:before {
+         table#acct_checked_main_header td:before, table#acct_holds_main_header td:before, table#acct_checked_hist_header td:before {
                 /* Now like a table header */
                 position: absolute;
                 /* Top/left values mimic padding */
@@ -2054,31 +2054,14 @@ a.preflib_change {
         table#acct_checked_main_header td:nth-of-type(6):before { content: "[% l('Barcode') %]"; }
         table#acct_checked_main_header td:nth-of-type(7):before { content: "[% l('Call number') %]"; }
 
-        table#acct_holds_main_header thead tr th {
-                display: block;
-        }
-        table#acct_holds_main_header tbody tr td {
-                display: block;
-        }
-
-        table#acct_holds_main_header td {
-                /* Behave  like a "row" */
-                border: none;
-                border-bottom: 1px solid #eee;
-                position: relative;
-                padding-left: 40%;
-        }
-
-
-        table#acct_holds_main_header td:before {
-                /* Now like a table header */
-                position: absolute;
-                /* Top/left values mimic padding */
-                left: 2px;
-                width: 40%;
-                padding-right: 10px;
-                white-space: nowrap;
-        }
+     table#acct_checked_hist_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
+        table#acct_checked_hist_header td:nth-of-type(2):before { content: "[% l('Title') %]";}
+        table#acct_checked_hist_header td:nth-of-type(3):before { content: "[% l('Author') %]"; }
+        table#acct_checked_hist_header td:nth-of-type(4):before { content: "[% l('Checkout Date') %]"; }
+        table#acct_checked_hist_header td:nth-of-type(5):before { content: "[% l('Due Date') %]"; }
+        table#acct_checked_hist_header td:nth-of-type(6):before { content: "[% l('Date Returned') %]"; }
+        table#acct_checked_hist_header td:nth-of-type(7):before { content: "[% l('Barcode') %]"; }
+        table#acct_checked_hist_header td:nth-of-type(8):before { content: "[% l('Call number') %]"; }
 
         table#acct_holds_main_header td:nth-of-type(1) { border-top: 5px solid #aaa; padding-top: 15px; background-color: #fff;}
         table#acct_holds_main_header td:nth-of-type(2):before { content: "[% l('Title') %]";}

diff --git a/Open-ILS/src/templates/opac/myopac/circ_history.tt2 b/Open-ILS/src/templates/opac/myopac/circ_history.tt2
index 675dff9..fa0e16e 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/circ_history.tt2
+++ b/Open-ILS/src/templates/opac/myopac/circ_history.tt2
@@ -82,7 +82,7 @@
             </tr>
         </table>
     <div id='checked_main'>
-        <table id="acct_checked_main_header"
+        <table id="acct_checked_hist_header"
             title="[% l('History of Items Checked Out') %]">
             <thead>
                 <tr>