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