Adjust secondary nav css for transition before/after js runs

openstreetmap · Dec 2, 2024 · 3bad6be · 3bad6be
1 parent 8973383
commit 3bad6be
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -152,9 +152,6 @@ $(document).ready(function () {
     });
     moreItemWidth = $("#compact-secondary-nav").width();
 
-    $("header").removeClass("text-nowrap");
-    $("header nav.secondary > ul").removeClass("flex-nowrap");
-
     updateHeader();
 
     $(window).resize(updateHeader);

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
@@ -170,7 +170,11 @@ nav.primary {
 
 nav.secondary {
   .nav-link {
-    padding: 0.3rem;
+    padding: 0 0.3rem;
+  }
+
+  > ul {
+    height: 1.5em;
   }
 }
 
@@ -224,7 +228,7 @@ body.small-nav {
     flex-direction: column;
 
     > ul {
-      justify-content: unset !important;
+      height: auto;
     }
 
     .user-menu, .login-menu {

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -28,7 +28,7 @@
     </div>
   </nav>
   <nav class='secondary d-flex gap-2 flex-grow-1 align-items-center'>
-    <ul class='nav flex-grow-1 justify-content-end flex-nowrap'>
+    <ul class='nav flex-grow-1'>
       <% 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 %>
@@ -61,7 +61,7 @@
       <li class="nav-item">
         <%= link_to t("layouts.about"), about_path, :class => header_nav_link_class(about_path) %>
       </li>
-      <li id="compact-secondary-nav" class="dropdown nav-item">
+      <li id="compact-secondary-nav" class="dropdown nav-item ms-auto">
         <button class="dropdown-toggle nav-link btn btn-outline-secondary border-0 bg-body text-secondary" type="button" data-bs-toggle="dropdown"><%= t "layouts.more" %></button>
         <ul class="dropdown-menu">
         </ul>