From c63b853d69b2db7738179100aafb1a075ed7cb71 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
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 <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
---
 .../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 714ad42e00..83ae99cae6 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -334,22 +334,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 {
@@ -628,8 +632,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 {
@@ -2020,24 +2024,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;
@@ -4734,9 +4720,13 @@ div .suggestion_note {
         }
     }
 
-    div#logo {
-        float: none;
-        margin: auto;
+    .gradient {
+        align-items: center;
+        flex-direction: column;
+    }
+
+    #logo {
+        margin: 1rem;
     }
 
     #marcPreview {
-- 
2.30.2