From f8a59adb6e9bff8f6191701f6051a6166c2f881c Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 12 Sep 2023 14:52:30 +0000
Subject: [PATCH] Bug 34730: Add responsive behavior to more tables in the OPAC

This patch adds responsiveness to several DataTables which were not
updated in 32341. The patch removes the CSS-based responsive styling
which was previously used for these tables.

This patch also adds some additional configuration to the tables on the
user home page so that the title column is always prioritized when
DataTables collapses columns in narrow views.

To test, apply the patch and rebuild the OPAC CSS. Ideally this should
be tested with a user who has checkouts, overdues, holds, tags, and a
checkout history.

- Log in to the OPAC and test the user summary page. Check that each
  table adjusts well to narrow browser widths. In each case the column
  containing the title should never be hidden no matter how narrow the
  window:
  - Checkouts
  - Relatives' checkouts (requires that the user is a guarantor for a
    patron with checkouts and that the guarantee's account is set up to
    show checkouts to the guarantor).
  - Overdues
  - Holds
  - Article requests

The new places the responsive DataTables extension is being used:

- Checkout history
- Suggestions
- Tags (in the table of user-submitted tags)
- Most popular

Again, in each case the table should be responsive and the title column
should be prioritized so that it doesn't get hidden at narrow page
widths.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
---
 .../bootstrap/css/src/_responsive.scss        | 29 -------------------
 .../en/modules/opac-readingrecord.tt          |  2 +-
 .../bootstrap/en/modules/opac-suggestions.tt  | 17 +++++++++--
 .../bootstrap/en/modules/opac-tags.tt         | 17 +++++++++--
 .../bootstrap/en/modules/opac-topissues.tt    | 16 ++++++++--
 .../bootstrap/en/modules/opac-user.tt         | 10 +++----
 6 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index 26f7f9b20f..9085c7ddb5 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -200,40 +200,11 @@
             margin: .5em 0 0 .5em;
         }
 
-        .table-bordered {
-            border: 0;
-        }
-
         .table {
-            width: 100%;
-
-            th,
-            thead {
-                display: none;
-            }
-
-            td {
-                border: 0;
-                display: block;
-                padding: .4em .3em;
-            }
-
             p {
                 margin-bottom: 2px;
             }
         }
-
-        tr {
-            display: block;
-
-            td:first-child {
-                border-top: 0;
-            }
-
-            td:last-child {
-                border-bottom: 0;
-            }
-        }
     }
 
     .cart-actions {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
index 4d730e3b9b..947561e9ae 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
@@ -119,7 +119,7 @@
             <tr>
                 <th style="display:none;" class="noExport">Type</th>
                 <th class="NoSort noExport"></th>
-                <th class="anti-the">Title</th>
+                <th class="all anti-the">Title</th>
                 <th>Author</th>
                 <th>Item type</th>
                 <th>Call number</th>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
index c2d21651a6..da92b75578 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
@@ -401,12 +401,13 @@
                                         <thead>
                                             <tr>
                                                 [% IF ( loggedinusername ) %]<th>&nbsp;</th>[% END %]
-                                                <th>Summary</th>
+                                                <th class="all">Summary</th>
                                                 <th>Suggested on</th>
                                                 <th>Note</th>
                                                 [% IF Koha.Preference( 'OPACViewOthersSuggestions' ) == 1 %]<th>Suggested for</th>[% END %]
                                                 [% IF Koha.Preference( 'OpacSuggestionManagedBy' ) %]<th>Managed by</th>[% END %]
                                                 <th>Status</th>
+                                                <th></th>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -475,6 +476,7 @@
                                                         [% ELSE %] [% AuthorisedValues.GetByCode( 'SUGGEST_STATUS', suggestion.STATUS, 1 ) | html %] [% END %]
                                                         [% IF ( suggestion.reason ) %]([% suggestion.reason | html %])[% END %]
                                                     </td>
+                                                    <td></td>
                                                 </tr>
                                             [% END # / FOREACH suggestions %]
                                         </tbody>
@@ -565,7 +567,9 @@
             "order": [[ 1, "asc" ]],
             "autoWidth": false,
             "columnDefs": [
-              [% IF ( loggedinusername ) %]{ "targets": [ 0 ], "sortable": false, "searchable": false }[% END %]
+              [% IF ( loggedinusername ) %]{ "targets": [ 0 ], "sortable": false, "searchable": false }[% END %],
+                { "className": 'dtr-control', "orderable": false, "targets": -1 },
+                { responsivePriority: 1, targets: 1 }
             ],
             "columns": [
                 [% IF ( loggedinusername ) %]null,[% END %]
@@ -574,8 +578,15 @@
                 null,
                 [% IF Koha.Preference( 'OPACViewOthersSuggestions' ) == 1 %]null,[% END %]
                 [% IF Koha.Preference( 'OpacSuggestionManagedBy' ) %]null,[% END %]
+                null,
                 null
-            ]
+            ],
+            "responsive": {
+                details: {
+                    type: 'column',
+                    target: -1
+                }
+            },
         }));
         [% IF ( loggedinusername ) %]$("span.clearall").html("<a id=\"CheckNone\" class=\"btn btn-link btn-sm\" href=\"#\">"+_("Clear all")+"<\/a>");
         $("span.checkall").html("<a id=\"CheckAll\" class=\"btn btn-link btn-sm\" href=\"#\">"+_("Select all")+"<\/a>");
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt
index 60319529e6..87e4d00045 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt
@@ -139,8 +139,9 @@
                                     <tr>
                                         <th>&nbsp;</th>
                                         <th>Term</th>
-                                        <th class="anti-the">Title</th>
+                                        <th class="all anti-the">Title</th>
                                         <th>Date added</th>
+                                        <th></th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -175,6 +176,7 @@
                                                 <span class="tdlabel">Date added:</span>
                                                 [% MY_TAG.date_created | $KohaDates %]
                                             </td>
+                                            <td></td>
                                         </tr>
                                         [% END %]
                                     [% END %]
@@ -215,10 +217,19 @@
 
         $("#mytagst").dataTable($.extend(true, {}, dataTablesDefaults, {
             "sorting": [[ 2, "asc" ]],
+            "autoWidth": false,
             "columnDefs": [
                 { "targets": [ 0 ], "sortable": false, "searchable": false },
-                { "sType": "anti-the", "aTargets" : [ "anti-the" ] }
-            ]
+                { "sType": "anti-the", "aTargets" : [ "anti-the" ] },
+                { "className": 'dtr-control', "orderable": false, "targets": -1 },
+                { responsivePriority: 1, targets: 2 }
+            ],
+            "responsive": {
+                details: {
+                    type: 'column',
+                    target: -1
+                }
+            },
         }));
     });
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt
index 6c4b668be8..602633a9c6 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt
@@ -87,13 +87,14 @@
                                 </caption>
                                 <thead>
                                     <tr>
-                                        <th class="anti-the">Title</th>
+                                        <th class="all anti-the">Title</th>
                                         <th>Item type</th>
                                         <th>Collection</th>
                                         <th>Checkouts</th>
                                         [% IF Koha.Preference( 'opacuserlogin' ) == 1 %]
                                             <th class="NoSort">&nbsp;</th>
                                         [% END %]
+                                        <th></th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -132,6 +133,7 @@
                                                     [% END %]
                                                 </td>
                                             [% END %]
+                                            <td></td>
                                         </tr>
                                     [% END %]
                                 </tbody>
@@ -151,11 +153,19 @@
     <script>
         $(function() {
             $("#topissuest").dataTable($.extend(true, {}, dataTablesDefaults, {
+                "autoWidth": false,
                 "sorting": [[3, "desc"]],
                 "columnDefs": [
                     { "sortable": false, "searchable": false, 'targets': [ 'NoSort' ] },
-                    { "type": "anti-the", "targets" : [ "anti-the" ] }
-                ]
+                    { "type": "anti-the", "targets" : [ "anti-the" ] },
+                    { "className": 'dtr-control', "orderable": false, "targets": -1 },
+                ],
+                "responsive": {
+                    details: {
+                        type: 'column',
+                        target: -1
+                    }
+                },
             }));
         });
         function Dopop(link) {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
index d5b7835543..7ce019a54d 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
@@ -328,7 +328,7 @@
                                             <thead>
                                                 <tr>
                                                     [% IF ( JacketImages ) %]<th class="nosort">&nbsp;</th>[% END %]
-                                                    <th class="anti-the">Title</th>
+                                                    <th class="all anti-the">Title</th>
                                                     <th>Author</th>
                                                     <th class="psort">Due</th>
                                                     [% UNLESS ( item_level_itypes ) %]
@@ -669,7 +669,7 @@
                                         <caption class="sr-only">Relatives' checkouts</caption>
                                         <thead>
                                             <tr>
-                                                <th class="anti-the">Title</th>
+                                                <th class="all anti-the">Title</th>
                                                 <th>Due</th>
                                                 <th>Barcode</th>
                                                 <th>Call number</th>
@@ -720,7 +720,7 @@
                                         <thead>
                                             <tr>
                                                 [% IF ( JacketImages ) %]<th class="nosort">&nbsp;</th>[% END %]
-                                                <th class="anti-the">Title</th>
+                                                <th class="all anti-the">Title</th>
                                                 [% UNLESS ( item_level_itypes ) %]<th>Item type</th> [% END %]
                                                 [% IF ( show_barcode ) %]<th>Barcode</th>[% END %]
                                                 <th>Call number</th>
@@ -849,7 +849,7 @@
                                         <caption>Recalls <span class="count">([% RECALLS.count | html %])</span></caption>
                                         <thead>
                                             <tr>
-                                                <th class="anti-the">Title</th>
+                                                <th class="all anti-the">Title</th>
                                                 <th class="psort">Placed on</th>
                                                 <th>Expires on</th>
                                                 <th>Pickup location</th>
@@ -925,7 +925,7 @@
                                             <caption>Article requests <span class="count"></span></caption>
                                             <thead>
                                                 <tr>
-                                                    <th class="anti-the article-request-record-title">Record title</th>
+                                                    <th class="all anti-the article-request-record-title">Record title</th>
                                                     <th class="psort article-request-created-on">Placed on</th>
                                                     <th class="anti-the article-request-title">Title</th>
                                                     <th class="article-request-author">Author</th>
-- 
2.30.2