improve navbar collapse for mobile views

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

3 files changed, 10 insertions, 13 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index ea2a4b97101..9fc313db9d0 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -177,6 +177,10 @@ $ ->
     $(@).next('table').show()
     $(@).remove()
 
+  $('.navbar-toggle').on 'click', ->
+    $('.header-content .title').toggle()
+    $('.header-content .navbar-collapse').toggle()
+
   # Show/hide comments on diff
   $("body").on "click", ".js-toggle-diff-comments", (e) ->
     $(@).toggleClass('active')
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index 5e6102e14ab..71afccba001 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -42,15 +42,12 @@ header {
         }
       }
 
-      .nav {
-        float: right;
-        margin-right: 0;
-      }
-
       .navbar-toggle {
         color: #666;
         margin: 0;
         border-radius: 0;
+        position: absolute;
+        right: 2px;
 
         &:hover {
           background-color: #EEE;
@@ -195,7 +192,8 @@ header {
     }
 
     .navbar-nav {
-      margin: 5px 0;
+      margin: 0px;
+      float: none !important;
 
       .visible-xs, .visable-sm {
         display: table-cell !important;
@@ -205,11 +203,6 @@ header {
     li {
       display: table-cell;
       width: 1%;
-
-      a {
-        text-align: center;
-        font-size: 18px !important;
-      }
     }
   }
 }
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 43076ee8869..2970af377f5 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -8,12 +8,12 @@
       %h1.title
         = title
 
-      %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}}
+      %button.navbar-toggle
         %span.sr-only Toggle navigation
         = icon('bars')
 
       .navbar-collapse.collapse
-        %ul.nav.navbar-nav
+        %ul.nav.navbar-nav.pull-right
           %li.hidden-sm.hidden-xs
             = render 'layouts/search'
           %li.visible-sm.visible-xs