From 38f5a904afe6058367eba035306c4eb4c826925c Mon Sep 17 00:00:00 2001 From: Owen Leonard 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. --- .../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 e6676fd76b..3a8e28d9b3 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; @@ -246,6 +264,18 @@ .no-image { display: none; } + + #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 5d4206a0c6..10561ad129 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt @@ -836,7 +836,7 @@