Change current navbar to bootstrap collapsed navbar [skip ci]

web/assets/stylesheets/application.css

@@ -101,11 +101,6 @@ header.row .pagination {
 .poll-wrapper {
     margin: 9px;
 }
-.nav #live-poll {
-  height: 25px;
-  line-height: 25px;
-  width: 195px;
-}
 #live-poll.active {
   background-color: #009300;
 }
@@ -208,6 +203,36 @@ table .table-checkbox label {
   color: #585454;
 }
 
+@media (max-width: 768px) {
+  .navbar .navbar-header .navbar-livereload {
+    border: none;
+    margin: 9px 10px 0;
+    padding: 0;
+  }
+
+  .navbar .navbar-collapse .navbar-livereload {
+    display: none;
+  }
+
+  .navbar.navbar-fixed-top ul {
+    margin-right: -15px!important;
+  }
+
+  .navbar .nav a {
+    text-align: center;
+  }
+}
+
+@media (width: 768px) {
+  .navbar .navbar-collapse .navbar-livereload {
+    display: block;
+  }
+
+  .navbar .poll-wrapper {
+    margin: 4px 4px 0 0;
+  }
+}
+
 .navbar-footer .navbar ul.nav {
   text-align: center;
   float: none;
@@ -616,12 +641,10 @@ div.interval-slider input {
   }
 
   .navbar.navbar-fixed-top ul {
-    float: none;
     margin-right: 0;
   }
 
   .navbar.navbar-fixed-top li {
-    float: none;
     margin-right: 0;
   }
 

web/views/_nav.erb

@@ -1,34 +1,53 @@
 <div class="navbar navbar-default navbar-fixed-top">
-  <div class="navbar-inner">
-    <div class="container-fluid text-center">
-        <a class="navbar-brand" href="<%= root_path %>">
-          <%= Sidekiq::NAME %>
-          <%= erb :_status %>
-        </a>
-        <ul class="nav navbar-nav">
-          <% Sidekiq::Web.default_tabs.each do |title, url| %>
-              <% if url == '' %>
-                  <li class="<%= current_path == url ? 'active' : '' %>">
-                    <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
-                  </li>
-              <% else %>
-                  <li class="<%= current_path.start_with?(url) ? 'active' : '' %>">
-                    <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
-                  </li>
-              <% end %>
-          <% end %>
-          <% 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>
-          <% end %>
-        </ul>
-    </div>
-    <div class="poll-wrapper pull-right">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <div class="navbar-toggle collapsed navbar-livereload">
         <%= erb :_poll %>
         <% if Sidekiq::Web.app_url %>
-            <a class="btn btn-inverse" href="<%= Sidekiq::Web.app_url %>">Back to App</a>
+          <a class="btn btn-inverse" href="<%= Sidekiq::Web.app_url %>">Back to App</a>
+        <% end %>
+      </div>
+      <a class="navbar-brand" href="<%= root_path %>">
+        <%= Sidekiq::NAME %>
+        <%= erb :_status %>
+      </a>
+    </div>
+
+    <div class="collapse navbar-collapse" id="navbar-menu">
+      <ul class="nav navbar-nav">
+        <% Sidekiq::Web.default_tabs.each do |title, url| %>
+          <% if url == '' %>
+            <li class="<%= current_path == url ? 'active' : '' %>">
+            <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
+            </li>
+          <% else %>
+            <li class="<%= current_path.start_with?(url) ? 'active' : '' %>">
+            <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
+            </li>
+          <% end %>
         <% end %>
+        <% 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>
+        <% end %>
+      </ul>
+      <ul class="nav navbar-nav navbar-right navbar-livereload">
+        <li>
+          <div class="poll-wrapper pull-right">
+            <%= erb :_poll %>
+            <% if Sidekiq::Web.app_url %>
+              <a class="btn btn-inverse" href="<%= Sidekiq::Web.app_url %>">Back to App</a>
+            <% end %>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </div>
+</div>