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>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index aadfecc..60f42f4 100644 (file)
--- 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 24b7ada..f08d232 100644 (file)
--- 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(){