From 4c16071e115c60966cc0c51fa42eb7fa7fd2818a Mon Sep 17 00:00:00 2001
From: Kathy Lussier <klussier@masslnc.org>
Date: Fri, 19 Aug 2016 11:59:27 -0400
Subject: [PATCH] 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>
---
 Open-ILS/src/templates/opac/css/style.css.tt2 | 43 ++++++-------------
 .../templates/opac/myopac/circ_history.tt2    |  2 +-
 2 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 166950f901..dacad7aa3e 100644
--- 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 675dff91c6..fa0e16e6bf 100644
--- 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>
-- 
2.43.2