nav and notification fixes

standalone
Simon Caminada 8 years ago
parent 8486532c37
commit 1f3038ebbc

@ -84,6 +84,7 @@ $(function() {
function open_navigation() {
window.timetable_can_scroll = false;
window.navigation_is_open = true;
$body.removeClass('notification_open');
$navigation.one(window.transitionend, function() {
window.requestAnimationFrame(function() {

@ -0,0 +1,13 @@
$(function() {
var $body = $('body');
$body.on('click', '.header__button--notification', function(event) {
event.preventDefault();
$body.toggleClass('notification_open');
});
$body.on('click', '.notification__close', function(event) {
event.preventDefault();
$body.removeClass('notification_open');
});
});

@ -19,6 +19,7 @@ $(function() {
if (!window.navigation_is_open) {
if (activated) {
if ($(window).scrollTop() < $(window).height() * 0.05 && window.timetable_can_scroll) {
$body.removeClass('notification_open');
window.prevent_scroll_calc = true;
$timetable.attr('data-active', 0);
$timetable.removeClass('active');
@ -26,6 +27,7 @@ $(function() {
}
} else {
if ($(window).scrollTop() > $(window).height() * 0.05 && window.timetable_can_scroll) {
$body.removeClass('notification_open');
init_timetable_items();
}
}

@ -5,6 +5,7 @@
@import "_typography.scss";
@import "_layout.scss";
@import "modules/_header.scss";
@import "modules/_notification.scss";
@import "modules/_footer.scss";
@import "modules/_search.scss";
@import "modules/_navigation.scss";

@ -123,14 +123,16 @@ $max-width: 100%;
}
.content__navigation__title {
font-size: em(16px);
color: $green;
padding-top: em(10px);
font-size: em(18px);
color: $gray;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.35;
display: block;
width: 100%;
font-weight: 900;
font-weight: 700;
margin-bottom: em(20px);
}
.content__navigation__content {
@ -161,7 +163,7 @@ $max-width: 100%;
}
.content__navigation__anchor {
font-size: em(16px);
font-size: em(14px);
color: $gray;
letter-spacing: 0.02em;
text-transform: uppercase;

@ -11,7 +11,7 @@
z-index: 506;
overflow: hidden;
transition: z-index 0s 1s;
will-change: transform, top;
will-change: transform;
.search_open &, .navigation_open & {
z-index: 909;
transition: z-index 0s;
@ -186,11 +186,8 @@
.search_open &, .navigation_open & {
transform: translateY(-100%);
}
@media screen and (max-width: $small_breakpoint) {
padding: 0 em(5px);
}
@media screen and (max-width: $tiny_breakpoint) {
padding: 0;
@media screen and (max-width: $medium_breakpoint) {
display: none;
}
}
@ -346,6 +343,45 @@
}
}
@keyframes ring {
0% {
transform: rotate(0);
}
10% {
transform: rotate(-10deg);
}
20% {
transform: rotate(10deg);
}
30% {
transform: rotate(-10deg);
}
40% {
transform: rotate(10deg);
}
50% {
transform: rotate(0);
}
}
.header__button--notification {
font-size: 0;
padding-left: 0;
.header__button__icon {
transform-origin: 50% 30%;
animation: ring 2s $easeOutQuad infinite;
}
svg {
transform: none;
transition: transform 0.3s $easeOutQuart;
}
&:hover {
svg {
transform: scale(1.12);
}
}
}
.header__button__icon {
width: em(32px);
height: em(32px);

@ -59,6 +59,19 @@
}
}
.navigation__extra {
position: relative;
width: 100%;
min-height: em(50px);
.header__languages {
position: absolute;
top: 0;
right: 0;
transform: none;
display: block;
}
}
.navigation__main {
height: 100%;
width: 100%;

@ -0,0 +1,95 @@
.notification {
position: fixed;
top: em(80px);
right: em(30px);
width: em(260px);
z-index: 1000;
height: auto;
background: $white;
box-shadow: 0 0 em(30px) rgba($black, 0.2);
transform: scale(0);
opacity: 0;
transform-origin: 23% 5%;
transition: transform 0.3s $easeOutQuad, opacity 0.3s $easeOutQuad;
&:before {
content: '';
display: block;
background: $white;
z-index: -2;
position: absolute;
top: em(-10px);
right: em(187px);
width: em(20px);
height: em(20px);
transform: rotate(45deg);
box-shadow: 0 0 30px rgba($black, 0.2);
}
.notification_open & {
opacity: 1;
transform: none;
}
.cms-toolbar-expanded & {
margin-top: 46px;
}
@media screen and (max-width: $small_breakpoint) {
transform-origin: 36% 5%;
&:before {
right: em(157px);
}
}
}
.notification__content {
width: 100%;
height: auto;
padding: em(20px) em(30px);
position: relative;
overflow: auto;
max-height: 70vh;
background: $white;
}
.notification__title {
line-height: 1.35;
color: $green;
font-size: em(18px);
font-weight: 700;
padding-right: em(55px);
margin-bottom: em(10px);
}
.notification__text {
line-height: 1.4;
color: $dark_gray;
font-size: em(14px);
}
.notification__button {
margin-top: em(20px);
height: em(38px) !important;
line-height: em(36px) !important;
font-size: em(12px) !important;
svg {
width: em(24px) !important;
height: em(24px) !important;
margin: em(7px) 0 !important;
}
}
.notification__close {
position: absolute;
top: 0;
right: 0;
padding: em(25px);
svg {
width: em(20px);
height: em(20px);
fill: $dark_gray;
transition: fill 0.3s;
}
&:hover {
svg {
fill: $near_black;
}
}
}

@ -52,7 +52,7 @@
top: 0;
transform: none;
}
input {
input[type="text"] {
display: block;
width: 100%;
height: em(90px);
@ -97,7 +97,7 @@
}
}
@media screen and (max-width: $large_breakpoint) {
input {
input[type="text"] {
height: em(60px);
font-size: em(23px);
text-indent: em(17px);

@ -58,7 +58,7 @@
background: $green;
border-radius: 0;
color: $white;
font-weight: 900;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.02em;
position: relative;

@ -36,7 +36,7 @@
padding-right: em(105px);
transition: padding 0.3s ease-in-out;
will-change: padding;
input {
input[type="text"] {
border: none;
background: $white;
height: em(45px);

@ -131,7 +131,8 @@
top: 0;
left: 0;
right: em(180px);
bottom: 0;
padding-bottom: 56%;
max-height: 100%;
z-index: -1;
@media screen and (max-width: $medium_breakpoint) {
right: 10%;
@ -173,7 +174,7 @@
font-size: 0;
white-space: nowrap;
overflow: hidden;
padding-bottom: em(40px);
padding-bottom: em(50px);
@media screen and (max-width: $medium_breakpoint) {
width: 90%;
}
@ -263,28 +264,27 @@
.slider__text__item__email {
display: block;
text-decoration: none;
width: em(70px);
height: em(70px);
width: 70px;
height: 70px;
background: $white;
border-radius: 50%;
position: absolute;
bottom: em(-30px);
bottom: -30px;
left: 20%;
transform: none;
transition: transform 0.2s ease-in-out, box-shadow 0.2s;
box-shadow: 0 0 em(30px) rgba($black, 0);
transition: transform 0.2s ease-in-out;
box-shadow: 0 0 30px rgba($black, 0.1);
text-align: center;
line-height: em(69px);
line-height: 69px;
svg {
display: inline-block;
fill: $green;
width: em(30px);
height: em(30px);
width: 30px;
height: 30px;
vertical-align: middle;
margin-top: -2px;
}
&:hover {
transform: scale(1.1);
box-shadow: 0 0 em(30px) rgba($black, 0.1);
}
}

@ -38,6 +38,7 @@ MIDDLEWARE_CLASSES.extend([
TEMPLATES[0]['OPTIONS']['context_processors'] += [
'project.context_processors.search_form',
'project.context_processors.notification',
'project.context_processors.new_page_amount',
]

@ -3,7 +3,7 @@ from django.contrib import admin
from cms.extensions import PageExtensionAdmin
from parler.admin import TranslatableAdmin
from project.models import ImageExtension, SliderItemQualification
from project.models import ImageExtension, SliderItemQualification, Notification
@admin.register(ImageExtension)
@ -14,3 +14,8 @@ class ImageExtensionAdmin(PageExtensionAdmin):
@admin.register(SliderItemQualification)
class SliderItemQualificationAdmin(TranslatableAdmin):
pass
@admin.register(Notification)
class NotificationAdmin(TranslatableAdmin):
pass

@ -1,11 +1,17 @@
from cms.models import Page
from haystack.forms import ModelSearchForm
from project.models import Notification
def search_form(request):
return {'search_form': ModelSearchForm}
def notification(request):
return {'notification': Notification.objects.filter(published=True).first()}
def new_page_amount(request):
tracked_pages = ['news', 'calendar']
context = {}

@ -1,4 +1,5 @@
# -*- coding: utf-8 -*-
from cms.models.fields import PageField
from cms.models.pluginmodel import CMSPlugin
from django.db import models
from itertools import chain
@ -54,6 +55,38 @@ class Video(CMSPlugin):
return str(self.vimeo_id)
class Notification(TranslatableModel):
translations = TranslatedFields(
title=models.CharField('Titel', max_length=256, null=True, blank=True),
text=models.TextField('Text', null=True, blank=True),
cta=models.CharField('CTA Text', max_length=256, null=True, blank=True)
)
page = PageField(verbose_name='Seite')
published = models.BooleanField(verbose_name='Veröffentlicht', default=True)
updated = models.DateTimeField(verbose_name='Aktualisiert', auto_now=True)
class Meta:
verbose_name = 'Benachrichtigung'
verbose_name_plural = 'Benachrichtigungen'
def __str__(self):
return self.get_title
@property
def get_title(self):
if self.title:
return self.title
else:
return self.page.get_page_title()
@property
def get_text(self):
if self.text:
return self.text
else:
return self.page.get_meta_description()
class SliderItemQualification(TranslatableModel):
translations = TranslatedFields(
name=models.CharField('name', max_length=256)
@ -61,6 +94,8 @@ class SliderItemQualification(TranslatableModel):
ordering = models.IntegerField(verbose_name='Sortierung', default=5)
class Meta:
verbose_name = 'Slider Qualifikation'
verbose_name_plural = 'Slider Qualifikationen'
ordering = ['ordering']
def __str__(self):

@ -27,80 +27,115 @@
{{ ALDRYN_SNAKE.render_head }}
</head>
<body class="{% block body_class %}{% endblock %}">
{% cms_toolbar %}
<a href="/{{ LANGUAGE_CODE }}/" class="header__logo reveal reveal_animation">
<img src="{% static 'img/tagesschule-elementa.svg' %}" width="100" height="100">
</a>
<div id="navigation">
{% include 'project/includes/navigation.html' %}
</div>
<div id="search">
{% include 'project/includes/search_form.html' %}
</div>
{% url 'search' as search_url %}
<div class="header reveal reveal_animation data_delay_2">
<span class="header__slogan">{% trans 'Stärken stärken. Lernen lernen.' %}</span>
<ul class="header__languages">
{% for lang in LANGUAGES %}
<li class="{% if lang.0 == LANGUAGE_CODE %}active{% endif %}">
<a href="{% page_language_url lang.0 %}">{{ lang.0 }}</a>
</li>
{% endfor %}
</ul>
<a href="#" class="header__button header__button--search data_id_2">
{% trans 'Suche' %}
<span class="header__button__icon">
{% include 'project/assets/search.svg' %}
</span>
{% cms_toolbar %}
<a href="/{{ LANGUAGE_CODE }}/" class="header__logo reveal reveal_animation data_delay_2">
<img src="{% static 'img/tagesschule-elementa.svg' %}" width="100" height="100">
</a>
<div id="navigation">
{% include 'project/includes/navigation.html' %}
</div>
<div id="search">
{% include 'project/includes/search_form.html' %}
</div>
{% url 'search' as search_url %}
{% with request.get_full_path as current_url %}
<a href="{% if search_url in current_url %}/{{ LANGUAGE_CODE }}/{% else %}{{ current_url }}{% endif %}"
class="event header__button header__button--navigation data_id_3">
{% trans 'Menü' %}
{% if notification %}
<div class="notification">
<div class="notification__content">
<div class="notification__title">
{{ notification.get_title }}
</div>
<div class="notification__text">
{{ notification.get_text }}
</div>
<a href="{{ notification.page.get_public_url }}" class="notification__button button">
<span class="button__icon">{% include 'project/assets/arrow-right-long.svg' %}</span>
<span class="button__text">
{% if notification.cta %}
{{ notification.cta }}
{% else %}
{% trans 'Mehr erfahren' %}
{% endif %}
</span>
</a>
<a href="#" class="notification__close">
{% include 'project/assets/close.svg' %}
</a>
</div>
</div>
{% endif %}
<div class="header reveal reveal_animation data_delay_0">
<span class="header__slogan">{% trans 'Stärken stärken. Lernen lernen.' %}</span>
<ul class="header__languages">
{% for lang in LANGUAGES %}
<li class="{% if lang.0 == LANGUAGE_CODE %}active{% endif %}">
<a href="{% page_language_url lang.0 %}">{{ lang.0 }}</a>
</li>
{% endfor %}
</ul>
{% if notification %}
<a href="#" class="header__button header__button--notification data_id_1">
{% trans 'Aktuell' %}
<span class="header__button__icon">
{% include 'project/assets/bell.svg' %}
</span>
</a>
{% endif %}
<a href="#" class="header__button header__button--search data_id_2">
{% trans 'Suche' %}
<span class="header__button__icon">
{% include 'project/assets/menu.svg' %}
{% include 'project/assets/search.svg' %}
</span>
</a>
{% endwith %}
<div class="header__navigation">
{% include 'project/includes/meta_navigation.html' %}
{% url 'search' as search_url %}
{% with request.get_full_path as current_url %}
<a href="{% if search_url in current_url %}/{{ LANGUAGE_CODE }}/{% else %}{{ current_url }}{% endif %}"
class="event header__button header__button--navigation data_id_3">
{% trans 'Menü' %}
<span class="header__button__icon">
{% include 'project/assets/menu.svg' %}
</span>
</a>
{% endwith %}
<div class="header__navigation">
{% include 'project/includes/meta_navigation.html' %}
</div>
</div>
</div>
<div id="canvas">
{% block content %}
{% placeholder 'content' %}
{% endblock %}
</div>
<div class="footer">
<a href="#" class="footer__login header__button header__button--light data_id_1">
<span class="header__button__icon">
{% include 'project/assets/arrow-right-long.svg' %}
</span>
{% trans 'Login' %}
</a>
<div class="footer__content">
{% show_menu_below_id 'footer' 0 0 0 0 'project/includes/header_button_menu.html' %}
{% static_placeholder 'social_media' %}
<div id="canvas">
{% block content %}
{% placeholder 'content' %}
{% endblock %}
</div>
<div class="footer">
<a href="#" class="footer__login header__button header__button--light data_id_1">
<span class="header__button__icon">
{% include 'project/assets/arrow-right-long.svg' %}
</span>
{% trans 'Login' %}
</a>
<div class="footer__content">
{% show_menu_below_id 'footer' 0 0 0 0 'project/includes/header_button_menu.html' %}
{% static_placeholder 'social_media' %}
</div>
</div>
</div>
<script type="text/javascript" src="{% static 'js/lib.js' %}"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
<script type="text/javascript" src="{% static 'js/lib.js' %}"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
{% block extra_body %}{% endblock %}
{% block extra_body %}{% endblock %}
{% render_block "js" %}
{{ ALDRYN_SNAKE.render_tail }}
{% render_block "js" %}
{{ ALDRYN_SNAKE.render_tail }}
</body>
</html>

@ -0,0 +1,4 @@
<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M26.1088419,26.8285757 L21.4514741,26.8285757 C21.2509751,28.834446 19.558718,30.4 17.4999386,30.4 C15.4411592,30.4 13.7489021,28.834446 13.5484031,26.8285757 L8.89222581,26.8285757 C6.89359454,26.8285757 5.70069754,24.6071268 6.80888894,22.947603 L8.14460849,20.9500828 L8.14460849,17.5000744 C8.14460849,13.2343044 10.5781731,9.81681331 14.4213758,8.62734156 L14.4213758,7.67856824 C14.4213758,5.97768586 15.7990592,4.6 17.4999386,4.6 C19.200818,4.6 20.5785015,5.97768586 20.5785015,7.67856824 L20.5785015,8.63346089 C24.4227407,9.84401727 26.8330929,13.3263888 26.8552687,17.8056098 L26.8552687,20.9500473 L28.1899125,22.9476111 C29.2999616,24.6064378 28.1070455,26.8285757 26.1088419,26.8285757 Z M16.6070722,8.6121088 C17.2325477,8.55979338 17.7405828,8.55630529 18.3927844,8.6121088 L18.3927844,7.67856824 C18.3927844,7.18681287 17.9916837,6.78571216 17.4999283,6.78571216 C17.0081729,6.78571216 16.6070722,7.18681287 16.6070722,7.67856824 L16.6070722,8.6121088 Z M17.4999283,28.2141688 C18.4846295,28.2141688 19.2856404,27.4131578 19.2856404,26.4284566 L15.7142161,26.4284566 C15.7142161,27.4131578 16.5152271,28.2141688 17.4999283,28.2141688 Z M25.2480119,23.9284626 C25.4771147,23.9284894 25.6120893,23.6836468 25.4865315,23.496356 L24.2236401,21.6077511 C24.0468171,21.3430549 23.9526494,21.0322875 23.9526494,20.7142075 L23.9526494,17.7750146 C23.932828,13.76868 21.3399739,11.0713618 17.4999785,11.0713618 C13.7007508,11.0713618 11.0473076,13.7143051 11.0473076,17.4999256 L11.0483538,20.7131361 C11.0483538,21.031216 10.9541914,21.3419621 10.7773631,21.6066796 L9.51447173,23.4952845 C9.3889058,23.68467 9.52388689,23.9284626 9.75303037,23.9284626 L25.2480119,23.9284626 Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@ -10,7 +10,9 @@
<div class="content__navigation reveal_self reveal reveal_animation data_delay_3">
<div class="content__navigation__frame">
<div class="content__navigation__main">
<span class="content__navigation__title"></span>
<span class="content__navigation__title">
{{ request.current_page }}
</span>
<div class="content__navigation__content">
<div class="content__navigation__progress">
<span class="content__navigation__progress__fill"></span>

@ -8,7 +8,16 @@
<div class="navigation__meta">
{% show_menu_below_id 'footer' 0 0 0 0 'project/includes/header_button_menu.html' %}
</div>
{% static_placeholder 'social_media' %}
<div class="navigation__extra">
{% static_placeholder 'social_media' %}
<ul class="header__languages">
{% for lang in LANGUAGES %}
<li class="{% if lang.0 == LANGUAGE_CODE %}active{% endif %}">
<a href="{% page_language_url lang.0 %}">{{ lang.0 }}</a>
</li>
{% endfor %}
</ul>
</div>
<a href="#" class="footer__login header__button header__button--light header__button--reverse data_id_1">
<span class="header__button__icon">
{% include 'project/assets/arrow-right-long.svg' %}

Loading…
Cancel
Save