Fixed protruding links in header navbar [skip ci]

1. All protruding plugin links rolled to dropdown button 2. Trim navbar link weight for screen less than 979px
sidekiq · Apr 3, 2015 · 70407f4 · 70407f4
1 parent ab8f11d
commit 70407f4
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 10 deletions.
diff --git a/web/assets/javascripts/application.js b/web/assets/javascripts/application.js
diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
@@ -210,6 +210,10 @@ table .table-checkbox label {
     padding: 0;
   }
 
+  .navbar .navbar-collapse {
+    max-height: 400px;
+  }
+
   .navbar .navbar-collapse .navbar-livereload {
     display: none;
   }
@@ -231,6 +235,18 @@ table .table-checkbox label {
   .navbar .poll-wrapper {
     margin: 4px 4px 0 0;
   }
+
+  .navbar .dropdown-menu {
+    min-width: 120px;
+  }
+
+  .navbar .dropdown-menu a {
+    text-align: left;
+  }
+}
+
+.nav .dropdown {
+  display: none;
 }
 
 .navbar-footer .navbar ul.nav {
@@ -635,11 +651,6 @@ div.interval-slider input {
     display: block;
   }
 
-  .navbar ul.nav li a {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
   .navbar.navbar-fixed-top ul {
     margin-right: 0;
   }
@@ -680,6 +691,11 @@ div.interval-slider input {
     margin: 0 -20px;
   }
 
+  .navbar ul.nav li a {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
   .admin #page {
     padding-top: 10px;
   }

diff --git a/web/locales/en.yml b/web/locales/en.yml
@@ -73,3 +73,4 @@ en: # <---- change this to your locale code
   StopAll: Stop All
   QuietAll: Quiet All
   PollingInterval: Polling interval
+  Plugins: Plugins
diff --git a/web/locales/ru.yml b/web/locales/ru.yml
@@ -72,3 +72,4 @@ ru:
   StopAll: Остановить все
   QuietAll: Отдыхать всем
   PollingInterval: Интервал опроса
+  Plugins: Плагины
diff --git a/web/views/_nav.erb b/web/views/_nav.erb
@@ -1,6 +1,6 @@
 <div class="navbar navbar-default navbar-fixed-top">
   <div class="container-fluid">
-    <div class="navbar-header">
+    <div class="navbar-header" data-navbar="static">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -19,7 +19,7 @@
     </div>
 
     <div class="collapse navbar-collapse" id="navbar-menu">
-      <ul class="nav navbar-nav">
+      <ul class="nav navbar-nav" data-navbar="static">
         <% Sidekiq::Web.default_tabs.each do |title, url| %>
           <% if url == '' %>
             <li class="<%= current_path == url ? 'active' : '' %>">
@@ -31,13 +31,27 @@
             </li>
           <% end %>
         <% end %>
+
+        <li class="dropdown" data-navbar="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+            <%= t('Plugins') %> <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            <% Sidekiq::Web.custom_tabs.each do |title, url| %>
+              <li>
+                <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
+              </li>
+            <% end %>
+          </ul>
+        </li>
+
         <% Sidekiq::Web.custom_tabs.each do |title, url| %>
-          <li class="<%= current_path.start_with?(url) ? 'active' : '' %>">
-          <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
+          <li class="<%= current_path.start_with?(url) ? 'active' : '' %>" data-navbar="custom-tab">
+            <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
           </li>
         <% end %>
       </ul>
-      <ul class="nav navbar-nav navbar-right navbar-livereload">
+      <ul class="nav navbar-nav navbar-right navbar-livereload" data-navbar="static">
         <li>
           <div class="poll-wrapper pull-right">
             <%= erb :_poll %>