Some much needed navbar polish. Things now look nice at all sizes, and I

disabled the hover popup when the navbar is collapsed. See mdbootstrap/bootstrap-hover-dropdown#136 for the issue I created about this. fixes thewca#210, fixes thewca#236
jfly · Nov 24, 2015 · 6b8d154 · 6b8d154
1 parent a77e6f6
commit 6b8d154
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/WcaOnRails/app/assets/stylesheets/navbar-static-top.scss b/WcaOnRails/app/assets/stylesheets/navbar-static-top.scss
@@ -62,7 +62,7 @@ body {
 $omni-search-closed-width: 50px;
 $omni-search-open-width: 300px;
 
-@media (min-width: 480px) {
+@media (min-width: 768px) {
   .navbar-static-top {
     .navbar-brand {
       img {
@@ -105,21 +105,9 @@ $omni-search-open-width: 300px;
         }
       }
     }
-  }
-}
-
-@media (max-width: 479px) {
-  .container>.navbar-header,
-  .container-fluid>.navbar-header,
-  .container>.navbar-collapse,
-  .container-fluid>.navbar-collapse {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
 
-@media (min-width: 768px) {
-  .navbar-nav.navbar-right:last-child {
-    margin-right: 0;
+    .navbar-nav.navbar-right:last-child {
+      margin-right: 0;
+    }
   }
 }
diff --git a/WcaOnRails/app/views/layouts/application.html.erb b/WcaOnRails/app/views/layouts/application.html.erb
@@ -52,7 +52,9 @@
       <div class="navbar-collapse collapse disabled">
         <ul class="nav navbar-nav">
           <li class="dropdown <%= params[:controller] == 'static_pages' || params[:controller] == 'posts' ? 'active' : '' %>">
-            <a href="/" class="dropdown-toggle top-nav" data-toggle="dropdown" data-hover="dropdown"><%= icon('info-circle', class: 'fa-fw') %> Information <span class="caret"></span></a>
+            <a href="/" class="dropdown-toggle top-nav" data-toggle="dropdown" data-hover="dropdown">
+              <%= icon('info-circle', class: 'fa-fw') %> <span class="hidden-sm">Information</span> <span class="caret"></span>
+            </a>
             <ul class="dropdown-menu" role="menu">
               <li><a href="/about"><%= icon('file-text', class: 'fa-fw') %> About the WCA</a></li>
               <li><a href="/delegates"><%= icon('sitemap', class: 'fa-fw') %> WCA Delegates</a></li>
@@ -67,7 +69,9 @@
           </li>
           <li><a href="/results/competitions.php" class="top-nav"><%= icon('globe', class: 'fa-fw') %> Competitions</a></li>
           <li class="dropdown">
-            <a href="/results/" class="dropdown-toggle top-nav" data-toggle="dropdown" data-hover="dropdown"><%= icon('list-ol', class: 'fa-fw') %> Results <span class="caret"></span></a>
+            <a href="/results/" class="dropdown-toggle top-nav" data-toggle="dropdown" data-hover="dropdown">
+              <%= icon('list-ol', class: 'fa-fw') %> Results <span class="caret"></span>
+            </a>
             <ul class="dropdown-menu" role="menu">
               <li><a href="/results/events.php"><%= icon('signal', class: 'fa-fw fa-rotate-90') %> Rankings</a></li>
               <li><a href="/results/regions.php"><%= icon('trophy', class: 'fa-fw') %> Records</a></li>
@@ -79,7 +83,9 @@
             </ul>
           </li>
           <li class="dropdown <%= params[:controller] == 'regulations' ? 'active' : '' %>">
-            <a href="/regulations/" class="dropdown-toggle top-nav" data-toggle="dropdown" data-hover="dropdown"><%= icon('book', class: 'fa-fw') %> Regulations <span class="caret"></span></a>
+            <a href="/regulations/" class="dropdown-toggle top-nav" data-toggle="dropdown" data-hover="dropdown">
+              <%= icon('book', class: 'fa-fw') %> <span class="hidden-sm">Regulations</span> <span class="caret"></span>
+            </a>
             <ul class="dropdown-menu" role="menu">
               <li><a href="/regulations/"><%= icon('book', class: 'fa-fw') %> Regulations</a></li>
               <li><a href="/regulations/guidelines.html"><%= icon('question-circle', class: 'fa-fw') %> Guidelines</a></li>
@@ -105,7 +111,7 @@
                   <span class="badge"><%= notification_count %></span>
                 <% end %>
               <% else %>
-                Sign in
+                <span class="hidden-sm">Sign in</span>
               <% end %>
               <span class="caret"></span>
             </a>

diff --git a/WcaOnRails/vendor/assets/javascripts/bootstrap-hover-dropdown.js b/WcaOnRails/vendor/assets/javascripts/bootstrap-hover-dropdown.js
@@ -95,6 +95,13 @@
             });
 
             function openDropdown(event) {
+                if($('.navbar-toggle').is(":visible")) {
+                    // Don't do anything when the navbar is collapsed, as it makes
+                    // the navbar pretty unusable.
+                    // See: https://github.com/CWSpear/bootstrap-hover-dropdown/issues/136
+                    return;
+                }
+
                 // clear dropdown timeout here so it doesnt close before it should
                 window.clearTimeout(timeout);
                 // restart hover timer