From: Kathy Lussier Date: Wed, 5 Apr 2017 21:25:49 +0000 (-0400) Subject: LP#1680142: Fix responsive design issue with ebook display X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=b0ad408924fdc616be8c871d87bf9b7d3d96983b;p=working%2FEvergreen.git 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 --- diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2 index f2fc16f371..aba12de235 100644 --- a/Open-ILS/src/templates/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates/opac/css/style.css.tt2 @@ -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{