From 37646e6dc7c5bbdec30d47d0d8be4416ac39b466 Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Mon, 28 Jul 2025 23:30:59 +0200
Subject: [PATCH] Move more styling from CSS to Bootstrap

---
 app/assets/stylesheets/common.scss | 62 +++++++-----------------------
 app/views/layouts/_header.html.erb | 10 ++---
 app/views/layouts/_search.html.erb |  4 +-
 app/views/layouts/map.html.erb     |  4 +-
 4 files changed, 23 insertions(+), 57 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 00c6211c2..cf1eba417 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -67,14 +67,10 @@ time[title] {
 
 /* Rules for the header */
 
-#menu-icon {
-  display: none;
+#menu-icon svg {
+  fill: var(--bs-emphasis-color);
+  stroke: var(--bs-body-bg);
   opacity: 0.6;
-
-  svg {
-    fill: var(--bs-emphasis-color);
-    stroke: var(--bs-body-bg);
-  }
 }
 
 header {
@@ -153,12 +149,7 @@ nav.primary, nav.secondary {
 }
 
 body.small-nav {
-  #menu-icon {
-    display: block;
-  }
-
   header {
-    flex-direction: column;
     height: auto;
     min-height: $headerHeight;
 
@@ -166,35 +157,22 @@ body.small-nav {
       display: none !important;
     }
 
-    .search_forms {
-      display: block;
-    }
-
     .username {
       max-width: unset;
     }
   }
 
-  #sidebar .search_forms {
-    display: none;
-  }
-
   nav.primary {
-    margin-right: 0;
     padding: 0;
 
     #edit_tab {
-      width: 100%;
       padding: 10px;
     }
   }
 
   nav.secondary {
-    flex-direction: column;
-
     > ul {
       height: auto;
-      justify-content: center;
     }
 
     .user-menu, .login-menu {
@@ -206,16 +184,11 @@ body.small-nav {
     display: none;
   }
 
-  .compact-hide {
-    display: inline-block;
-  }
-
-  .overlay-sidebar #sidebar .welcome {
-    display: none;
-  }
-
-  .overlay-sidebar #sidebar #banner {
-    display: none;
+  .overlay-sidebar #sidebar {
+    .welcome,
+    #banner {
+      display: block;
+    }
   }
 }
 
@@ -310,14 +283,11 @@ body.small-nav {
     height: auto;
     overflow: hidden;
 
+    .welcome,
     #banner {
       display: block;
     }
 
-    .welcome {
-      display: block;
-    }
-
     .sidebar-close-controls,
     #sidebar_loader,
     #sidebar_content {
@@ -325,17 +295,14 @@ body.small-nav {
     }
   }
 
-  .welcome {
-    display: none;
-  }
-
+  .welcome,
   #banner {
     display: none;
+  }
 
-    img {
-      display: block;
-      width: $sidebarWidth;
-    }
+  #banner img {
+    display: block;
+    width: $sidebarWidth;
   }
 
   #map {
@@ -536,7 +503,6 @@ legend {
 
 /* Rules for the search and direction forms */
 
-header .search_forms,
 .directions_form {
   display: none;
 }
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index cff106bb6..7bb27f737 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,17 +1,17 @@
-<header class="d-flex bg-body text-nowrap closed z-3">
+<header class="d-flex bg-body flex-column flex-md-row text-nowrap closed z-3">
   <h1 class="d-flex m-0 align-items-center fw-semibold">
     <a href="<%= root_path %>" class="icon-link gap-1 me-auto text-body-emphasis text-decoration-none geolink">
       <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text"), :size => 30 %>
       <%= t "layouts.project_name.h1" %>
     </a>
     <%= render "layouts/select_language_button", :extra_classes => ["border-secondary border-opacity-10 d-md-none"] %>
-    <a href="#" id="menu-icon">
+    <a href="#" id="menu-icon" class="d-md-none">
       <%= inline_svg_tag "menu-icon.svg", :size => "30px" %>
     </a>
   </h1>
   <nav class='primary'>
     <%= content_for :header %>
-    <div id="edit_tab" class="btn-group">
+    <div id="edit_tab" class="btn-group w-100">
       <%= link_to t("layouts.edit"),
                   edit_path,
                   :class => "btn btn-outline-primary geolink editlink",
@@ -30,8 +30,8 @@
       </ul>
     </div>
   </nav>
-  <nav class='secondary d-flex gap-2 flex-grow-1 align-items-center'>
-    <ul id='secondary-nav-menu' class='nav flex-grow-1' data-turbo-permanent>
+  <nav class='secondary d-flex flex-column flex-md-row gap-2 flex-grow-1 align-items-center'>
+    <ul id='secondary-nav-menu' class='nav flex-grow-1 justify-content-center justify-content-md-start' data-turbo-permanent>
       <% if Settings.status != "database_offline" && can?(:index, Issue) %>
         <li class="nav-item">
           <%= link_to issues_path(:status => "open"), :class => header_nav_link_class(issues_path) do %>
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index f96fad54b..aaac7546d 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -4,7 +4,7 @@
                     "#{params[:lat]}, #{params[:lon]}"
                   end %>
 
-<div class="search_forms">
+<%= tag.div :class => ["search_forms", *extra_classes] do %>
   <form method="GET" action="<%= search_path %>" class="search_form bg-body-secondary p-2">
     <div class="d-flex gap-2">
       <div class="input-group flex-nowrap">
@@ -73,4 +73,4 @@
       </div>
     </div>
   </form>
-</div>
+<% end %>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 867376346..b52bc04f8 100644
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -5,12 +5,12 @@
 <% content_for(:body_class) { "map-layout" } %>
 
 <% content_for :header do %>
-  <%= render :partial => "layouts/search", :locals => { :autofocus => false } %>
+  <%= render :partial => "layouts/search", :locals => { :autofocus => false, :extra_classes => ["d-md-none"] } %>
 <% end %>
 
 <% content_for :content do %>
   <div id="sidebar" class="bg-body z-1">
-    <%= render :partial => "layouts/search", :locals => { :autofocus => true } %>
+    <%= render :partial => "layouts/search", :locals => { :autofocus => true, :extra_classes => ["d-none d-md-block"] } %>
 
     <div id="flash">
       <%= render :partial => "layouts/flash" %>
-- 
2.39.5