Attachment 120032 Details for Bug 27814 – Bug 27814: Improve responsive behavior of the user page in the OPAC

[patch] Bug 27814: Improve responsive behavior of the user page in the OPAC

Bug-27814-Improve-responsive-behavior-of-the-user-.patch (text/plain), 4.56 KB, created by Katrin Fischer on 2021-04-22 21:57:07 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Katrin Fischer

Created: 2021-04-22 21:57:07 UTC

Size: 4.56 KB

patch

obsolete

>From 2e2efdcf7349456fe00ddfea94c88b09df8cdc85 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Fri, 26 Feb 2021 19:12:53 +0000
>Subject: [PATCH] Bug 27814: Improve responsive behavior of the user page in
> the OPAC
>
>This patch makes minor changes to OPAC CSS in order to improve the way
>the logged-in user's "your account" page works at narrower browser
>widths.
>
>To test, apply the patch and rebuild the OPAC CSS
>(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
>
> - Log in to the OPAC as a user who has multiple checkouts.
> - Test the page at various browser widths, from > 1200 pixels wide to <
>   300 pixels wide. Your browser's built-in responsive design mode,
>   found in developer tools, can make these measurements easier.
> - At "phone-size" width the tabs ("Checked out," "Overdue," etc) should
>   start displaying full-width.
> - The DataTable controls at the top of the checkouts table should
>    adapt well as the browser width changes.
> - At narrower widths the tables on this page should display much better
>   than they did before the patch: They should expand to fit the width
>   of the page.
>
>Edit: Tweaked the display property of the table search field at narrower
>browser widths; Converted iCal download link to button to match other
>elements in the toolbar.
>
>Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
>
>Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
>---
> .../opac-tmpl/bootstrap/css/src/_responsive.scss   | 30 ++++++++++++++++++++++
> .../opac-tmpl/bootstrap/en/modules/opac-user.tt    |  9 +++++--
> 2 files changed, 37 insertions(+), 2 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>index aadfecc77a..60f42f4dda 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>@@ -68,6 +68,22 @@
>     .search_operator {
>         text-align: center;
>     }
>+
>+    .ui-tabs .ui-tabs-nav {
>+        padding: 0;
>+    }
>+
>+    .ui-tabs .ui-tabs-nav li,
>+    .ui-tabs .ui-tabs-nav li a,
>+    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
>+        display: block;
>+        float: none;
>+        margin: 0;
>+    }
>+
>+    .dt-buttons {
>+        display: flex;
>+    }
> }
> 
> @media only screen and ( max-width: 608px ) {
>@@ -205,6 +221,8 @@
>         }
> 
>         .table {
>+            width: 100%;
>+
>             th,
>             thead {
>                 display: none;
>@@ -250,6 +268,18 @@
>     .search-term-input {
>         margin-bottom: 5px;
>     }
>+
>+    #checkouts_filter {
>+        display: block;
>+    }
>+
>+    .table_controls {
>+        display: block;
>+
>+        label {
>+            display: block;
>+        }
>+    }
> }
> 
> @media only screen and ( max-width: 700px ) {
>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 24b7adaf33..f08d23279f 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>@@ -832,7 +832,7 @@
>     <script>
>         function tableInit( tableId ){
>             if( tableId == "checkoutst" ){
>-                $(".dt-buttons").append("<a class=\"dt-button buttons-ical\" href=\"opac-ics.pl\">iCal</a> ");
>+                $(".dt-buttons").append("<button type=\"button\" class=\"dt-button buttons-ical\" id=\"buttons-ics\">iCal</button> ");
>                 [% IF ( OpacRenewalAllowed && canrenew && !userdebarred ) %]
>                     $(".dt-buttons").append("<button id=\"renewselected_link\" class=\"dt-button buttons-renew\"><i class=\"fa fa-check\" aria-hidden=\"true\"></i> "+_("Renew selected")+"</button> <button id=\"renewall_link\" class=\"dt-button buttons-renewall\"><span class=\"fa-stack\"><i class=\"fa fa-check fa-stack-1x\" aria-hidden=\"true\"></i><i class=\"fa fa-check fa-stack-1x\" aria-hidden=\"true\"></i></span> "+_("Renew all")+"</button>");
>                 [% END %]
>@@ -907,10 +907,15 @@
>                     "language": {
>                         "search": "_INPUT_",
>                         "searchPlaceholder": _("Search")
>-                    }
>+                    },
>+                    "autoWidth": false
>                 }));
>             });
> 
>+            $("body").on("click", "#buttons-ics", function(){
>+                location.href="/cgi-bin/koha/opac-ics.pl";
>+            });
>+
>             [% IF ( GoogleJackets ) %]KOHA.Google.GetCoverFromIsbn();[% END %]
>             [% IF ( OpacRenewalAllowed && canrenew && !userdebarred ) %]
>                 $("#renewselected").submit(function(){
>-- 
>2.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 27814: 117397 | 117737 | 117753 | 117854 | 118332 | 119844 | 119845 | 120032 | 120033