Skip to content
This repository has been archived by the owner on Mar 15, 2018. It is now read-only.

Slide over nav (bug 1152573) #1153

Closed
wants to merge 2 commits into from
Closed

Slide over nav (bug 1152573) #1153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b3fea3
Slide over nav (bug 1152573)
mstriemer Apr 21, 2015
db4dcc6
Close nav when clicking outside of it
mstriemer Apr 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
89 changes: 33 additions & 56 deletions src/media/css/elements--nav.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,25 @@ $nav--subnav-to-shift = 'mkt-nav-root';
$nav--transition = 'transform cubic-bezier(0.455, 0.03, 0.515, 0.955) 250ms';
$nav--to-shift = '#site-header, main';
$nav--width = 260px;
$zindex--nav-hamburger-child = 20;
$zindex--nav-hamburger-root = 30;
$zindex--main = 50;
$zindex--nav-normal-child = 60;
$zindex--header = 70;
$zindex--page-overlay = 70;
$zindex--nav-normal-root = 70;
$zindex--page-overlay = 100;
$zindex--nav-hamburger = 80;
$zindex--nav-hamburger-child = 90;

nav--visible() {
.mkt-nav--visible & {
body.mkt-nav--visible & {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will probably move these classes to the wrapper, don't think we need them on the body anymore

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

{block}
}
}

nav--subnav-visible() {
body.mkt-nav--subnav-visible & {
{block}
}
}

#page {
min-height: 480px;
Expand All @@ -46,7 +51,8 @@ nav--visible() {
position: relative;
}

main:after {
main:after,
.mkt-nav--wrapper:after {
// Disable main content interaction when nav is visible.
background: rgba($greyscale-dark-grey, .8);
content: '';
Expand Down Expand Up @@ -105,16 +111,16 @@ body {
mkt-nav {
font-size: 18px;
height: 100%;
left: 0;
opacity: 0;
left: -1 * $nav--width;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's the left for? can it be part of the translate?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This puts it off screen by default, it translates in over the top.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/mozilla/fireplace/pull/1153/files#diff-a564a385bebd37cc758f945c0a723a7dR123

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like it could be translate3d(-1 * $nav--width, 0, 0) or something, then adjust the duration

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I first pulled in Chuck's changes I also thought I'd switch it to always use translate3d but my initial attempt ended up causing funkiness with the scroll bar (if it was visible it would animate faster than the content) and this doesn't so I went with it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alright wfm

overflow-y: scroll;
position: fixed;
top: 0;
transition: unquote($nav--transition + ', opacity 0s linear 300ms');
width: 260px;
width: $nav--width;
z-index: $zindex--nav-hamburger;

+nav--visible() {
opacity: 1;
transform: translate3d($nav--width, 0, 0);
transition: unquote($nav--transition);
}
+media--wide-tablet() {
Expand All @@ -126,12 +132,13 @@ mkt-nav-root,
mkt-nav-child {
display: block;
height: 100%;
left: 0;
left: -1 * $nav--width;
list-style: none inside;
overflow-y: scroll;
position: fixed;
position: absolute;
top: 0;
width: 260px;
transition: unquote($nav--transition);
width: $nav--width;
}

mkt-nav-root {
Expand All @@ -140,9 +147,10 @@ mkt-nav-root {
background-attachment: local, fixed;
background-size: 182px 35px, cover;
padding: 75px 21px 30px;
transition: unquote($nav--transition);
z-index: $zindex--nav-hamburger-root;

+nav--visible() {
transform: translate3d($nav--width, 0, 0);
}
&:after {
background: rgba($greyscale-black, .25);
content: '';
Expand All @@ -151,7 +159,7 @@ mkt-nav-root {
right: 0;
top: 0;
width: 2px;
z-index: $zindex--nav-hamburger-root;
z-index: $zindex--nav-hamburger;
}
.mkt-nav--item {
margin: 25px 0;
Expand All @@ -165,10 +173,12 @@ mkt-nav-root {
mkt-nav-child {
background: $color--nav--child-bg;
border-right: 2px solid $color--nav--child-border;
display: none;
padding: $nav--header-height 10px;
z-index: $zindex--nav-hamburger-child;

+nav--subnav-visible() {
transform: translate3d($nav--width, 0, 0);
}
.mkt-nav--active,
.mkt-nav--link:hover {
background: $greyscale-white;
Expand Down Expand Up @@ -196,11 +206,12 @@ mkt-nav-child {
cursor pointer
display: block;
height: $nav--header-height;
left: 0;
left: -1 * $nav--width;
overflow: hidden;
position: absolute;
padding-top: $nav--header-height;
position: fixed;
top: 0;
transition: unquote($nav--transition);
width: $nav--width;
z-index: $zindex--nav-hamburger-child;

Expand All @@ -215,48 +226,14 @@ mkt-nav-child {
right: 15px;
width: 25px
}
}

{$nav--to-shift} {
transform: translate3d(0, 0, 0);
transition: unquote($nav--transition);

+media--wide-tablet() {
transform: translate3d(8, 0, 0);
}
}

{$nav--subnav-to-shift} {
transform: translate3d(0, 0, 0);

+media--wide-tablet() {
transform: translate3d(0, 0, 0);
}
}

.mkt-nav--visible {
{$nav--to-shift} {
+nav--subnav-visible() {
transform: translate3d($nav--width, 0, 0);

+media--wide-tablet() {
transform: translate3d(0, 0, 0);
}
}
#site-header .hamburger {
background-position: 0 -100px;
}
mkt-nav-child {
display: block;
}
}

.mkt-nav--subnav-visible {
{$nav--subnav-to-shift} {
transform: translate3d($nav--width, 0, 0);

+media--wide-tablet() {
transform: translate3d(0, 0, 0);
}
#site-header .hamburger {
+nav--visible() {
background-position: 0 -100px;
}
}

Expand Down
3 changes: 2 additions & 1 deletion src/media/css/header.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,8 @@ body {
}
}

.banners mkt-banner {
// Banners should cover the header children when above the header.
body > .banners mkt-banner {
z-index: 70;
}

Expand Down
17 changes: 11 additions & 6 deletions src/media/js/elements/nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,10 @@ define('elements/nav',
createdCallback: {
value: function() {
var root = this;
root.addEventListener('click', function() {
root.addEventListener('click', function(e) {
// Stop propagation so that this click doesn't get
// handled later and close the nav.
e.stopPropagation();
document.querySelector('mkt-nav').toggle();
});
}
Expand Down Expand Up @@ -183,11 +186,13 @@ define('elements/nav',
})
});

z.doc.on('click', '.' + cl.VISIBLE + ' main', function(e) {
// Toggle nav off when clicking in the main area when it's toggled.
var nav = document.querySelector('mkt-nav');
if (nav && nav.toggle) {
nav.toggle();
z.doc.on('click', '.' + cl.VISIBLE, function(e) {
if ($(e.target).parents('mkt-nav').length === 0) {
// Toggle nav off when clicking outside of it when it's toggled.
var nav = document.querySelector('mkt-nav');
if (nav && nav.toggle) {
nav.toggle();
}
}
});

Expand Down