From f5fd1c86664511dcc8e2d58d951a32d755e4defb 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
---
 .../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 58c80143af..ab1962b2a1 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -390,6 +390,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 63434d3cbf..e00100d086 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2270,28 +2270,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 {
@@ -2306,28 +2299,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 51c89e767f..24c7e77290 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