From e118479562184de1d8721aa169e756c0301e8f94 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 8 Nov 2021 12:57:41 +0000 Subject: [PATCH] Bug 27631: (follow-up) Modify logo CSS to give better alignment This patch modifies the CSS of the Koha logo and its container so that it more closely matches the previous version and so that alignment is handled better at various browser widths. To test, apply the patch and build the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). Check various pages in the staff interface to confirm that the position of the Koha logo is correct. Adjust your browser width to confirm that the alignment adapts at narrow widths. Test also on pages where the header search form can be expanded, e.g. Patrons -> [+] to expand search options. Or Acquisitions -> Orders search -> [+]. Confirm that logo alignment is correct on these pages too. Signed-off-by: David Nind Signed-off-by: Katrin Fischer Signed-off-by: Fridolin Somers --- .../prog/css/src/staff-global.scss | 62 ++++++++----------- 1 file changed, 26 insertions(+), 36 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 4e9bbb2115..61e41e4a94 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -333,22 +333,26 @@ form { h1 { font-size: 161.6%; font-weight: bold; - - &#logo { - border: 0 none; - float: left; - margin: .75em .3em .75em .7em; - padding: 0; - width: 180px; - } } #logo { - border: 0 none; - float: left; - margin: .75em .3em .75em .7em; - padding: 0; - width: 180px; + background: transparent url("../img/koha-logo-medium.png") no-repeat 50% 50%; + border: 0 none; + margin: 2rem 1rem; + padding: 0; + width: 180px; + + a { + border: 0; + cursor: pointer; + display: block; + height: 0 !important; + margin: 0; + overflow: hidden; + padding: 44px 0 0; + text-decoration: none; + width: 180px; + } } h2 { @@ -627,8 +631,8 @@ ol { .gradient { background-image: linear-gradient(to bottom, rgb(230, 240, 242) 1%, rgb(255, 255, 255) 99%); - display: inline-block; - width: 100%; + align-items: flex-start; + display: flex; } .cart-controls { @@ -2022,24 +2026,6 @@ i { } } - -#logo { - background: transparent url("../img/koha-logo-medium.png") no-repeat scroll 0%; - margin: .75em .3em .75em .7em; - - a { - border: 0; - cursor: pointer; - display: block; - height: 0 !important; - margin: 0; - overflow: hidden; - padding: 44px 0 0; - text-decoration: none; - width: 180px; - } -} - #closewindow { margin-top: 2em; text-align: center; @@ -4692,9 +4678,13 @@ div .suggestion_note { } } - div#logo { - float: none; - margin: auto; + .gradient { + align-items: center; + flex-direction: column; + } + + #logo { + margin: 1rem; } #marcPreview { -- 2.39.5