From 0b845d3e845f621cce394145bc9ce5cb1875b1c4 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 5 Mar 2021 13:40:13 +0000 Subject: [PATCH] Bug 27814: (follow-up) Adjust container padding, button flow This patch makes minor changes to the SCSS so that the user summary page's DataTables button flow better at very narrow widths. Also, the main container should have less padding at narrow widths. --- koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 6 ++++- .../opac-tmpl/bootstrap/css/src/_responsive.scss | 27 +++++++++++----------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index 91d326a909..5f1bab6cff 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -299,11 +299,15 @@ textarea, } } +.dt-buttons { + display: flex; + flex-wrap: wrap; +} + .dt-button { background-color: transparent; border: 0; color: #0088cc; - display: inline-block; line-height: 20px; padding: 4px 12px; text-align: center; diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 3a8e28d9b3..f169fb7eaf 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -18,6 +18,7 @@ .input-fluid { width: 90%; } + } @media only screen and ( min-width: 342px ) and ( max-width: 479px ) { @@ -80,10 +81,6 @@ float: none; margin: 0; } - - .dt-buttons { - display: flex; - } } @media only screen and ( max-width: 608px ) { @@ -191,7 +188,7 @@ .main { @include border-radius-all( 0 ); margin: 0; - padding: 15px; + padding: 0; } .breadcrumb { @@ -207,6 +204,10 @@ font-weight: bold; } + .ui-tabs .ui-tabs-panel { + padding: .5em; + } + .ui-tabs-panel, .tabs-container, #topissues, @@ -268,14 +269,6 @@ #checkouts_filter { display: block; } - - .table_controls { - display: block; - - label { - display: block; - } - } } @media only screen and ( max-width: 700px ) { @@ -423,6 +416,14 @@ #wrapper { padding: 0; } + + .table_controls { + display: block; + + label { + display: block; + } + } } @media only screen and ( max-width: 800px ) { -- 2.11.0