From 01f6ae235173ff46ff23498ec91accbeb1845863 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 1 Jun 2015 17:55:20 +0200 Subject: improve navbar collapse for mobile views Signed-off-by: Dmitriy Zaporozhets --- app/assets/javascripts/application.js.coffee | 4 ++++ app/assets/stylesheets/generic/header.scss | 15 ++++----------- app/views/layouts/header/_default.html.haml | 4 ++-- 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 -- cgit v1.2.1