Bugzilla – Attachment 152026 Details for
Bug 32341
Some OPAC tables are not displayed well in mobile mode
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 32341: (follow-up) Making the remains OPAC tables responsive
Bug-32341-follow-up-Making-the-remains-OPAC-tables.patch (text/plain), 27.08 KB, created by
David Cook
on 2023-06-06 02:21:08 UTC
(
hide
)
Description:
Bug 32341: (follow-up) Making the remains OPAC tables responsive
Filename:
MIME Type:
Creator:
David Cook
Created:
2023-06-06 02:21:08 UTC
Size:
27.08 KB
patch
obsolete
>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
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=152026">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 32341
:
144221
|
144546
|
144768
|
144808
|
145159
|
146294
|
146746
|
146747
|
149986
|
150321
|
150707
|
150708
|
150709
|
150710
|
150711
|
150712
|
152023
|
152024
|
152025
|
152026
|
152027
|
152028
|
152164
|
152165
|
152166
|
152167
|
152168
|
152169