Attachment 160939 Details for Bug 25267 – Bug 25267: (follow-up) Additional changes to improve responsiveness

[patch] Bug 25267: (follow-up) Additional changes to improve responsiveness

Bug-25267-follow-up-Additional-changes-to-improve-.patch (text/plain), 4.59 KB, created by Owen Leonard on 2024-01-12 12:04:06 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2024-01-12 12:04:06 UTC

Size: 4.59 KB

patch

obsolete

>From cc92d52f16c89965c04727ebb0e282536177c7de Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>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 <david@davidnind.com>
>---
> .../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 %]
> 
>                                 </a>
>-                                <div class="shelfbrowser-callnumber">[% item.itemcallnumber | html %]</div>
>-                                <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% item.itemnumber | uri %]#shelfbrowser">
>-                                    [% INCLUDE 'biblio-title.inc' biblio=item %]
>-                                </a>
>+                                <div class="shelfbrowser-details">
>+                                    <div class="shelfbrowser-callnumber">[% item.itemcallnumber | html %]</div>
>+                                    <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% item.itemnumber | uri %]#shelfbrowser">
>+                                        [% INCLUDE 'biblio-title.inc' biblio=item %]
>+                                    </a>
>+                                </div>
>                             [% END %]
>                         </div>
>                     [% END %]
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 25267: 113901 | 114242 | 135632 | 135634 | 143876 | 143877 | 143927 | 159334 | 159368 | 159369 | 159370 | 160937 | 160938 | 160939 | 161169 | 161170 | 161171 | 161174 | 161175 | 161176 | 161233 | 161234