LP#1680142: Fix responsive design issue with ebook display
authorKathy Lussier <klussier@masslnc.org>
Wed, 5 Apr 2017 21:25:49 +0000 (17:25 -0400)
committerBen Shum <ben@evergreener.net>
Fri, 28 Apr 2017 15:11:48 +0000 (11:11 -0400)
Fixes the following responsive design issues:
* Removes the e-book dashboard display when the screen size is reduced.
* Changes the table display for e-items currently checked out, e-items on hold,
and e-iterms ready for checkout interfaces to mimic the responsive behavior of
other My Account screens.
* Fixes a couple of Holds History CSS problems discovered while I was here.

Test Plan:
Enable ebook services. Log into your account and resize the screen to the size
of a mobile device. The ebook dashboard will display while the main account
dashboard disappears. Go into My Account, click Items checked out and then
click E-Items Currently Checked Out. The table has not reformatted itself for
responsive design view.

Post-patch: When you log in and resize the screen, the e-items dashboard
display will disappear along with the main account dashboard. When you access
the E-Items Currently Checked Out interface, the table will reformat itself
with column headers along the left side.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Conflicts:
Open-ILS/src/templates/opac/css/style.css.tt2

Signed-off-by: Ben Shum <ben@evergreener.net>
Open-ILS/src/templates/opac/css/style.css.tt2

index f2fc16f..aba12de 100644 (file)
@@ -2558,7 +2558,7 @@ a.preflib_change {
         float:left;
         [% END -%]
     }
-    #dashboard {
+    #dashboard, #dashboard_e {
         display: none;
     }
     #holds_box form blockquote {
@@ -2780,10 +2780,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, #acct_holds_hist_header thead tr th, #ebook_circs_main_table thead tr th, #ebook_holds_main_table 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, table#acct_holds_hist_header thead tr th, table#ebook_circs_main_table thead tr th, table#ebook_holds_main_table 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, #acct_holds_hist_header tbody tr td, #ebook_circs_main_table thead tr td, #ebook_holds_main_table thead 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, table#acct_holds_hist_header tbody tr td, table#ebook_circs_main_table tbody tr td, table#ebook_holds_main_table tbody tr td {
                 display: block;
         }
 
@@ -2798,19 +2798,22 @@ a.preflib_change {
                 [% END -%]
         }
 
-        table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header, #acct_holds_hist_header {
+        table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header, table#acct_holds_hist_header, table#ebook_circs_main_table, table#ebook_holds_main_table {
                 width: 90%;
         }
 
         table#acct_checked_main_header tr, table#acct_holds_main_header tr, table#acct_checked_hist_header tr { border: 1px solid #ddd; }
 
         /* Holds history gets large white border to mimic header cell on other
-           account screens that provide visual cue for next title */
+           account screens that provide visual cue for next title. We should do
+           the same for ebook tables too since we have no actions on those
+           tables. If actions get added, we should move those tables out of
+           here. */
 
-        table#acct_holds_hist_header tr { border-top: 25px solid #fff; }
+        table#acct_holds_hist_header tr, table#ebook_circs_main_table tr, table#ebook_holds_main_table 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 {
+        table#acct_checked_main_header td, table#acct_holds_main_header td, table#acct_checked_hist_header td, table#acct_holds_hist_header td, table#ebook_circs_main_table td, table#ebook_holds_main_table td {
                 /* Behave  like a "row" */
                 border: none;
                 border-bottom: 1px solid #eee;
@@ -2822,7 +2825,7 @@ a.preflib_change {
                 [% END -%]
         }
 
-         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 {
+         table#acct_checked_main_header td:before, table#acct_holds_main_header td:before, table#acct_checked_hist_header td:before, table#acct_holds_hist_header td:before, table#ebook_circs_main_table td:before, table#ebook_holds_main_table td:before {
                 /* Now like a table header */
                 position: absolute;
                 /* Top/left values mimic padding */
@@ -2870,6 +2873,17 @@ a.preflib_change {
         table#acct_holds_hist_header td:nth-of-type(4):before { content: "[% l('Pickup Location') %]"; }
         table#acct_holds_hist_header td:nth-of-type(8):before { content: "[% l('Status') %]"; }
 
+        table#ebook_circs_main_table td:nth-of-type(1):before { content: "[% l('Title') %]"; }
+        table#ebook_circs_main_table td:nth-of-type(2):before { content: "[% l('Author') %]"; }
+        table#ebook_circs_main_table td:nth-of-type(3):before { content: "[% l('Due Date') %]"; }
+        table#ebook_circs_main_table td:nth-of-type(4):before { content: "[% l('Actions') %]"; }
+
+        table#ebook_holds_main_table td:nth-of-type(1):before { content: "[% l('Title') %]"; }
+        table#ebook_holds_main_table td:nth-of-type(2):before { content: "[% l('Author') %]"; }
+        table#ebook_holds_main_table td:nth-of-type(3):before { content: "[% l('Due Date') %]"; }
+        table#ebook_holds_main_table td:nth-of-type(4):before { content: "[% l('Actions') %]"; }
+
+
 
        /*Want to see these in mobile ONLY */
        .mobile_view{