petr
/
www.tagesschule-elementa.ch
forked from TagesschuleElementa/www.tagesschule-elementa.ch
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

menu update

Browse Source
standalone
Simon Caminada 8 years ago
parent e53a86912c
commit ff0fff0c5e
8 changed files with 325 additions and 94 deletions
Show Stats Download Patch File Download Diff File

15
private/js/modules/navigation.js
Unescape Escape View File

@ -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')) {

1
private/scss/modules/_header.scss
Unescape Escape View File

@ -85,6 +85,7 @@
font-size: em(18px);
line-height: em(48px);
height: em(50px);
background: $white;
color: $gray;
font-weight: 300;
position: absolute;

342
private/scss/modules/_navigation.scss
Unescape Escape View File

@ -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);
}
}
}
}
}

3
src/project/admin.py
Unescape Escape View File

@ -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

33
src/project/templates/project/includes/main_menu.html
Unescape Escape View File

@ -0,0 +1,33 @@
{% load menu_tags thumbnail util_tags %}
<div class="navigation__main">
{% for n in 'nn' %}
<div class="{% cycle 'navigation__images' 'navigation__list' %}">
{% for child in children %}
{% thumbnail child.id|page_image 800x800 crop=True as thumb %}
<div class="navigation__item data_id_{{ forloop.counter0 }}"
{% if forloop.parentloop.first %}style="background-image: url('{{ thumb.url }}');"{% endif %}>
<a href="#" class="navigation__item__title"
data-id="{{ forloop.counter0 }}">
<span>
{% include 'project/assets/arrow-left.svg' %}
{{ child.get_menu_title }}
</span>
</a>
{% if child.children %}
<ul class="navigation__item__list">
{% for grandchild in child.children %}
<li class="{% if grandchild.selected %}selected{% endif %}">
<a href="{{ grandchild.attr.redirect_url|default:grandchild.get_absolute_url }}">
{% include 'project/assets/arrow-right.svg' %}
{{ grandchild.get_menu_title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>

12
src/project/templates/project/includes/navigation.html
Unescape Escape View File

@ -1,17 +1,7 @@
{% load i18n cms_tags menu_tags %}
<div class="navigation">
<div class="navigation__lists">
<ul class="navigation__list__main">
{% show_menu 0 1 100 1 %}
</ul>
<ul class="navigation__list__meta navigation__list__meta--top">
{% show_menu_below_id 'meta' 0 0 0 0 %}
</ul>
<ul class="navigation__list__meta navigation__list__meta--bottom">
{% show_menu_below_id 'footer' 0 0 0 0 %}
</ul>
</div>
{% show_menu 0 1 100 1 'project/includes/main_menu.html' %}
<div class="navigation__footer">
{% include 'project/includes/meta_navigation.html' %}

0
src/project/templatetags/__init__.py
Unescape Escape View File

13
src/project/templatetags/util_tags.py
Unescape Escape View File

@ -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
Write Preview
Loading…
Cancel
Save