Commit 0c4fb72b authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'mobile-navigation-redesign' into 'master'

Hide navbar on mobile

Part of  #14838    
Closes #17323    

<img src="/uploads/33d2dbc17e94329891108c4e80d4aff3/nav.gif" width="800px">

See merge request !4103
parents 21f942a5 36f60982
......@@ -204,6 +204,7 @@ $ ->
$('.header-content .title').toggle()
$('.header-content .navbar-collapse').toggle()
$('.navbar-toggle').toggleClass('active')
$('.navbar-toggle i').toggleClass("fa-angle-right fa-angle-left")
# Show/hide comments on diff
$("body").on "click", ".js-toggle-diff-comments", (e) ->
......
......@@ -12,7 +12,7 @@ toggleSidebar = ->
niceScrollBars.updateScrollBar();
), 300
$(document).on("click", '.toggle-nav-collapse', (e) ->
$(document).on("click", '.toggle-nav-collapse, .side-nav-toggle', (e) ->
e.preventDefault()
toggleSidebar()
......
......@@ -8,7 +8,7 @@ header {
&.navbar-empty {
height: 58px;
background: #fff;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $btn-gray-hover;
.center-logo {
margin: 11px 0;
......@@ -22,7 +22,7 @@ header {
}
&.navbar-gitlab {
padding: 0 20px;
padding: 0 16px;
z-index: 100;
margin-bottom: 0;
min-height: $header-height;
......@@ -30,6 +30,10 @@ header {
border: none;
border-bottom: 1px solid $border-color;
@media (max-width: $screen-xs-min) {
padding: 0 16px;
}
&.with-horizontal-nav {
border-bottom: none;
}
......@@ -60,16 +64,44 @@ header {
margin: 6px 0;
border-radius: 0;
position: absolute;
right: 2px;
right: -10px;
padding: 6px 10px;
&:hover {
background-color: #eee;
background-color: $btn-gray-hover;
}
&.active {
color: $gl-icon-color;
}
}
}
&.header-collapsed {
padding: 0 16px;
}
.side-nav-toggle {
display: none;
position: absolute;
left: -10px;
margin: 6px 0;
padding: 6px 10px;
border: none;
background-color: $background-color;
&:hover {
background-color: $btn-gray-hover;
}
&:focus {
outline: none;
}
@media (max-width: $screen-xs-min) {
display: block;
}
}
}
.header-content {
......@@ -77,6 +109,10 @@ header {
height: $header-height;
padding-right: 40px;
@media (max-width: $screen-xs-min) {
padding-left: 40px;
}
@media (min-width: $screen-sm-min) {
padding-right: 0;
}
......@@ -145,6 +181,10 @@ header {
@media (min-width: $screen-md-min) {
@include collapsed-header;
}
@media (max-width: $screen-xs-min) {
margin-left: 0;
}
}
.header-expanded {
......@@ -153,6 +193,10 @@ header {
@media (min-width: $screen-md-min) {
margin-left: $sidebar_width;
}
@media (max-width: $screen-xs-min) {
margin-left: 0;
}
}
@media (max-width: $screen-xs-max) {
......
......@@ -201,9 +201,13 @@
border-bottom: 1px solid $border-color;
transition-duration: .3s;
.container-fluid {
position: relative;
}
.controls {
float: right;
padding: 7px 5px 0 0;
padding: 7px 0 0;
i {
color: $layout-link-gray;
......
......@@ -210,15 +210,33 @@
}
}
.sidebar-wrapper {
&.hidden-nav {
width: 0;
}
}
.page-sidebar-collapsed {
padding-left: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
padding-left: 0;
}
.sidebar-wrapper {
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
}
.header-logo {
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
}
a {
padding-left: ($sidebar_collapsed_width - 36) / 2;
......@@ -244,12 +262,22 @@
.collapse-nav a {
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
}
}
.sidebar-user {
padding-left: ($sidebar_collapsed_width - 36) / 2;
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
padding-left: 0;
padding-right: 0;
}
.username {
display: none;
}
......@@ -258,6 +286,10 @@
.layout-nav {
padding-right: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
padding-right: 0;;
}
}
}
......@@ -268,6 +300,10 @@
padding-left: $sidebar_width;
}
@media (max-width: $screen-xs-min) {
padding-left: 0;
}
.sidebar-wrapper {
width: $sidebar_width;
......@@ -287,7 +323,17 @@
}
.layout-nav {
padding-right: $sidebar_width;
@media (max-width: $screen-xs-min) {
padding-right: 0;;
}
@media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
padding-right: 62px;
}
@media (min-width: $screen-md-min) {
padding-right: $sidebar_width;
}
}
}
......
......@@ -215,6 +215,7 @@ $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
$btn-active-gray: #ececec;
$btn-placeholder-gray: #c7c7c7;
$btn-white-active: #848484;
$btn-gray-hover: #eee;
/*
* Award emoji
......
......@@ -218,7 +218,7 @@
.btn {
display: inline-block;
width: 48%;
width: 46%;
}
}
}
......
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
%div{ class: fluid_layout ? "container-fluid" : "container-fluid" }
.header-content
%button.navbar-toggle{type: 'button'}
%button.side-nav-toggle{type: 'button'}
%span.sr-only Toggle navigation
= icon('bars')
%button.navbar-toggle{type: 'button'}
%span.sr-only Toggle navigation
= icon('angle-left')
.navbar-collapse.collapse
%ul.nav.navbar-nav
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment