Bugzilla – Attachment 155566 Details for
Bug 34730
Add responsive behavior to more tables in the OPAC
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 34730: Add responsive behavior to more tables in the OPAC
Bug-34730-Add-responsive-behavior-to-more-tables-i.patch (text/plain), 14.79 KB, created by
Lucas Gass (lukeg)
on 2023-09-12 17:43:36 UTC
(
hide
)
Description:
Bug 34730: Add responsive behavior to more tables in the OPAC
Filename:
MIME Type:
Creator:
Lucas Gass (lukeg)
Created:
2023-09-12 17:43:36 UTC
Size:
14.79 KB
patch
obsolete
>From 96de6059b8a2e1b1166877c771299ae47852b79e 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> >--- > .../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> </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> </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"> </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"> </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"> </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
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 34730
:
155279
|
155557
|
155566
|
155909
|
156090