From a1a64b11db2f0a5f7e859afb274a365610680536 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 60f42f4dda..ad2013e717 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, @@ -272,14 +273,6 @@ #checkouts_filter { display: block; } - - .table_controls { - display: block; - - label { - display: block; - } - } } @media only screen and ( max-width: 700px ) { @@ -424,6 +417,14 @@ #wrapper { padding: 0; } + + .table_controls { + display: block; + + label { + display: block; + } + } } @media only screen and ( max-width: 800px ) { -- 2.11.0