From 46554b3579bfb7ab582eba0d092959f2a7fdee74 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 29 Nov 2023 13:35:03 +0000 Subject: [PATCH] Bug 25267: (follow-up) Additional changes to improve responsiveness This patch adjusts the shelf browser markup a little bit and adds more responsive breakpoints for better accommodation of various browser widths. To test, apply the patch and rebuild the OPAC CSS and test the shelf browser at various browser widths. Signed-off-by: David Nind Signed-off-by: Andreas Roussos --- .../bootstrap/css/src/_responsive.scss | 21 ++++++++++++++----- .../opac-tmpl/bootstrap/css/src/opac.scss | 18 +++++++++++----- .../bootstrap/en/includes/shelfbrowser.inc | 10 +++++---- 3 files changed, 35 insertions(+), 14 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 617bf37072..2acf7a458e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -313,6 +313,14 @@ } } +@media only screen and ( min-width: 767px ) { + #shelfbrowser { + .shelfbrowser-inner { + grid-template-columns: repeat(5, 1fr); + } + } +} + @media only screen and ( max-width: 767px ) { /* Screens below 767 pixels wide */ a { @@ -341,11 +349,6 @@ display: block; } } - - .shelfbrowser-inner { - grid-template-columns: repeat(4, 1fr) !important; - } - } @media only screen and ( max-width: 800px ) { @@ -535,6 +538,14 @@ } } +@media only screen and ( min-width: 1040px ) { + #shelfbrowser { + .shelfbrowser-inner { + grid-template-columns: repeat(7, 1fr); + } + } +} + @media only screen and ( max-width: 1100px ) { .cartlabel, .cookieconsentlabel, diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index f348a64f6b..a728f306a1 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2315,14 +2315,22 @@ nav { #shelfbrowser { .shelfbrowser-inner { display: grid; - grid-template-columns: repeat(7, 1fr); grid-gap: 4px; + grid-template-columns: repeat( 3, 1fr ); } .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; + box-shadow: 0 2px 5px 0 rgba( 0,0,0,0.16 ),0 2px 10px 0 rgba( 0,0,0,0.12 ); + display: flex; + flex-direction: column; + padding: .5rem; + text-align: center; + } + + .shelfbrowser-details { + display: block; + font-size: 90%; } #browser_controls { @@ -2332,12 +2340,12 @@ nav { a { display: block; - font-size: calc(.75vw + 5px); font-weight: bold; text-decoration: none; &.shelfbrowser_cover { - display: inline-block; + display: block; + flex-grow: 1; min-height: 80px; min-width: 80px; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc index 99304733e2..32a01a075f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc @@ -84,10 +84,12 @@ [% END %] -
[% item.itemcallnumber | html %]
- - [% INCLUDE 'biblio-title.inc' biblio=item %] - +
+
[% item.itemcallnumber | html %]
+ + [% INCLUDE 'biblio-title.inc' biblio=item %] + +
[% END %] [% END %] -- 2.30.2