From f1717bfa1f32b89f4b1cae0ba73108ad42510bee Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 15 Feb 2018 10:58:36 +0000 Subject: [PATCH 1/6] Allow header content to be on top of main content. --- services/web/public/stylesheets/components/navbar.less | 1 + 1 file changed, 1 insertion(+) diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 47d76cc1f2..17f5b67e83 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -383,6 +383,7 @@ top: 0; width: 100%; height: @header-height; + z-index: 1; .navbar-brand { position: absolute; From ebad9091c7c26eb7d46fa0f1e829b5c6f1fc9da2 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 15 Feb 2018 11:08:12 +0000 Subject: [PATCH 2/6] Create class to scope main header changes (avoids overriding too much Bootstrap stuff); apply styles. --- services/web/app/views/layout/navbar.pug | 2 +- .../public/stylesheets/components/navbar.less | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/services/web/app/views/layout/navbar.pug b/services/web/app/views/layout/navbar.pug index 3d2d6600cc..0b162b27d2 100644 --- a/services/web/app/views/layout/navbar.pug +++ b/services/web/app/views/layout/navbar.pug @@ -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}") diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 17f5b67e83..4898bb38fb 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -52,7 +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 +88,22 @@ } +.navbar-main { + z-index: 1; + .container-fluid > .navbar-collapse { + // High specificity needed to override Bootstrap's default. + margin: 0; + } + .navbar-collapse { + position: absolute; + left: 0; + width: 100%; + margin: 0; + background-color: @navbar-default-bg; + border-bottom: solid 1px @navbar-default-border; + padding: @navbar-default-padding; + } +} // Both navbar header and collapse // // When a container is present, change the behavior of the header and collapse. @@ -383,7 +398,6 @@ top: 0; width: 100%; height: @header-height; - z-index: 1; .navbar-brand { position: absolute; From 058a58d099aa75fed9460ec06275dd3760469af5 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 15 Feb 2018 11:12:32 +0000 Subject: [PATCH 3/6] Only apply horizontal paddings (to align with the header). --- services/web/public/stylesheets/components/navbar.less | 2 +- services/web/public/stylesheets/core/_common-variables.less | 4 +++- services/web/public/stylesheets/core/ol-variables.less | 4 +++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 4898bb38fb..52e3bd2599 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -101,7 +101,7 @@ margin: 0; background-color: @navbar-default-bg; border-bottom: solid 1px @navbar-default-border; - padding: @navbar-default-padding; + padding: 0 @navbar-default-padding-h; } } // Both navbar header and collapse diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index fc829c686b..a73207ffbb 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -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; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index a4b04b27a8..a1d32a3d1a 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -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 : 0; +@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; From f01b027da0d7fcf30700a9af3f51ff71f0172e09 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 15 Feb 2018 11:29:29 +0000 Subject: [PATCH 4/6] Make sure the menu behaviour does not change in desktop resolutions. --- .../web/public/stylesheets/components/navbar.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 52e3bd2599..cd2a534e2d 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -95,6 +95,7 @@ margin: 0; } .navbar-collapse { + // Use absolute positioning to build the hamburger menu. position: absolute; left: 0; width: 100%; @@ -102,6 +103,16 @@ 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 From e2874998b3c75358b41f58bd1809c7da2e745ad1 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 15 Feb 2018 11:46:40 +0000 Subject: [PATCH 5/6] Improve hamburguer menu in v2, still not perfect. --- services/web/public/stylesheets/components/navbar.less | 7 ++++++- services/web/public/stylesheets/core/ol-variables.less | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index cd2a534e2d..5390729c75 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -52,7 +52,6 @@ overflow-x: visible; padding-right: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal; - box-shadow: inset 0 1px 0 rgba(255,255,255,.1); &:extend(.clearfix all); -webkit-overflow-scrolling: touch; @@ -569,3 +568,9 @@ } } + +.navbar-default when (@is-overleaf = true) { + @media (min-width: @grid-float-breakpoint) { + padding: @navbar-default-padding-v 0; + } +} diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index a1d32a3d1a..6ffceaf176 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -96,7 +96,7 @@ // Navbar @navbar-default-padding-v : (@grid-gutter-width / 2); -@navbar-default-padding-h : 0; +@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; From 51b14e412f559d9cf588bca5fd5e9bbf782c43f3 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 15 Feb 2018 11:51:45 +0000 Subject: [PATCH 6/6] Increase hamburguer menu max-height; 340px was less than SL menu fully expanded. --- services/web/public/stylesheets/core/_common-variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index a73207ffbb..d5a79947df 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -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;