diff --git a/private/js/modules/navigation.js b/private/js/modules/navigation.js index f4b71f2..63db060 100644 --- a/private/js/modules/navigation.js +++ b/private/js/modules/navigation.js @@ -22,6 +22,21 @@ $(function() { } }); + $body.on('click', '.navigation__item__title', function(event) { + event.preventDefault(); + var $this = $(this); + var $navigation_main = $this.parents('.navigation__main'); + var current = $navigation_main.attr('data-active'); + if (current) { + $navigation_main.removeAttr('data-active'); + } else { + $navigation_main.attr('data-active', ''); + window.setTimeout(function() { + $navigation_main.attr('data-active', $this.attr('data-id')); + }, 220); + } + }); + $body.on('click', '.header__button--navigation', function(event) { if ($body.hasClass('search_open')) { if (!$body.hasClass('_search') && !$body.hasClass('search_results')) { diff --git a/private/scss/modules/_header.scss b/private/scss/modules/_header.scss index f498a60..203e763 100644 --- a/private/scss/modules/_header.scss +++ b/private/scss/modules/_header.scss @@ -85,6 +85,7 @@ font-size: em(18px); line-height: em(48px); height: em(50px); + background: $white; color: $gray; font-weight: 300; position: absolute; diff --git a/private/scss/modules/_navigation.scss b/private/scss/modules/_navigation.scss index de72107..0bc079a 100644 --- a/private/scss/modules/_navigation.scss +++ b/private/scss/modules/_navigation.scss @@ -4,17 +4,23 @@ top: 0; left: 0; width: 100%; - height: auto; + height: 100%; + display: table; transform: translateY(-100%); transition: transform 1s $easeInOutQuart; body.navigation_open & { transform: none; } + @media screen and (max-width: $medium_breakpoint) { + display: block; + height: auto; + } } .navigation { width: 100%; - min-height: 100vh; + height: 100%; + display: table; background: $white; padding: em(50px) 0; .social_media { @@ -28,115 +34,291 @@ } @media screen and (max-width: $medium_breakpoint) { padding-bottom: 0; + display: block; + height: auto; + } +} + +.navigation__footer { + display: none; + .header__button { + width: 100%; + border: none; + border-top: 1px solid $medium_light_gray; + .search_open &, .navigation_open & { + transform: none; + } + } + @media screen and (max-width: $medium_breakpoint) { + display: block; } } -.navigation__lists { - padding: em(80px) 0; - margin-bottom: em(70px); +.navigation__meta { position: relative; - @media screen and (max-width: $small_breakpoint) { - padding: 0; - margin: em(10px) 0 em(50px) 0; + z-index: 5; + background: $light_gray; + .header__button { + background: none; } } -.navigation__list__main { - > li { - margin-top: em(30px); - > a { - text-decoration: none; - text-transform: uppercase; - font-size: em(40px); - line-height: 1.3; - letter-spacing: 0.02em; - font-weight: 500; - color: $green; - @media screen and (max-width: $small_breakpoint) { - font-size: em(30px); - } +.navigation__main { + height: 100%; + width: 100%; + display: table-cell; + vertical-align: middle; + @media screen and (max-width: $medium_breakpoint) { + display: block; + background: $white; + height: 75vh; + position: relative; + transition: height 0.2s ease-in; + &[data-active] { + height: em(600px); } - ul { - li { - margin-top: em(8px); - a { - display: inline-block; - padding: em(5px) 0; - color: $dark_gray; - text-transform: uppercase; - letter-spacing: 0.05em; - font-size: em(20px); - text-decoration: none; - line-height: 1.3; - font-weight: 300; - @media screen and (max-width: $small_breakpoint) { - font-size: em(18px); + } +} + +.navigation__item { + width: 33%; + margin-left: 0.5%; + display: inline-block; + vertical-align: top; + &:first-child { + margin-left: 0; + } + @media screen and (max-width: $medium_breakpoint) { + width: 100%; + min-height: 33% !important; + height: 33% !important; + display: block; + overflow: hidden; + position: absolute !important; + margin: 0; + will-change: transform; + transition: all 0.3s ease-out !important; + @for $i from 0 through 2 { + &.data_id_#{$i} { + top: 33.5% * $i; + } + .navigation__main[data-active="#{$i}"] & { + top: -33.5%; + &.data_id_#{$i} { + height: auto !important; + min-height: 100% !important; + top: 0 !important; + &:after { + opacity: 0.7; + } + .navigation__item__list { + max-height: em(800px); + transform: none; + opacity: 1; + } + .navigation__item__title { + span { + transform: translateY(em(20px)); + } + svg { + opacity: 1; + } + } + & ~ .navigation__item { + top: 100.5% !important; } } } } - &:first-child { - margin-top: 0; - } } } -.navigation__list__meta { +.navigation__images { position: absolute; + font-size: 0; + white-space: nowrap; + top: 0; left: 0; - li { - margin-left: em(20px); - display: inline-block; - a { - color: $dark_gray; - text-decoration: none; - font-size: em(15px); - line-height: 1.3; - } - &:first-child { - margin-left: 0; - } - } - @media screen and (max-width: $small_breakpoint) { + z-index: 0; + height: 100%; + width: 100%; + .navigation__item { + height: 100%; + background-size: cover; + background-position: top center; position: relative; - margin-top: em(50px); - li { - margin: 0; + overflow: hidden; + color: transparent; + &:before, &:after { + content: ''; display: block; - a { - display: inline-block; - padding: em(5px) 0; + position: absolute; + top: -5%; + left: -5%; + right: -5%; + bottom: -5%; + } + &:after { + background: $black; + opacity: 0.4; + transition: opacity 0.3s; + } + &:before { + background: $white; + transition: transform 1s $easeOutQuart; + transform: none; + transform-origin: 100% 100%; + z-index: 2; + } + @for $i from 0 through 2 { + &.data_id_#{$i} { + &:before { + transition-delay: 0.3s + (0.1s * $i); + } + } + } + .navigation_open & { + &:before { + transform: scaleY(0); } } } } -.navigation__list__meta--top { - top: 0; -} - -.navigation__list__meta--bottom { - bottom: 0; -} - -.navigation__footer { - display: none; - .header__button { - width: 100%; - border: none; - border-top: 1px solid $medium_light_gray; - .search_open &, .navigation_open & { +.navigation__list { + position: relative; + left: 0; + width: 100%; + display: inline-block; + white-space: nowrap; + font-size: 0; + color: $white; + .navigation__item { + padding: em(150px) 0; + transform: translateY(em(100px)); + opacity: 0; + white-space: normal; + transition: transform 1s $easeOutQuart, opacity 1s $easeOutQuart; + @for $i from 0 through 2 { + &.data_id_#{$i} { + transition-delay: 0.1s * $i; + } + } + .navigation_open & { + opacity: 1; transform: none; } + @for $i from 0 through 2 { + .navigation_open &.data_id_#{$i} { + transition-delay: 0.5s + (0.2s * $i); + } + } + @media screen and (max-width: $medium_breakpoint) { + padding: 0; + } + } + @media screen and (max-width: $medium_breakpoint) { + height: 100%; + overflow: hidden; + } +} + +.navigation__item__title { + font-size: em(16px); + text-transform: uppercase; + padding: 0 em(50px); + color: inherit; + text-decoration: none; + position: relative; + letter-spacing: 0.02em; + svg { + display: none; } @media screen and (max-width: $medium_breakpoint) { + padding: 0 em(20px); display: block; + height: 100%; + font-size: em(24px); + transition: height 0.2s ease-in; + span { + display: block; + position: absolute; + top: 50%; + transform: translateY(-50%); + transition: transform 0.3s ease-out; + } + svg { + fill: currentColor; + display: inline-block; + width: em(19px); + height: em(19px); + margin-right: em(10px); + vertical-align: baseline; + opacity: 0; + transition: opacity 0.3s ease-out; + } + .navigation__main[data-active] & { + height: em(200px); + } } } -.navigation__meta { - background: $light_gray; - .header__button { - background: none; +.navigation__item__list { + width: 100%; + margin-top: em(10px); + li { + a { + font-size: em(24px); + text-decoration: none; + color: inherit; + padding: em(15px) em(50px) em(15px) em(80px); + display: block; + font-weight: 600; + 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); + fill: currentColor; + margin-right: em(10px); + position: absolute; + top: 50%; + left: em(50px); + transform: translateY(-50%); + } + &:hover { + color: $green; + transform: translateX(em(10px)); + } + @media screen and (max-width: $large_breakpoint) { + padding: em(15px) em(20px) em(15px) em(50px); + svg { + left: em(20px); + } + } + } + } + @media screen and (max-width: $medium_breakpoint) { + overflow: hidden; + max-height: 0; + transition: max-height 0.3s ease-out, transform 0.3s ease-out, opacity 0.3s; + transform: translateY(em(100px)); + opacity: 0; + li { + a { + font-size: em(18px); + border-bottom: 1px solid rgba($white, 0.3); + padding: em(20px) em(20px) em(16px); + svg { + display: none; + } + &:first-child { + border-top: 1px solid rgba($white, 0.3); + } + } + } } } \ No newline at end of file diff --git a/src/project/admin.py b/src/project/admin.py index ba9cf19..cc0d1c1 100644 --- a/src/project/admin.py +++ b/src/project/admin.py @@ -2,9 +2,6 @@ from django.contrib import admin from cms.extensions import PageExtensionAdmin from parler.admin import TranslatableAdmin -from django.contrib.admin.models import LogEntry, DELETION -from django.utils.html import escape -from django.core.urlresolvers import reverse from project.models import ImageExtension, SliderItemQualification diff --git a/src/project/templates/project/includes/main_menu.html b/src/project/templates/project/includes/main_menu.html new file mode 100644 index 0000000..d487fa5 --- /dev/null +++ b/src/project/templates/project/includes/main_menu.html @@ -0,0 +1,33 @@ +{% load menu_tags thumbnail util_tags %} + +
+ {% 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 %} + + {% endif %} +
+ {% endfor %} +
+ {% endfor %} +
\ No newline at end of file diff --git a/src/project/templates/project/includes/navigation.html b/src/project/templates/project/includes/navigation.html index 40eaff1..e23a48e 100644 --- a/src/project/templates/project/includes/navigation.html +++ b/src/project/templates/project/includes/navigation.html @@ -1,17 +1,7 @@ {% load i18n cms_tags menu_tags %}
-
- - - -
+ {% show_menu 0 1 100 1 'project/includes/main_menu.html' %}
{% include 'project/includes/meta_navigation.html' %} diff --git a/src/project/templatetags/__init__.py b/src/project/templatetags/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/src/project/templatetags/util_tags.py b/src/project/templatetags/util_tags.py new file mode 100644 index 0000000..35f3caa --- /dev/null +++ b/src/project/templatetags/util_tags.py @@ -0,0 +1,13 @@ +# -*- coding: utf-8 -*- +from cms.models import Page +from django import template + +register = template.Library() + + +@register.filter +def page_image(id): + try: + return Page.objects.get(pk=id).imageextension.image + except: + return None \ No newline at end of file