From 340767ddab4d4962695e2f31b05ece458814fcd0 Mon Sep 17 00:00:00 2001 From: Simon Caminada Date: Mon, 19 Mar 2018 14:20:01 +0100 Subject: [PATCH] navigation fixes --- private/js/modules/navigation.js | 28 ++++++++ private/scss/modules/_footer.scss | 2 +- private/scss/modules/_header.scss | 17 +++++ private/scss/modules/_navigation.scss | 68 +++++++++++++------ private/scss/modules/plugins/_timetable.scss | 13 ++-- settings.py | 1 + src/project/context_processors.py | 18 +++++ .../templates/project/includes/main_menu.html | 48 +++++++------ .../project/includes/meta_navigation.html | 6 ++ 9 files changed, 154 insertions(+), 47 deletions(-) diff --git a/private/js/modules/navigation.js b/private/js/modules/navigation.js index 63db060..5f56fa2 100644 --- a/private/js/modules/navigation.js +++ b/private/js/modules/navigation.js @@ -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; diff --git a/private/scss/modules/_footer.scss b/private/scss/modules/_footer.scss index 3219fdf..9686f99 100644 --- a/private/scss/modules/_footer.scss +++ b/private/scss/modules/_footer.scss @@ -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; diff --git a/private/scss/modules/_header.scss b/private/scss/modules/_header.scss index 203e763..62cce2b 100644 --- a/private/scss/modules/_header.scss +++ b/private/scss/modules/_header.scss @@ -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; } \ No newline at end of file diff --git a/private/scss/modules/_navigation.scss b/private/scss/modules/_navigation.scss index 0bc079a..5b1bdff 100644 --- a/private/scss/modules/_navigation.scss +++ b/private/scss/modules/_navigation.scss @@ -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); } } } diff --git a/private/scss/modules/plugins/_timetable.scss b/private/scss/modules/plugins/_timetable.scss index 80b1f33..e29a1e0 100644 --- a/private/scss/modules/plugins/_timetable.scss +++ b/private/scss/modules/plugins/_timetable.scss @@ -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%); + } } } diff --git a/settings.py b/settings.py index a0a381e..573b1ed 100644 --- a/settings.py +++ b/settings.py @@ -38,6 +38,7 @@ MIDDLEWARE_CLASSES.extend([ TEMPLATES[0]['OPTIONS']['context_processors'] += [ 'project.context_processors.search_form', + 'project.context_processors.new_page_amount', ] THUMBNAIL_PROCESSORS = ('image_cropping.thumbnail_processors.crop_corners',) + THUMBNAIL_PROCESSORS diff --git a/src/project/context_processors.py b/src/project/context_processors.py index 21280d0..b986d38 100644 --- a/src/project/context_processors.py +++ b/src/project/context_processors.py @@ -1,5 +1,23 @@ +from cms.models import Page from haystack.forms import ModelSearchForm def search_form(request): return {'search_form': ModelSearchForm} + + +def new_page_amount(request): + tracked_pages = ['news', 'calendar'] + context = {} + + for tracked_page in tracked_pages: + try: + page = Page.objects.public().get(reverse_id=tracked_page) + id = 'new_{}_amount'.format(tracked_page) + context.update({ + id: page.get_child_pages().count() + }) + except Page.DoesNotExist: + pass + + return context diff --git a/src/project/templates/project/includes/main_menu.html b/src/project/templates/project/includes/main_menu.html index d487fa5..c13bb5c 100644 --- a/src/project/templates/project/includes/main_menu.html +++ b/src/project/templates/project/includes/main_menu.html @@ -3,28 +3,32 @@
{% for n in 'nn' %}
- {% for child in children %} - {% thumbnail child.id|page_image 800x800 crop=True as thumb %} -
- - - {% include 'project/assets/arrow-left.svg' %} - {{ child.get_menu_title }} - - - {% if child.children %} - + {% for child in children|slice:'3' %} + {% thumbnail child.id|page_image 800x1200 crop=True as thumb %} +
+ {% if forloop.parentloop.first %} +
+ {% else %} + + + {% include 'project/assets/arrow-left.svg' %} + {{ child.get_menu_title }} + + + {% if child.children %} + + {% endif %} {% endif %}
{% endfor %} diff --git a/src/project/templates/project/includes/meta_navigation.html b/src/project/templates/project/includes/meta_navigation.html index cea7d18..e842abb 100644 --- a/src/project/templates/project/includes/meta_navigation.html +++ b/src/project/templates/project/includes/meta_navigation.html @@ -15,6 +15,9 @@ {% if news_url %} + {% if new_news_amount %} + {{ new_news_amount }} + {% endif %} {% include 'project/assets/news.svg' %} {% trans 'News' %} @@ -23,6 +26,9 @@ {% if calendar_url %} + {% if new_calendar_amount %} + {{ new_calendar_amount }} + {% endif %} {% include 'project/assets/calendar.svg' %} {% trans 'Kalender' %}