@@ -, +, @@ responsiveness --- .../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(-) --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ a/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, --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ a/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; } --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc +++ a/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 %] --