From 4a3145d65a434e98a7a2cf4e5a9ea05087336db7 Mon Sep 17 00:00:00 2001 From: Hammat Wele <hammat.wele@inlibro.com> Date: Mon, 6 Feb 2023 18:06:26 +0000 Subject: [PATCH] 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> --- .../bootstrap/css/src/_responsive.scss | 4 +- .../bootstrap/en/includes/account-table.inc | 4 +- .../bootstrap/en/modules/clubs/clubs-tab.tt | 19 ++++++++ .../bootstrap/en/modules/opac-account.tt | 4 ++ .../opac-authoritiessearchresultlist.tt | 25 ++++++++++- .../en/modules/opac-course-details.tt | 10 ++++- .../en/modules/opac-course-reserves.tt | 10 ++++- .../bootstrap/en/modules/opac-detail.tt | 44 +++++++++++-------- .../bootstrap/en/modules/opac-messaging.tt | 14 ++++++ .../en/modules/opac-readingrecord.tt | 12 ++++- .../bootstrap/en/modules/opac-recalls.tt | 8 +++- .../en/modules/opac-search-history.tt | 10 ++--- .../bootstrap/en/modules/opac-user.tt | 28 +++++++++--- 13 files changed, 153 insertions(+), 39 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 791a4d71f0..07359bec3f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/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; } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc index 71a8de27da..f0d85e087a 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc +++ b/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> </th>[% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt index b18cd068d4..162189c8da 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt @@ -12,6 +12,7 @@ <th>Description</th> <th>Date enrolled</th> <th> </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> </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> diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt index 2dec22c620..8786a6fc31 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt +++ b/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(); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt index 20cd6545ff..d02d8f09e6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt +++ b/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 %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt index 19700c6e7d..42df1cef2e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt +++ b/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> diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt index c0437f0250..0b5e0aabf3 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt +++ b/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> diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt index 0f731ae8c4..7646e67cf4 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt +++ b/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": [ - { "targets": [ -1 ], "sortable": false, "searchable": false }, - ], + "aoColumnDefs": [ + { "className": "dtr-control", "orderable": false, "targets": -1 } + ], "bKohaColumnsUseNames": true, "autoWidth": false, "responsive": { - "details": { - "type": 'column', - "target": -1 - } - }, - aoColumnDefs: [ { - className:"dtr-control", - orderable: false, - targets: [-1], - } ], + "details": { "type": 'column', "target": -1 } + } }, columns_settings); KohaTable("#otherholdingst", { dom: '<"clearfix">t', - "columnDefs": [ - { "targets": [ -1 ], "sortable": false, "searchable": false }, - ], + "aoColumnDefs": [ + { "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"); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt index 863e56664b..cf3dd4c555 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt +++ b/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 %] 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 7277a12824..528e6bc836 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt +++ b/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) { diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recalls.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recalls.tt index 833befc69d..c523cc9fda 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recalls.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recalls.tt @@ -41,6 +41,7 @@ <th>Status</th> <th>Due date</th> <th class="nosort"> </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 } ] })); }); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt index a6e9347072..135d9c2ebf 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt +++ b/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: { - type: 'column', - target: -1 - } + "details": { "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); 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 b7df2e6f82..4703e89c33 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt @@ -852,6 +852,7 @@ <th>Pickup location</th> <th>Status</th> <th class="nosort"> </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"> </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(){ -- 2.30.2