From 24fdfea4dd33fd4cf63b678ce086ca82a9c18922 Mon Sep 17 00:00:00 2001 From: Lucas Gass Date: Fri, 20 Nov 2020 18:18:11 +0000 Subject: [PATCH] Bug 25267: Make shelfbrowser responsive This patch is an attempt to fix some of the problems with shelf browser at smaller screen sizes. Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work --- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 60 +++------------------- .../bootstrap/en/includes/shelfbrowser.inc | 56 +++++++++----------- 2 files changed, 31 insertions(+), 85 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 24f095c819..86de83bc51 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2071,63 +2071,19 @@ nav { } #shelfbrowser { - table { - margin: 0; + #browser_controls { + display: flex; + justify-content: space-between; + padding-top: 1em; + padding-bottom: 1em; } - table, - td, - th { - border: 0; - font-size: 90%; + .col-md-3 { text-align: center; } - td, - th { - padding: 3px 5px; - width: 20%; - - &.nav-cell { - padding: 0; - vertical-align: middle; - width: 1em; - } - } - - a { - display: block; - font-size: 110%; - font-weight: bold; - text-decoration: none; - - &.shelfbrowser_cover { - min-height: 80px; - min-width: 80px; - display: inline-block; - } - } - - #browser_previous { - a { - transform: rotate(-90deg); - white-space: nowrap; - - i { - padding: 0 .5em; - } - } - } - - #browser_next { - a { - transform: rotate(90deg); - white-space: nowrap; - - i { - padding: 0 .5em; - } - } + .no-image { + display: inline-block; } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc index 396470d977..27f099185e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc @@ -9,19 +9,21 @@ [%- IF ( starting_ccode ) %]Collection: [%- starting_ccode | html -%][% END -%] Close shelf browser (Hides shelf browser) - - - - - +
+
+ [% IF shelfbrowser_prev_item %] + Previous + [% END %] +
+
+ [% IF shelfbrowser_next_item %] + Next + [% END %] +
+
+
[% FOREACH item IN shelfbrowser_items %] -
+ [% END %] - - + - - [% FOREACH item IN shelfbrowser_items %] - - [% END %] - -
+
[% IF ( item.title ) %] [% img_title = item.title %] [% ELSE %] @@ -74,32 +76,20 @@ Cover image - [% END %] + [% END %] +
+
[% item.itemcallnumber | html %]
+ + [% INCLUDE 'biblio-title.inc' biblio=item %] + +
[% END %] -
- [% item.itemcallnumber | html %] - - [% INCLUDE 'biblio-title.inc' biblio=item %] - -
[% END # /IF OpenOPACShelfBrowser %] [% END # end of shelfbrowser block %] -- 2.11.0