From 055ec5b8cfda05b19e7a23982007498d6a048e8d Mon Sep 17 00:00:00 2001 From: Kathy Lussier Date: Wed, 5 Apr 2017 17:25:49 -0400 Subject: [PATCH] LP#1680142: Fix responsive design issue with ebook display 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 Signed-off-by: Galen Charlton Conflicts: Open-ILS/src/templates/opac/css/style.css.tt2 Signed-off-by: Ben Shum --- Open-ILS/src/templates/opac/css/style.css.tt2 | 30 ++++++++++++++++++++------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2 index bf5f163f11..1c1373e4dc 100644 --- a/Open-ILS/src/templates/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates/opac/css/style.css.tt2 @@ -1965,7 +1965,7 @@ a.preflib_change { #dash_identity a { float:left; } - #dashboard { + #dashboard, #dashboard_e { display: none; } #holds_box form blockquote { @@ -2161,10 +2161,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; } @@ -2175,19 +2175,22 @@ a.preflib_change { left: -9999px; } - 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; @@ -2195,7 +2198,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, #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 */ @@ -2238,6 +2241,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{ -- 2.11.0