From 432df118f3826de5350483f5ef852ea7bc5694f3 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 --- .../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 6cf9316774..63b99767c0 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 ) { @@ -534,6 +537,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, .listslabel, diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 2389f5a2ca..552d3e6c0e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2312,14 +2312,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 { @@ -2329,12 +2337,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