From c54f13165a5c6d9cb061a2ed13bfc10ae07d4d08 Mon Sep 17 00:00:00 2001 From: Garry Collum Date: Thu, 11 Aug 2022 18:44:19 +0000 Subject: [PATCH] LP#1984269: Bootstrap opac: display of tables on small screens This incorporates a generic process to display vertical tables in the Bootstrap opac in small screens by adding a 'mobile-title' attr to any elements of the table. This patch uses the copy_table.tt2 and results/table.tt2 as examples. These two tables are best tested with bibs that contain items that have parts. The results/table.tt2 is displayed by using the "Show More Details" button on the results screen. When the screen is sized so that the tables become vertical the parts column is not displayed. After the patch is applied the parts column is displayed only on those bibs that contain parts. For these two particular tables, it also refactors the method in which the copies are numbered with the lists. Prior to the patch the mobile display would show the copy number, but it would stop at 10 for both of these tables, because that's what was defined in CSS. They should now display a number for each table row displayed. Signed-off-by: Garry Collum Signed-off-by: John Amundson Signed-off-by: Galen Charlton --- .../opac/css/mediaQuery.css.tt2 | 42 ++++------------------ .../src/templates-bootstrap/opac/css/style.css.tt2 | 42 ++++------------------ .../opac/parts/record/copy_table.tt2 | 30 ++++++++-------- .../opac/parts/result/table.tt2 | 20 +++++------ 4 files changed, 39 insertions(+), 95 deletions(-) diff --git a/Open-ILS/src/templates-bootstrap/opac/css/mediaQuery.css.tt2 b/Open-ILS/src/templates-bootstrap/opac/css/mediaQuery.css.tt2 index d98c372231..97399f7213 100644 --- a/Open-ILS/src/templates-bootstrap/opac/css/mediaQuery.css.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/css/mediaQuery.css.tt2 @@ -48,42 +48,14 @@ only screen and (max-width: 650px) { padding-right: 10px; white-space: nowrap; position: absolute; + font-weight: bold; + content :attr(mobile-title); + text-align: left; } - .copyTable tr:nth-of-type(1):before { content: "Copy #1"; display: block; text-align:center; } - .copyTable tr:nth-of-type(2):before { content: "Copy #2"; display: block; text-align:center;} - .copyTable tr:nth-of-type(3):before { content: "Copy #3"; display: block; text-align:center;} - .copyTable tr:nth-of-type(4):before { content: "Copy #4"; display: block; text-align:center;} - .copyTable tr:nth-of-type(5):before { content: "Copy #5"; display: block; text-align:center;} - .copyTable tr:nth-of-type(6):before { content: "Copy #6"; display: block; text-align:center;} - .copyTable tr:nth-of-type(7):before { content: "Copy #7"; display: block; text-align:center;} - .copyTable tr:nth-of-type(8):before { content: "Copy #8"; display: block; text-align:center;} - .copyTable tr:nth-of-type(9):before { content: "Copy #9"; display: block; text-align:center;} - .copyTable tr:nth-of-type(10):before { content: "Copy #10"; display: block; text-align:center;} - - .copyTable td:nth-of-type(1):before { content: "Library"; display: flex; } - .copyTable td:nth-of-type(2):before { content: "Call Number"; display: flex; } - .copyTable td:nth-of-type(3):before { content: "Barcode"; display: flex;} - .copyTable td:nth-of-type(4):before { content: "Shelving Location"; display: flex;} - .copyTable td:nth-of-type(5):before { content: "Status"; display: flex;} - .copyTable td:nth-of-type(6):before { content: "Due Date"; display: flex;} - .copyTable td:nth-of-type(7):before { content: "[% l('Distance') %]"; display: flex;} - - .holdingsTable tr:nth-of-type(1):before { content: "Copy #1"; display: block; text-align:center; } - .holdingsTable tr:nth-of-type(2):before { content: "Copy #2"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(3):before { content: "Copy #3"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(4):before { content: "Copy #4"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(5):before { content: "Copy #5"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(6):before { content: "Copy #6"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(7):before { content: "Copy #7"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(8):before { content: "Copy #8"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(9):before { content: "Copy #9"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(10):before { content: "Copy #10"; display: block; text-align:center;} - - - .holdingsTable td:nth-of-type(1):before { content: "Library"; display: flex; } - .holdingsTable td:nth-of-type(2):before { content: "Shelving location"; display: flex; } - .holdingsTable td:nth-of-type(3):before { content: "Call number"; display: flex;} - .holdingsTable td:nth-of-type(4):before { content: "Status"; display: flex;} + + .copyTable tr:before { content: attr(mobile-count); display: block; text-align:center; } + .holdingsTable tr:before { content: attr(mobile-count); display: block; text-align:center; } + .chargesTable td:nth-of-type(1):before { content: "Select"; display: flex; } .chargesTable td:nth-of-type(2):before { content: "Owed"; display: flex; } diff --git a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 index fbbd9dd59f..be545fe574 100755 --- a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 @@ -69,42 +69,14 @@ only screen and (max-width: 650px) { padding-right: 10px; white-space: nowrap; position: absolute; + content: attr(mobile-title); + font-weight: bold; + text-align: left; } - .copyTable tr:nth-of-type(1):before { content: "Copy #1"; display: block; text-align:center; } - .copyTable tr:nth-of-type(2):before { content: "Copy #2"; display: block; text-align:center;} - .copyTable tr:nth-of-type(3):before { content: "Copy #3"; display: block; text-align:center;} - .copyTable tr:nth-of-type(4):before { content: "Copy #4"; display: block; text-align:center;} - .copyTable tr:nth-of-type(5):before { content: "Copy #5"; display: block; text-align:center;} - .copyTable tr:nth-of-type(6):before { content: "Copy #6"; display: block; text-align:center;} - .copyTable tr:nth-of-type(7):before { content: "Copy #7"; display: block; text-align:center;} - .copyTable tr:nth-of-type(8):before { content: "Copy #8"; display: block; text-align:center;} - .copyTable tr:nth-of-type(9):before { content: "Copy #9"; display: block; text-align:center;} - .copyTable tr:nth-of-type(10):before { content: "Copy #10"; display: block; text-align:center;} - - .copyTable td:nth-of-type(1):before { content: "Library"; display: flex; } - .copyTable td:nth-of-type(2):before { content: "Call Number"; display: flex; } - .copyTable td:nth-of-type(3):before { content: "Barcode"; display: flex;} - .copyTable td:nth-of-type(4):before { content: "Shelving Location"; display: flex;} - .copyTable td:nth-of-type(5):before { content: "Status"; display: flex;} - .copyTable td:nth-of-type(6):before { content: "Due Date"; display: flex;} - .copyTable td:nth-of-type(7):before { content: "[% l('Distance') %]"; display: flex;} - - .holdingsTable tr:nth-of-type(1):before { content: "Copy #1"; display: block; text-align:center; } - .holdingsTable tr:nth-of-type(2):before { content: "Copy #2"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(3):before { content: "Copy #3"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(4):before { content: "Copy #4"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(5):before { content: "Copy #5"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(6):before { content: "Copy #6"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(7):before { content: "Copy #7"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(8):before { content: "Copy #8"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(9):before { content: "Copy #9"; display: block; text-align:center;} - .holdingsTable tr:nth-of-type(10):before { content: "Copy #10"; display: block; text-align:center;} - - - .holdingsTable td:nth-of-type(1):before { content: "Library"; display: flex; } - .holdingsTable td:nth-of-type(2):before { content: "Shelving location"; display: flex; } - .holdingsTable td:nth-of-type(3):before { content: "Call number"; display: flex;} - .holdingsTable td:nth-of-type(4):before { content: "Status"; display: flex;} + + .copyTable tr::before { content: attr(mobile-count); display: block; text-align:center; } + .holdintsTable tr::before { content: attr(mobile-count); display: block; text-align:center; } + .chargesTable td:nth-of-type(1):before { content: "Select"; display: flex; } .chargesTable td:nth-of-type(2):before { content: "Owed"; display: flex; } diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/record/copy_table.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/record/copy_table.tt2 index ca1139528e..de11514e35 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/record/copy_table.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/record/copy_table.tt2 @@ -81,7 +81,7 @@ IF has_copies or ctx.foreign_copies; [% END %] - +
[% IF serial_holdings -%] @@ -156,17 +156,17 @@ END; # FOREACH bib callnum = callnum _ " " _ callnum_suffix; END; -%] - + [%- IF serial_holdings %] - [%- ELSE %][% END %] - [%- IF has_parts == 'true' %] - + [%- END %] - - + [% IF copy_info.courses.size > 0 || ctx.is_staff %] - + [% ELSIF ctx.use_courses %] [% END %] [% IF ctx.is_staff %] - - [% END # is_staff %] [% IF ctx.is_staff OR serial_holdings %] - [%- END %] - - [%- IF ctx.use_courses %] - [% END %] [%- IF ctx.geo_sort && ctx.has_valid_coords %] - + [%- END %] diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/result/table.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/result/table.tt2 index ce8ab1921f..e361dc472b 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/result/table.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/result/table.tt2 @@ -178,7 +178,7 @@ [%- IF !show_detail_view AND args.holdings.size > 0 %]
- [% l('Call number:') %] [% args.holdings.0.label | html %] + [% l('Call Number:') %] [% args.holdings.0.label | html %]
[% END %] @@ -304,9 +304,9 @@
[%- copy_info.holding_label | html; -%] + [%- ELSE %] [%- INCLUDE "opac/parts/library_name_link.tt2"; -%] [% callnum | html %] [% IF ctx.get_org_setting(CGI.param('loc') + [% callnum | html %] [% IF ctx.get_org_setting(CGI.param('loc') OR ctx.aou_tree.id, 'sms.enable') == 1 %](Text)[% END %] @@ -201,9 +201,9 @@ END; # FOREACH bib [% END %] [% copy_info.part_label | html %][% copy_info.part_label | html %] + [% copy_info.barcode | html -%] [% IF ctx.is_staff %] [%- IF ctx.is_browser_staff %] @@ -231,18 +231,18 @@ END; # FOREACH bib ''; END; -%] [%- INCLUDE "opac/parts/location_name_link.tt2"; -%][%- INCLUDE "opac/parts/location_name_link.tt2"; -%][% copy_info.circ_modifier | html %][% copy_info.circ_modifier | html %] + [% copy_info.age_protect ? ctx.get_crahp(copy_info.age_protect).name : l('None') | html %] [% + [% IF ctx.get_org_setting(copy_info.circ_lib, 'circ.holds.age_protect.active_date') == 1; disp_date = copy_info.active_date ? copy_info.active_date : copy_info.create_date; ELSE; @@ -260,7 +260,7 @@ END; # FOREACH bib %][% # Show copy/volume hold links to staff (without + [% # Show copy/volume hold links to staff (without # checking whether they have permissions to do those). overall_holdable = ( copy_info.holdable == 't' AND @@ -308,11 +308,11 @@ END; # FOREACH bib l("Not holdable"); END %][%- + [%- schema_copy_status.${copy_info.status_code}; copy_info.copy_status | html; -%][% + [% IF copy_info.due_date; date.format( ctx.parse_datetime(copy_info.due_date, copy_info.circ_circ_lib), @@ -322,12 +322,12 @@ END; # FOREACH bib '-'; END %][%- FOREACH course IN copy_info.courses %] + [%- FOREACH course IN copy_info.courses %]
[% course.course_number %]
[% END %]		[% display_ou_distance(copy_info.circ_lib) %][% display_ou_distance(copy_info.circ_lib) %]
- - - + + + [%- IF has_parts == 'true'; %] [%- END %] @@ -315,14 +315,14 @@ [% FOR copy IN args.holdings %] - - - - + + + + [%- IF has_parts == 'true'; %] - + [%- END %] - + [% END %] -- 2.11.0