TagesschuleElementa/www.tagesschule-elementa.ch
3
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

navigation fixes

Browse Source
This commit is contained in:
Simon Caminada
2018-03-19 14:20:01 +01:00
parent ff0fff0c5e
commit 340767ddab
9 changed files with 154 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
private/js/modules/navigation.js
View File

@@ -37,6 +37,30 @@ $(function() {
}
});
$body.on('mouseenter', '.navigation__item', function(event) {
var $this = $(this);
var $navigation_main = $this.parents('.navigation__main');
$navigation_main.attr('data-focus', $this.attr('data-id'));
});
$body.on('mouseleave', '.navigation__item', function(event) {
var $this = $(this);
var $navigation_main = $this.parents('.navigation__main');
$navigation_main.removeAttr('data-focus');
});
$body.on('mouseenter', '.navigation__item__list a', function(event) {
var $this = $(this);
var $navigation_main = $this.parents('.navigation__main');
$navigation_main.attr('data-hover', $this.parents('.navigation__item').attr('data-id'));
});
$body.on('mouseleave', '.navigation__item__list a', function(event) {
var $this = $(this);
var $navigation_main = $this.parents('.navigation__main');
$navigation_main.removeAttr('data-hover');
});
$body.on('click', '.header__button--navigation', function(event) {
if ($body.hasClass('search_open')) {
if (!$body.hasClass('_search') && !$body.hasClass('search_results')) {
@@ -82,8 +106,12 @@ $(function() {
function close_navigation() {
$navigation.removeAttr('style');
var $navigation_main = $navigation.find('.navigation__main');
$body.removeClass('navigation_open');
window.requestAnimationFrame(function() {
$navigation_main.removeAttr('data-focus');
$navigation_main.removeAttr('data-hover');
$navigation_main.removeAttr('data-active');
$canvas.removeAttr('style');
$(window).scrollTop(scroll_top);
window.navigation_is_open = false;

2
private/scss/modules/_footer.scss
View File

@@ -34,7 +34,7 @@
display: inline-block;
vertical-align: top;
position: relative;
top: 100%;
top: em(50px);
width: auto;
padding: em(8px) em(15px);
border-left: em(1px) solid $light_gray;

17
private/scss/modules/_header.scss
View File

@@ -352,6 +352,7 @@
position: absolute;
top: em(9px);
right: em(16px);
will-change: transform;
svg {
display: block;
width: 100%;
@@ -383,4 +384,20 @@
left: em(12px);
}
}
}
.header__button__icon__number {
position: absolute;
top: em(0.5px);
will-change: transform;
left: 0;
font-size: em(9px);
background: $green;
width: em(14px);
height: em(14px);
border-radius: 50%;
line-height: em(14px);
color: $white;
font-weight: 900;
text-align: center;
}

68
private/scss/modules/_navigation.scss
View File

@@ -14,6 +14,8 @@
@media screen and (max-width: $medium_breakpoint) {
display: block;
height: auto;
min-height: 100%;
background: $white;
}
}
@@ -24,13 +26,7 @@
background: $white;
padding: em(50px) 0;
.social_media {
display: inline-block;
vertical-align: top;
width: auto;
}
.social_media__item {
background: $green;
color: $white;
padding: em(10px);
}
@media screen and (max-width: $medium_breakpoint) {
padding-bottom: 0;
@@ -144,11 +140,10 @@
width: 100%;
.navigation__item {
height: 100%;
background-size: cover;
background-position: top center;
position: relative;
overflow: hidden;
color: transparent;
background: $white;
&:before, &:after {
content: '';
display: block;
@@ -159,9 +154,10 @@
bottom: -5%;
}
&:after {
background: $black;
opacity: 0.4;
transition: opacity 0.3s;
background-image: linear-gradient(to bottom, rgba($black, 0.65), $black);
opacity: 0.5;
transition: opacity 0.5s;
z-index: 1;
}
&:before {
background: $white;
@@ -170,12 +166,22 @@
transform-origin: 100% 100%;
z-index: 2;
}
.navigation__main[data-hover] & {
&:after {
opacity: 0.7;
}
}
@for $i from 0 through 2 {
&.data_id_#{$i} {
&:before {
transition-delay: 0.3s + (0.1s * $i);
}
}
.navigation__main[data-hover="#{$i}"] &.data_id_#{$i} {
&:after {
opacity: 0.5 !important;
}
}
}
.navigation_open & {
&:before {
@@ -185,6 +191,24 @@
}
}
.navigation__item__background {
background-size: cover;
background-position: top center;
position: absolute;
top: -5%;
left: -5%;
right: -5%;
bottom: -5%;
z-index: 0;
transition: transform 8s;
transform: none;
@for $i from 0 through 2 {
.navigation__main[data-focus="#{$i}"] .navigation__item.data_id_#{$i} & {
transform: scale(1.1);
}
}
}
.navigation__list {
position: relative;
left: 0;
@@ -224,13 +248,14 @@
}
.navigation__item__title {
font-size: em(16px);
font-size: em(14px);
font-weight: 700;
text-transform: uppercase;
padding: 0 em(50px);
color: inherit;
text-decoration: none;
position: relative;
letter-spacing: 0.02em;
letter-spacing: 0.1em;
svg {
display: none;
}
@@ -265,23 +290,23 @@
.navigation__item__list {
width: 100%;
margin-top: em(10px);
margin-top: em(20px);
li {
a {
font-size: em(24px);
font-size: em(28px);
text-decoration: none;
color: inherit;
padding: em(15px) em(50px) em(15px) em(80px);
padding: em(10px) em(50px) em(10px) em(80px);
display: block;
font-weight: 600;
font-weight: 700;
transform: none;
transition: transform 0.3s $easeOutQuart, color 0.3s;
line-height: 1.3;
position: relative;
svg {
display: inline-block;
width: em(16px);
height: em(16px);
width: em(20px);
height: em(20px);
fill: currentColor;
margin-right: em(10px);
position: absolute;
@@ -294,9 +319,12 @@
transform: translateX(em(10px));
}
@media screen and (max-width: $large_breakpoint) {
font-size: em(23px);
padding: em(15px) em(20px) em(15px) em(50px);
svg {
left: em(20px);
width: em(16px);
height: em(16px);
}
}
}

13
private/scss/modules/plugins/_timetable.scss
View File

@@ -15,15 +15,20 @@ $timetable_count: 15;
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 34%;
left: 33%;
width: 30%;
left: 35%;
z-index: 560;
transition: top 0.5s $easeOutQuad, transform 0.5s $easeOutQuad;
@media screen and (max-width: $medium_breakpoint) {
top: em(80px);
top: em(50px);
width: 300%;
left: 50%;
max-width: 40vh;
transform: translateX(-50%);
transform: translateX(-50%) translateY(14%);
#timetable[data-active="0"] & {
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
}