From 87b5fca409e77ab33843e0dcd96ae6b4ae3a6279 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. --- .../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