Attachment 161169 Details for Bug 25267 – Bug 25267: Impove shelf browser responsiveness

[patch] Bug 25267: Impove shelf browser responsiveness

Bug-25267-Impove-shelf-browser-responsiveness.patch (text/plain), 7.66 KB, created by Andreas Roussos on 2024-01-19 08:35:33 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Andreas Roussos

Created: 2024-01-19 08:35:33 UTC

Size: 7.66 KB

patch

obsolete

>From 94449abcf4eb9d0bac9f94e0c4dd37e681d2e5ac Mon Sep 17 00:00:00 2001
>From: Lucas Gass <lucas@bywatersolutions.com>
>Date: Thu, 2 Jun 2022 22:02:58 +0000
>Subject: [PATCH] Bug 25267: Impove shelf browser responsiveness
>
>Test plan:
>1. Turn on  OPACShelfBrowser.
>2. If youre using test data you will have to give some items call
>   numbers. I did: update items set itemcallnumber = 'acallnumber';
>3. It will also be best if you add some cover images.
>4. Go to an item detail page and Browse Shelf.
>5. The feature looks good until the viewport is about 1700px or less.
>6. Apply patch
>7. Regenerate OPAC CSS
>   (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface)
>8. Try the shelf browse at all screen sizes and make sure everything
>   still works.
>9. Test the controls (previous, next, and close), make sure they still
>   work
>
>Signed-off-by: David Nind <david@davidnind.com>
>Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
>---
> .../bootstrap/css/src/_responsive.scss        |  5 ++
> .../opac-tmpl/bootstrap/css/src/opac.scss     | 49 ++++--------------
> .../bootstrap/en/includes/shelfbrowser.inc    | 51 ++++++++-----------
> 3 files changed, 35 insertions(+), 70 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>index 5685a88fc0..617bf37072 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>@@ -341,6 +341,11 @@
>             display: block;
>         }
>     }
>+
>+    .shelfbrowser-inner {
>+        grid-template-columns: repeat(4, 1fr) !important;
>+    }
>+
> }
> 
> @media only screen and ( max-width: 800px ) {
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>index 809383f7c7..0921071088 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>@@ -2313,28 +2313,21 @@ nav {
> }
> 
> #shelfbrowser {
>-    table {
>-        margin: 0;
>+    .shelfbrowser-inner {
>+        display: grid;
>+        grid-template-columns: repeat(7, 1fr);
>+        grid-gap: 4px;
>     }
> 
>-    table,
>-    td,
>-    th {
>-        border: 0;
>-        font-size: 90%;
>+    .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;
>     }
> 
>-    td,
>-    th {
>-        padding: 3px 5px;
>-        width: 20%;
>-
>-        &.nav-cell {
>-            padding: 0;
>-            vertical-align: middle;
>-            width: 1em;
>-        }
>+    #browser_controls {
>+        display: flex;
>+        justify-content: space-between;
>     }
> 
>     a {
>@@ -2349,28 +2342,6 @@ nav {
>             min-width: 80px;
>         }
>     }
>-
>-    #browser_previous {
>-        a {
>-            transform: rotate( -90deg );
>-            white-space: nowrap;
>-
>-            i {
>-                padding: 0 .5em;
>-            }
>-        }
>-    }
>-
>-    #browser_next {
>-        a {
>-            transform: rotate( 90deg );
>-            white-space: nowrap;
>-
>-            i {
>-                padding: 0 .5em;
>-            }
>-        }
>-    }
> }
> 
> #holds {
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
>index 78c6139142..99304733e2 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
>@@ -10,18 +10,22 @@
>                 <a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]" class="close_shelf" >Close shelf browser <span class="sr-only">(Hides shelf browser)</span></a>
>             </h5>
> 
>-            <table class="table">
>-                <tr>
>-                    <td class="nav-cell" rowspan="2">
>-                      [% IF shelfbrowser_prev_item %]
>-                        <div id="browser_previous">
>-                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_prev_item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_prev_item.itemnumber | uri %]#shelfbrowser" data-prev-itemnumber="[% shelfbrowser_prev_item.itemnumber | html %]"><i class="fa fa-caret-up" aria-hidden="true"></i> Previous</a>
>-                        </div>
>-                      [% END %]
>-                    </td>
>+            <div id="browser_controls">
>+              [% IF shelfbrowser_prev_item %]
>+                <div id="browser_previous">
>+                    <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_prev_item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_prev_item.itemnumber | uri %]#shelfbrowser" data-prev-itemnumber="[% shelfbrowser_prev_item.itemnumber | html %]"><i class="fa fa-caret-left" aria-hidden="true"></i> Previous</a>
>+                </div>
>+              [% END %]
>+                [% IF shelfbrowser_next_item %]
>+                    <div id="browser_next">
>+                        <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_next_item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_next_item.itemnumber | uri %]#shelfbrowser" data-next-itemnumber="[% shelfbrowser_next_item.itemnumber | html %]">Next <i class="fa fa-caret-right" aria-hidden="true"></i></a>
>+                    </div>
>+                [% END %]
>+            </div>
>+                <div class="shelfbrowser-inner">
> 
>                     [% FOREACH item IN shelfbrowser_items %]
>-                        <td>
>+                        <div class="shelfbrowser-item">
>                             [% IF ( item.title ) %]
>                                 [% img_title = item.title %]
>                             [% ELSE %]
>@@ -80,29 +84,14 @@
>                                     [% 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>
>                             [% END %]
>-                        </td>
>-                    [% END %]
>-                    <td class="nav-cell" rowspan="2">
>-                        [% IF shelfbrowser_next_item %]
>-                            <div id="browser_next">
>-                                <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_next_item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_next_item.itemnumber | uri %]#shelfbrowser" data-next-itemnumber="[% shelfbrowser_next_item.itemnumber | html %]">Next <i class="fa fa-caret-up" aria-hidden="true"></i></a>
>-                            </div>
>-                        [% END %]
>-                    </td>
>-                </tr>
>-
>-                <tr>
>-                    [% FOREACH item IN shelfbrowser_items %]
>-                        <td class="top">
>-                            [% item.itemcallnumber | html %]
>-                            <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>
>-                        </td>
>+                        </div>
>                     [% END %]
>-                </tr>
>-            </table>
>+                </div>
>         </div>
>     [% END # /IF OpenOPACShelfBrowser %]
> [% END # end of shelfbrowser block %]
>-- 
>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