From 64776c9d015684ceb966225e3ba2be05c9778b12 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     | 50 ++++--------------
 .../bootstrap/en/includes/shelfbrowser.inc    | 51 ++++++++-----------
 3 files changed, 36 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 0e5f462fbf..f0e9a4063e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -392,6 +392,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 747251450f..c7dcd7cbd2 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2293,28 +2293,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 {
@@ -2330,27 +2323,6 @@ nav {
         }
     }
 
-    #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 84f2b3082c..5cc4b33542 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