From bcbe311400f24af1910e2c52999611b78777d6c9 Mon Sep 17 00:00:00 2001 From: Lucas Gass Date: Thu, 2 Jun 2022 22:02:58 +0000 Subject: [PATCH] Bug 25267: Impove shelf browser responsiveness 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 Signed-off-by: David Nind --- .../bootstrap/css/src/_responsive.scss | 5 ++ .../opac-tmpl/bootstrap/css/src/opac.scss | 49 ++++-------------- .../bootstrap/en/includes/shelfbrowser.inc | 51 ++++++++----------- 3 files changed, 35 insertions(+), 70 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 5685a88fc0..617bf37072 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -341,6 +341,11 @@ display: block; } } + + .shelfbrowser-inner { + grid-template-columns: repeat(4, 1fr) !important; + } + } @media only screen and ( max-width: 800px ) { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 809383f7c7..0921071088 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2313,28 +2313,21 @@ nav { } #shelfbrowser { - table { - margin: 0; + .shelfbrowser-inner { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-gap: 4px; } - table, - td, - th { - border: 0; - font-size: 90%; + .shelfbrowser-item { text-align: center; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + border-radius: 4px; } - td, - th { - padding: 3px 5px; - width: 20%; - - &.nav-cell { - padding: 0; - vertical-align: middle; - width: 1em; - } + #browser_controls { + display: flex; + justify-content: space-between; } a { @@ -2349,28 +2342,6 @@ nav { min-width: 80px; } } - - #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; - } - } - } } #holds { diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc index 78c6139142..99304733e2 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc @@ -10,18 +10,22 @@ Close shelf browser (Hides shelf browser) - - - +
+ [% IF shelfbrowser_prev_item %] + + [% 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 %] @@ -80,29 +84,14 @@ [% 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.30.2