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

navigation fixes

Browse Source
standalone
Simon Caminada 8 years ago
parent ff0fff0c5e
commit 340767ddab
9 changed files with 154 additions and 47 deletions
Show Stats Download Patch File Download Diff File

28
private/js/modules/navigation.js
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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%);
}
}
}

1
settings.py
Unescape Escape View File

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

18
src/project/context_processors.py
Unescape Escape View File

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

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

@ -3,28 +3,32 @@
<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>
{% for child in children|slice:'3' %}
{% thumbnail child.id|page_image 800x1200 crop=True as thumb %}
<div class="navigation__item data_id_{{ forloop.counter0 }}" data-id="{{ forloop.counter0 }}">
{% if forloop.parentloop.first %}
<div class="navigation__item__background"
style="background-image: url('{{ thumb.url }}');"></div>
{% else %}
<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 %}
{% endif %}
</div>
{% endfor %}

6
src/project/templates/project/includes/meta_navigation.html
Unescape Escape View File

@ -15,6 +15,9 @@
{% if news_url %}
<a href="{{ news_url }}" class="header__button header__button--reverse header__button--light data_id_1">
<span class="header__button__icon">
{% if new_news_amount %}
<span class="header__button__icon__number">{{ new_news_amount }}</span>
{% endif %}
{% include 'project/assets/news.svg' %}
</span>
{% trans 'News' %}
@ -23,6 +26,9 @@
{% if calendar_url %}
<a href="{{ calendar_url }}" class="header__button header__button--reverse header__button--light data_id_2">
<span class="header__button__icon">
{% if new_calendar_amount %}
<span class="header__button__icon__number">{{ new_calendar_amount }}</span>
{% endif %}
{% include 'project/assets/calendar.svg' %}
</span>
{% trans 'Kalender' %}

Write Preview
Loading…
Cancel
Save