From c454c2cc0945379fdc243dc060f74fff1175cb49 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 Signed-off-by: Katrin Fischer Signed-off-by: Tomas Cohen Arazi Signed-off-by: Kyle M Hall --- .../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 26f7f9b20f0..9085c7ddb56 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 4d730e3b9ba..947561e9ae6 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 @@ Type - Title + Title Author Item type Call number 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 c2d21651a61..da92b75578a 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 @@ [% IF ( loggedinusername ) %] [% END %] - Summary + Summary Suggested on Note [% IF Koha.Preference( 'OPACViewOthersSuggestions' ) == 1 %]Suggested for[% END %] [% IF Koha.Preference( 'OpacSuggestionManagedBy' ) %]Managed by[% END %] Status + @@ -475,6 +476,7 @@ [% ELSE %] [% AuthorisedValues.GetByCode( 'SUGGEST_STATUS', suggestion.STATUS, 1 ) | html %] [% END %] [% IF ( suggestion.reason ) %]([% suggestion.reason | html %])[% END %] + [% END # / FOREACH suggestions %] @@ -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(""+_("Clear all")+"<\/a>"); $("span.checkall").html(""+_("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 60319529e66..87e4d00045d 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 @@   Term - Title + Title Date added + @@ -175,6 +176,7 @@ Date added: [% MY_TAG.date_created | $KohaDates %] + [% 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 6c4b668be8a..602633a9c61 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 @@ - Title + Title Item type Collection Checkouts [% IF Koha.Preference( 'opacuserlogin' ) == 1 %]   [% END %] + @@ -132,6 +133,7 @@ [% END %] [% END %] + [% END %] @@ -151,11 +153,19 @@