From: Kathy Lussier Date: Mon, 22 Aug 2016 10:10:14 +0000 (-0400) Subject: LP#1614807: Make holds history more responsive X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=cbdb2e35542a7a84a99d470e03b77c623fbd79e3;p=contrib%2FConifer.git LP#1614807: Make holds history more responsive When retrieving the holds history page on a mobile device, re-orient the table as we do with other My Account screens. Test plan Pre-patch, retrieve the holds history screen for a patron that has enabled holds history. Resize the screen to a width of 600 pixels or smaller. No adjustments will be made to the table, and horizontal scrolling is required to see some data. Post-patch, after resizing this screen, the table should reorient itself with the headers displaying in the left column, as is done on the other My Account screens. Signed-off-by: Kathy Lussier Signed-off-by: Mike Rylander --- diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2 index 528107d669..b266730484 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_holds_main_header thead tr th, table#acct_checked_hist_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, #acct_holds_hist_header 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 { + 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 { display: block; } @@ -2026,13 +2026,19 @@ a.preflib_change { left: -9999px; } - table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header { + table#acct_checked_main_header, table#acct_holds_main_header, table#acct_checked_hist_header, #acct_holds_hist_header { width: 90%; } 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_holds_main_header td, table#acct_checked_hist_header td { + /* Holds history gets large white border to mimic header cell on other + account screens that provide visual cue for next title */ + + table#acct_holds_hist_header 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 { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; @@ -2040,7 +2046,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 { + 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 { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ @@ -2079,6 +2085,16 @@ a.preflib_change { table#acct_holds_main_header td:nth-of-type(9):before { content: "[% l('Status') %]"; } table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; } + table#acct_holds_hist_header td:nth-of-type(1):before { content: "[% l('Title') %]";} + table#acct_holds_hist_header td:nth-of-type(2):before { content: "[% l('Author') %]"; } + table#acct_holds_hist_header td:nth-of-type(3):before { content: "[% l('Format') %]"; } + table#acct_holds_hist_header td:nth-of-type(4):before { content: "[% l('Pickup Location') %]"; } + table#acct_holds_hist_header td:nth-of-type(5):before { content: "[% l('Activate') %]"; } + table#acct_holds_hist_header td:nth-of-type(6):before { content: "[% l('Active') %]"; } + table#acct_holds_hist_header td:nth-of-type(7):before { content: "[% l('Date Fulfilled') %]"; } + table#acct_holds_hist_header td:nth-of-type(8):before { content: "[% l('Status') %]"; } + + /*Want to see these in mobile ONLY */ .mobile_view{ display:block;