Bug 32341: (follow-up) Making the remains OPAC tables responsive

Apply the patch and check for the responsivity of the following tables
1- Go to the OPAC
2- Open mobile mode
3- The following tables are not responsive
- Summary - Clubs
- Summary - Recalls
- Summary - Article requests
- Charges - (relative's)
- Search history - Authority
- Checkout history - All
- Checkout history - Checkouts
- Checkout history - On-site
- Recalls history
- Messaging
- Subscription (serial)
- Course reserves - Courses
- Course reserves - Reserves
- Authority search results
4- Apply the patch
5- Execute 'yarn build --view opac'
6- Clean your cache or open your navigator on private mode (to load updated css files)
7- Perform previous step (1-3)
8- Confirm that the tables are now displayed correctly and is now responsive.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss

@@ -257,11 +257,11 @@
         display: block;
     }
 
-    #finestable tfoot tr {
+    table.finestable tfoot tr {
         display: flex !important;
         width: max-content;
     }
-    #finestable tfoot td, #finestable tfoot th {
+    table.finestable tfoot td, table.finestable tfoot th {
         display: flex !important;
     }
 }

koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc

@@ -1,7 +1,7 @@
 [% PROCESS 'accounts.inc' %]
 <form method="post" action="opac-account-pay.pl" class="form-horizontal">
     [% IF ( ACCOUNT_LINES ) %]
-        <table class="table table-bordered table-striped" id="finestable">
+        <table class="table table-bordered table-striped finestable" id="finestable">
             <caption class="sr-only">Your charges</caption>
             <thead>
                 <tr>
@@ -88,7 +88,7 @@
     [% FOREACH r IN relatives %]
         <h3 id="g[% r.patron.id | html %]">[% r.patron.firstname | html %] [% r.patron.surname | html %]'s fines and charges</h3>
 
-        <table class="table table-bordered table-striped" id="finestable-[% r.id | html %]">
+        <table class="table table-bordered table-striped finestable" id="finestable-[% r.id | html %]">
             <thead>
                 <tr>
                     [% IF ENABLE_OPAC_PAYMENTS %]<th>&nbsp;</th>[% END %]

koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt

@@ -12,6 +12,7 @@
                 <th>Description</th>
                 <th>Date enrolled</th>
                 <th>&nbsp;</th>
+                <th></th>
             </tr>
         </thead>
 
@@ -30,6 +31,7 @@
                             Contact your library to be disenrolled from this club.
                         [% END %]
                     </td>
+                    <td></td>
                 </tr>
             [% END %]
         </tbody>
@@ -46,6 +48,7 @@
                 <th>Name</th>
                 <th>Description</th>
                 <th>&nbsp;</th>
+                <th></th>
             </tr>
         </thead>
 
@@ -63,6 +66,7 @@
                             <span class="hint">You must have an email address to enroll</span>
                         [% END %]
                     </td>
+                    <td></td>
                 </tr>
             [% END %]
         </tbody>
@@ -98,4 +102,19 @@ function cancelEnrollment( id ) {
     });
     return false;
 }
+var Tables = $("#clubs-table-enrolled,#clubs-table-unenrolled");
+Tables.each(function(){
+    $(this).dataTable($.extend(true, {}, dataTablesDefaults, {
+        "searching": false,
+        "paging": false,
+        "info": false,
+        "autoWidth": false,
+        "responsive": {
+            "details": { "type": 'column',"target": -1 }
+        },
+        "columnDefs": [
+            { "className": 'dtr-control', "orderable": false, "targets": -1 }
+        ],
+    }));
+});
 </script>

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt

@@ -99,6 +99,10 @@ $( document ).ready(function() {
          "responsive": true,
     } ));
 
+    $('table[id^="finestable-"]').dataTable($.extend(true, {}, dataTablesDefaults, {
+        "responsive": true
+    } ));
+
     $("#filter_p").html('<p><a href="#" id="filter_paid"><i class="fa fa-filter" aria-hidden="true"></i> '+txtActivefilter+'</a>');
     $('#filter_paid').click(function(e) {
         e.preventDefault();

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt

@@ -96,11 +96,13 @@
                                     <caption class="sr-only">Authority search results</caption>
                                     <thead>
                                         <tr>
-                                            <th colspan="2">Authorized headings</th>
+                                            <th>Authorized headings</th>
+                                            <th></th>
                                             <th>Type of heading</th>
                                             [% UNLESS ( isEDITORS ) %]
                                                 <th>Records</th>
                                             [% END %]
+                                            <th></th>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -124,6 +126,7 @@
                                                         [% END %]
                                                     </td>
                                                 [% END %]
+                                                <td></td>
                                             </tr>
                                         [% END %]
                                     </tbody>
@@ -140,4 +143,22 @@
     </div> <!-- / .main -->
 
 [% INCLUDE 'opac-bottom.inc' %]
-[% BLOCK jsinclude %][% END %]
+[% BLOCK jsinclude %]
+    [% INCLUDE 'datatables.inc' %]
+    <script type="text/JavaScript">
+        $(document).ready(function(){
+            $('.table').dataTable($.extend(true, {}, dataTablesDefaults, {
+                "searching": false,
+                "paging": false,
+                "info": false,
+                "autoWidth": false,
+                "responsive": {
+                    "details": { "type": 'column',"target": -1 }
+                },
+                "columnDefs": [
+                    { "className": 'dtr-control', "orderable": false, "targets": -1 }
+                ],
+            }));
+        });
+    </script>
+[% END %]

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt

@@ -74,6 +74,7 @@
                                     <th>Date due</th>
                                     <th>Notes</th>
                                     <th>Link</th>
+                                    <th></th>
                                 </tr>
                             </thead>
 
@@ -105,6 +106,7 @@
                                                 <a href="[% cr.biblioitem.url | url %]">Record URL</a>
                                             [% END %]
                                         </td>
+                                        <td></td>
                                     </tr>
                                 [% END %]
                             </tbody>
@@ -134,7 +136,13 @@
                 "language": {
                     "search": "_INPUT_",
                     "searchPlaceholder": _("Search course reserves")
-                }
+                },
+                "responsive": {
+                    "details": { "type": 'column',"target": -1 }
+                },
+                "aoColumnDefs": [
+                    { "className": 'dtr-control', "orderable": false, "targets": -1 },
+                ],
             }, columns_settings );
         });
     </script>

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt

@@ -45,6 +45,7 @@
                                 <th>[% tp('Semester', 'Term') | html %]</th>
                                 <th>Instructors</th>
                                 <th>Notes</th>
+                                <th></th>
                             </tr>
                         </thead>
 
@@ -62,6 +63,7 @@
                                       [% END %]
                                     </td>
                                     <td>[% c.public_note | $raw %]</td>
+                                    <td></td>
                             [% END %]
                         </tbody>
                     </table>
@@ -87,7 +89,13 @@
                 "language": {
                     "search": "_INPUT_",
                     "searchPlaceholder": _("Search courses")
-                }
+                },
+                "responsive": {
+                    "details": { "type": 'column',"target": -1 }
+                },
+                "aoColumnDefs": [
+                    { "className": 'dtr-control', "orderable": false, "targets": -1 },
+                ],
             }, columns_settings );
         });
     </script>

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt

@@ -758,6 +758,7 @@
                                                         <th id="serial_planneddate" data-colname="serial_planneddate">Received date</th>
                                                         <th id="serial_status" data-colname="serial_status">Status</th>
                                                         <th id="serial_notes" data-colname="serial_notes">Note</th>
+                                                        <th></th>
                                                     </tr>
                                                 </thead>
                                                 <tbody>
@@ -770,6 +771,7 @@
                                                                 [% INCLUDE 'serial-status.inc' serial = latestserial %]
                                                             </td>
                                                             <td class="serial_notes">[% latestserial.notes | html %]</td>
+                                                            <td></td>
                                                         </tr>
                                                     [% END # / FOREACH latestserials %]
                                                 </tbody>
@@ -1740,31 +1742,26 @@
 
             KohaTable("#holdingst", {
                 dom: '<"clearfix">t',
-                "columnDefs": [
+                "aoColumnDefs": [
-                    { "targets": [ -1 ], "sortable": false, "searchable": false },
+                    { "className": "dtr-control", "orderable": false, "targets": -1 }
-                    ],
+                ],
                 "bKohaColumnsUseNames": true,
                 "autoWidth": false,
                 "responsive": {
-                    "details": {
+                    "details": { "type": 'column', "target": -1 }
-                        "type": 'column',
+                }
-                        "target": -1
-                    }
-                },
-                aoColumnDefs: [ {
-                    className:"dtr-control",
-                    orderable: false,
-                    targets:   [-1],
-                } ],
             }, columns_settings);
 
             KohaTable("#otherholdingst", {
                 dom: '<"clearfix">t',
-                "columnDefs": [
+                "aoColumnDefs": [
-                    { "targets": [ -1 ], "sortable": false, "searchable": false },
+                    { "className": "dtr-control", "orderable": false, "targets": -1 }
-                    ],
+                ],
                 "bKohaColumnsUseNames": true,
-                "autoWidth": false
+                "autoWidth": false,
+                "responsive": {
+                    "details": { "type": 'column', "target": -1 }
+                }
             }, columns_settings);
 
             var serial_column_settings = [% TablesSettings.GetColumns( 'opac', 'biblio-detail', 'subscriptionst', 'json' ) | $raw %];
@@ -1773,9 +1770,20 @@
                 dom: '<"clearfix">t',
                 "sorting": [[ 1, "desc" ]],
                 "autoWidth": false,
-                "bKohaColumnsUseNames": true
+                "bKohaColumnsUseNames": true,
+                "responsive": {
+                    "details": { "type": 'column', "target": -1 }
+                },
+                "aoColumnDefs": [
+                    { "className": "dtr-control", "orderable": false, "targets": -1 }
+                ],
             }, serial_column_settings);
 
+            var dTables = $("#holdingst,#subscriptionst,#otherholdingst");
+            $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+                dTables.DataTable().responsive.recalc();
+            } );
+
             [% IF ( TagsInputEnabled && loggedinusername ) %]
                     $(".tag_add").click(function(){
                         var thisid = $(this).attr("id");

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt

@@ -56,6 +56,7 @@
                                             [% IF Koha.Preference('PhoneNotification') %]<th>Phone</th>[% END %]
                                             <th>Email</th>
                                             <th>Digests only <i id="info_digests" data-toggle="tooltip" title="You can ask for a digest to reduce the number of messages. Messages will be saved and sent as a single message." data-placement="right" class="fa fa-info-circle"></i></th>
+                                            <th></th>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -171,6 +172,7 @@
                                             [% ELSE %]
                                             <td>-</td>
                                             [% END %]
+                                            <td></td>
 
                                         </tr>
                                     [% END # / FOREACH messaging_preferences%]
@@ -254,6 +256,7 @@
 
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
+    [% INCLUDE 'datatables.inc' %]
     <script>
         $(document).ready(function(){
             $("#info_digests").tooltip();
@@ -310,5 +313,16 @@
                 }, 100);
             });
         }
+        $('.table').dataTable($.extend(true, {}, dataTablesDefaults, {
+            "searching": false,
+            "paging": false,
+            "info": false,
+            "responsive": {
+                "details": { "type": 'column',"target": -1 }
+            },
+            "columnDefs": [
+                { "className": 'dtr-control', "orderable": false, "targets": -1 }
+            ],
+        }));
     </script>
 [% END %]

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt

@@ -112,6 +112,7 @@
                                                 [% IF ( OPACMySummaryHTML ) %]
                                                     <th class="NoSort noExport">Links</th>
                                                 [% END %]
+                                                <th></th>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -189,6 +190,7 @@
                                                 [% IF OPACMySummaryHTML %]
                                                     <td>[% issue.MySummaryHTML | $raw %]</td>
                                                 [% END %]
+                                                <td></td>
                                                 </tr>
                                             [% END # / FOREACH issue %]
                                         </tbody>
@@ -224,7 +226,15 @@
             "language": {
                 "search": "_INPUT_",
                 "searchPlaceholder": _("Search")
-            }
+            },
+            "responsive": {
+                "details": {"type": 'column',"target": -1}
+            },
+            "aoColumnDefs": [
+                { "className": "dtr-control","orderable": false,"targets": [-1] },
+                { "visible": false, "targets": [0]},
+                { "orderable": false, "targets": [1]}
+            ],
         }, columns_settings);
 
         $("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recalls.tt

@@ -41,6 +41,7 @@
                                             <th>Status</th>
                                             <th>Due date</th>
                                             <th class="nosort">&nbsp;</th>
+                                            <th></th>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -120,6 +121,7 @@
                                                         [% END %]
                                                     </td>
                                                 [% END %]
+                                                <td></td>
                                             </tr>
                                         </tbody>
                                     </table>
@@ -146,10 +148,14 @@
                     return confirmDelete(_("Are you sure you want to remove this recall?"));
                 });
                 $("#recalls-table").dataTable($.extend(true, {}, dataTablesDefaults, {
+                    "responsive": {
+                        "details": { "type": 'column', "target": -1 }
+                    },
                     "aoColumnDefs": [
                         { "aTargets": [ "nosort" ],"bSortable": false,"bSearchable": false },
                         { "sType": "anti-the", "aTargets" : [ "anti-the" ] },
-                        { "sType": "title-string", "aTargets" : [ "title-string" ] }
+                        { "sType": "title-string", "aTargets" : [ "title-string" ] },
+                        { "className": "dtr-control", "orderable": false, "targets": -1 }
                     ]
                 }));
             });

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt

@@ -289,7 +289,7 @@
             "dom": '<"top"<"table_entries"><"table_controls"fB>>t',
             "columnDefs": [
                 { "targets": [ 0 ], "sortable": false, "searchable": false },
-                {"className": 'dtr-control',"orderable": false,"targets":   -1}
+                { "className": 'dtr-control', "orderable": false, "targets": -1 }
             ],
             "language": {
                 "search": "_INPUT_",
@@ -297,13 +297,13 @@
             },
             "autoWidth": false,
             "responsive": {
-                details: {
+                "details": { "type": 'column',"target": -1 }
-                    type: 'column',
-                    target: -1
-                }
             },
         }));
 
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+            $(".historyt").DataTable().responsive.recalc();
+        });
         $(".CheckNone").click(function(e){
             e.preventDefault();
             var form = $(this).parents("form").get(0);

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt

@@ -852,6 +852,7 @@
                                                 <th>Pickup location</th>
                                                 <th>Status</th>
                                                 <th class="nosort">&nbsp;</th>
+                                                <th></th>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -907,6 +908,7 @@
                                                     [% END %]
                                                 </td>
                                             [% END %]
+                                            <td></td>
                                             </tr>
                                         </tbody>
                                     </table>
@@ -935,6 +937,7 @@
                                                     <th class="article-request-status">Status</th>
                                                     <th class="article-request-branchcode">Pickup library</th>
                                                     <th class="nosort article-request-cancel">&nbsp;</th>
+                                                    <th></th>
                                                 </tr>
                                             </thead>
 
@@ -1011,6 +1014,7 @@
                                                             <td class="article-request-cancel">
                                                                 <button data-title="[% ar.biblio.title | html %] [% ar.item.enumchron | html %]" data-article-request_id="[% ar.id | html %]" class="btn btn-sm btn-danger btn-delete-article-request"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</button>
                                                             </td>
+                                                            <td></td>
                                                         </tr>
                                                     [% END %]
                                             </tbody>
@@ -1207,7 +1211,8 @@
                     "columnDefs": [
                         { "targets": [ "nosort" ],"sortable": false,"searchable": false },
                         { "type": "anti-the", "targets" : [ "anti-the" ] },
-                        { "visible": false, "targets" : [ "hidden" ] }
+                        { "visible": false, "targets" : [ "hidden" ] },
+                        { "className": 'dtr-control', "orderable": false, "targets": -1 }
                     ],
                     "language": {
                         "search": "_INPUT_",
@@ -1220,11 +1225,6 @@
                             target: -1
                         }
                     },
-                    "columnDefs": [ {
-                        className: 'dtr-control',
-                        orderable: false,
-                        targets:   -1
-                    } ],
                     buttons: [
                         /* Override default button set so that we can extend the options of print and csv */
                         'clearFilter', 'copy',
@@ -1246,8 +1246,24 @@
                 }));
             });
 
+            var dataTables = $("#recalls-table,#article-requests-table");
+            dataTables.each(function(){
+                $(this).dataTable($.extend(true, {}, dataTablesDefaults, {
+                    "searching": false,
+                    "paging": false,
+                    "info": false,
+                    "autoWidth": false,
+                    "responsive": {
+                        "details": { "type": 'column',"target": -1 }
+                    },
+                    "columnDefs": [
+                        { "className": 'dtr-control', "orderable": false, "targets": -1 }
+                    ],
+                }));
+            });
             $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
                 dTables.DataTable().responsive.recalc();
+                dataTables.DataTable().responsive.recalc();
             } );
 
             $("body").on("click", "#buttons-ics", function(){