From 119316621915a92579b97bcf2e2d86fb9b0a40a3 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>
---
 .../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 9085c7ddb5..6cf9316774 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 33aaf5054b..e59a0a1e5f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2310,28 +2310,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 {
@@ -2346,28 +2339,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