github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #341 from sharelatex/pr-fix-resp-menu

Browse source 
Fix hamburger menu
This commit is contained in:
Paulo Jorge Reis 2018-02-16 10:01:25 +00:00 committed by GitHub
commit b3531d9471
4 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/layout/navbar.pug
View file

@ -1,4 +1,4 @@
nav.navbar.navbar-default
nav.navbar.navbar-default.navbar-main
.container-fluid
.navbar-header
button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}")

35
services/web/public/stylesheets/components/navbar.less
View file

@ -52,8 +52,6 @@
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
//border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
@ -89,6 +87,33 @@
}
.navbar-main {
z-index: 1;
.container-fluid > .navbar-collapse {
// High specificity needed to override Bootstrap's default.
margin: 0;
}
.navbar-collapse {
// Use absolute positioning to build the hamburger menu.
position: absolute;
left: 0;
width: 100%;
margin: 0;
background-color: @navbar-default-bg;
border-bottom: solid 1px @navbar-default-border;
padding: 0 @navbar-default-padding-h;
@media (min-width: @grid-float-breakpoint) {
// Get back to regular layout mode as soon as the menu items are
// expanded (i.e. not contained within the hamburguer menu).
position: static;
background-color: transparent;
border-bottom: 0;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
@ -543,3 +568,9 @@
}
}
.navbar-default when (@is-overleaf = true) {
@media (min-width: @grid-float-breakpoint) {
padding: @navbar-default-padding-v 0;
}
}

6
services/web/public/stylesheets/core/_common-variables.less
View file

@ -312,7 +312,7 @@
@navbar-border-radius: 0;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-collapse-max-height: 380px;
@navbar-default-color: #777;
@navbar-default-bg: #fff;
@ -811,7 +811,9 @@
// Navbar
@navbar-title-color : #666;
@navbar-title-color-hover : #333;
@navbar-default-padding : 1rem 2rem;
@navbar-default-padding-v : 1rem;
@navbar-default-padding-h : 2rem;
@navbar-default-padding : @navbar-default-padding-v @navbar-default-padding-h;
@navbar-brand-width : 180px;
@navbar-btn-font-size : @font-size-base * 0.8;
@navbar-btn-border-radius : @border-radius-base;

4
services/web/public/stylesheets/core/ol-variables.less
View file

@ -95,7 +95,9 @@
@labels-font-size : 85%;
// Navbar
@navbar-default-padding : (@grid-gutter-width / 2) 0;
@navbar-default-padding-v : (@grid-gutter-width / 2);
@navbar-default-padding-h : 10px;
@navbar-default-padding : @navbar-default-padding-v @navbar-default-padding-h;
@navbar-default-link-color : #FFF;
@navbar-default-link-hover-bg : @ol-green;
@navbar-default-link-active-bg : @ol-green;