Merge pull request #5151 from AntonKhorev/no-history-and-export-buttons

Move History and Export buttons to secondary nav

app/assets/javascripts/index.js

@@ -405,6 +405,9 @@ $(document).ready(function () {
 
     if (OSM.router.route(this.pathname + this.search + this.hash)) {
       e.preventDefault();
+      if (this.pathname !== "/directions") {
+        $("header").addClass("closed");
+      }
     }
   });
 

app/assets/javascripts/index/search.js

@@ -32,6 +32,7 @@ OSM.Search = function (map) {
 
   $(".describe_location").on("click", function (e) {
     e.preventDefault();
+    $("header").addClass("closed");
     var center = map.getCenter().wrap(),
         precision = OSM.zoomPrecision(map.getZoom()),
         lat = center.lat.toFixed(precision),

app/assets/javascripts/router.js

@@ -101,6 +101,16 @@ OSM.Router = function (map, rts) {
 
   var router = {};
 
+  function updateSecondaryNav() {
+    $("header nav.secondary > ul > li > a").each(function () {
+      var active = $(this).attr("href") === window.location.pathname;
+
+      $(this)
+        .toggleClass("text-secondary", !active)
+        .toggleClass("text-secondary-emphasis", active);
+    });
+  }
+
   $(window).on("popstate", function (e) {
     if (!e.originalEvent.state) return; // Is it a real popstate event or just a hash change?
     var path = window.location.pathname + window.location.search,
@@ -110,6 +120,7 @@ OSM.Router = function (map, rts) {
     currentPath = path;
     currentRoute = route;
     currentRoute.run("popstate", currentPath);
+    updateSecondaryNav();
     map.setState(e.originalEvent.state, { animate: false });
   });
 
@@ -124,6 +135,7 @@ OSM.Router = function (map, rts) {
     currentPath = path;
     currentRoute = route;
     currentRoute.run("pushstate", currentPath);
+    updateSecondaryNav();
     return true;
   };
 

app/assets/stylesheets/common.scss

@@ -131,7 +131,7 @@ header {
 }
 
 nav.primary {
-  & > .btn-group .btn-outline-primary {
+  #edit_tab .btn-outline-primary {
     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
   }
 
@@ -209,9 +209,7 @@ body.small-nav {
     }
   }
 
-  #sidebar .search_forms,
-  #edit_tab,
-  #export_tab {
+  #sidebar .search_forms {
     display: none;
   }
 
@@ -219,7 +217,7 @@ body.small-nav {
     margin-right: 0;
     padding: 0;
 
-    .btn-group {
+    #edit_tab {
       width: 100%;
       padding: 10px;
     }

app/views/layouts/_header.html.erb

@@ -8,27 +8,23 @@
   <a href="#" id="menu-icon"></a>
   <nav class='primary'>
     <%= content_for :header %>
-    <div class="btn-group">
-      <div id="edit_tab" class="btn-group">
-        <%= link_to t("layouts.edit"),
-                    edit_path,
-                    :class => "btn btn-outline-primary geolink editlink",
-                    :id => "editanchor",
-                    :data => { :editor => preferred_editor } %>
-        <button class='btn btn-outline-primary dropdown-toggle dropdown-toggle-split' type='button' data-bs-toggle='dropdown'></button>
-        <ul class='dropdown-menu'>
-          <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
-            <li>
-              <%= link_to t("layouts.edit_with", :editor => t("editor.#{editor}.description")),
-                          edit_path(:editor => editor),
-                          :data => { :editor => editor },
-                          :class => "geolink editlink dropdown-item" %>
-            </li>
-          <% end %>
-        </ul>
-      </div>
-      <%= link_to t("layouts.history"), history_path, :class => "btn btn-outline-primary geolink flex-grow-1", :id => "history_tab" %>
-      <%= link_to t("layouts.export"), export_path, :class => "btn btn-outline-primary geolink", :id => "export_tab" %>
+    <div id="edit_tab" class="btn-group">
+      <%= link_to t("layouts.edit"),
+                  edit_path,
+                  :class => "btn btn-outline-primary geolink editlink",
+                  :id => "editanchor",
+                  :data => { :editor => preferred_editor } %>
+      <button class='btn btn-outline-primary dropdown-toggle dropdown-toggle-split flex-grow-0' type='button' data-bs-toggle='dropdown'></button>
+      <ul class='dropdown-menu'>
+        <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
+          <li>
+            <%= link_to t("layouts.edit_with", :editor => t("editor.#{editor}.description")),
+                        edit_path(:editor => editor),
+                        :data => { :editor => editor },
+                        :class => "geolink editlink dropdown-item" %>
+          </li>
+        <% end %>
+      </ul>
     </div>
   </nav>
   <nav class='secondary d-flex gap-2 align-items-center'>
@@ -41,6 +37,12 @@
           <% end -%>
         </li>
       <% end %>
+      <li class="compact-hide nav-item">
+        <%= link_to t("layouts.history"), history_path, :class => header_nav_link_class(history_path) %>
+      </li>
+      <li class="compact-hide nav-item">
+        <%= link_to t("layouts.export"), export_path, :class => header_nav_link_class(export_path) %>
+      </li>
       <li class="compact-hide nav-item">
         <%= link_to t("layouts.gps_traces"), traces_path, :class => header_nav_link_class(traces_path) %>
       </li>
@@ -70,6 +72,8 @@
               <% end -%>
             </li>
           <% end %>
+          <li><%= link_to t("layouts.history"), history_path, :class => "dropdown-item" %></li>
+          <li><%= link_to t("layouts.export"), export_path, :class => "dropdown-item" %></li>
           <li><%= link_to t("layouts.gps_traces"), traces_path, :class => "dropdown-item" %></li>
           <li><%= link_to t("layouts.user_diaries"), diary_entries_path, :class => "dropdown-item" %></li>
           <li><%= link_to t("layouts.communities"), communities_path, :class => "dropdown-item" %></li>