From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 22 Nov 2023 17:22:46 +0000 (+0000)
Subject: Merge pull request #4296 from AntonKhorev/header-flex
X-Git-Tag: live~455
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/9026b84d844fce847820626b495d6c4fcaa55ea1?hp=5e90b569db1b0f09063d1eed0aada7a513b60dcb

Merge pull request #4296 from AntonKhorev/header-flex

Use flex container instead of floats in header
---

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index af67244bc..0bfff869e 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -103,6 +103,8 @@ $(document).ready(function () {
 
     $("body").removeClass("compact-nav");
 
+    $("header").removeClass("text-nowrap");
+
     updateHeader();
 
     $(window).resize(updateHeader);
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 6236d3c3d..a4b126b94 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -81,7 +81,9 @@ time[title] {
 
 #menu-icon {
   display: none;
-  float: right;
+  position: absolute;
+  top: 0;
+  right: 0;
   background: image-url("menu-icon.png") no-repeat;
   background-size: 30px 30px;
   width: 30px;
@@ -105,10 +107,6 @@ header {
     padding: $lineheight * 0.5;
   }
 
-  h1, nav.primary {
-    float: left;
-  }
-
   img.logo {
     margin-top: -2px;
   }
@@ -122,8 +120,11 @@ header {
   .btn {
     font-size: 14px;
   }
-}
 
+  nav.primary {
+    margin-right: auto;
+  }
+}
 
 nav.primary {
   & > .btn-group .btn-outline-primary {
@@ -158,9 +159,6 @@ nav.primary {
 }
 
 nav.secondary {
-  position: absolute;
-  right: 0;
-
   .nav-link {
     padding: 0.2rem;
     color: $darkgrey;
@@ -202,15 +200,8 @@ body.small-nav {
     display: block;
   }
 
-  nav.primary,
-  nav.secondary {
-    float: none !important;
-    position: relative;
-    display: block;
-    clear: both;
-  }
-
   header {
+    flex-direction: column;
     height: auto;
     min-height: $headerHeight;
     background: #fff;
@@ -231,6 +222,7 @@ body.small-nav {
   }
 
   nav.primary {
+    margin-right: 0;
     padding: 0;
 
     ul, li {
@@ -943,10 +935,9 @@ img.user_thumbnail {
 }
 
 img.user_thumbnail_tiny {
-  width: auto;
-  height: auto;
-  max-width: 25px;
-  max-height: 25px;
+  width: 25px;
+  height: 25px;
+  object-fit: contain;
 }
 
 /* General styles for action lists / subnavs */
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index fb5c01839..55f37782d 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,4 +1,4 @@
-<header class="closed clearfix">
+<header class="d-flex text-nowrap closed">
   <h1 class="m-0 fw-semibold">
     <a href="<%= root_path %>" class="text-black text-decoration-none geolink">
       <%= image_tag "osm_logo.png", :srcset => image_path("osm_logo.svg"), :alt => t("layouts.logo.alt_text"), :width => 30, :height => 30, :class => "logo" %>
@@ -80,7 +80,7 @@
       </li>
     </ul>
     <% if current_user && current_user.id %>
-      <div class='d-inline-flex dropdown user-menu logged-in clearfix'>
+      <div class='d-inline-flex dropdown user-menu logged-in'>
         <button class='dropdown-toggle btn btn-outline-secondary border-grey bg-white text-secondary px-2 py-1 flex-grow-1' type='button' data-bs-toggle='dropdown'>
           <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1") %>
           <%= render :partial => "layouts/inbox" %>