Fixed mobile navigation. (#3973)

* Fixed mobile navigation. * Remove unused toggle. * Small css changes for mobile + ipad * Fixes to double navbar * remove leftover css * fixed double btn two line issue
sidekiq · Sep 20, 2018 · c342476 · c342476
1 parent fd23e2f
commit c342476
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
@@ -126,7 +126,7 @@ header.row .pagination {
   text-align: center;
   width: 14%;
 }
-@media (max-width: 767px) and (min-width: 400px) {
+@media (max-width: 767px) and (min-width: 200px) {
   .summary_bar ul li {
     width: 100%;
   }
@@ -219,6 +219,29 @@ table .table-checkbox label {
   color: #585454;
 }
 
+
+.nav.navbar-nav{
+  display: flex;
+  width: 100%;
+}
+
+.navbar-livereload{
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.navbar-livereload .poll-wrapper a:last-child{
+	margin-left: 8px;
+}
+
+.navbar-right{
+  margin-right: 0;
+}
+
+.navbar-collapse.collapse{
+  overflow-x: auto !important;
+}
+
 @media (max-width: 768px) {
   .navbar .navbar-header .navbar-livereload {
     border: none;
@@ -234,13 +257,19 @@ table .table-checkbox label {
     display: none;
   }
 
+  .nav.navbar-nav{
+  	display: block;
+  	width: auto;
+  }
+
   .navbar.navbar-fixed-top ul {
     margin-right: -15px!important;
   }
 
   .navbar .nav a {
     text-align: center;
-  }
+  }  
+
 }
 
 @media (width: 768px) {
@@ -645,6 +674,10 @@ div.interval-slider input {
     margin-right: 0;
   }
 
+  .navbar #navbar-menu{
+  	display: none;
+  }
+
   .poll-wrapper {
     width: 100%;
     text-align: center;

diff --git a/web/views/_nav.erb b/web/views/_nav.erb
@@ -32,27 +32,13 @@
           <% 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' : '' %>" data-navbar="custom-tab">
             <a href="<%= root_path %><%= url %>"><%= t(title) %></a>
           </li>
         <% end %>
-      </ul>
-      <ul class="nav navbar-nav navbar-right navbar-livereload" data-navbar="static">
-        <li>
+
+        <li class="navbar-livereload">
           <div class="poll-wrapper">
             <%= erb :_poll_link %>
             <% if Sidekiq::Web.app_url %>