nav and notification fixes

private/js/modules/navigation.js

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

private/js/modules/notifications.js

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

private/js/modules/plugins/timetable.js

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

private/scss/main.scss

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

private/scss/modules/_content.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;

private/scss/modules/_header.scss

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

private/scss/modules/_navigation.scss

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

private/scss/modules/_notification.scss

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

private/scss/modules/_search.scss

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

private/scss/modules/plugins/_form.scss

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

private/scss/modules/plugins/_journey_calculator.scss

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

private/scss/modules/plugins/_slider.scss

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

settings.py

@@ -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',
 ]
 

src/project/admin.py

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

src/project/context_processors.py

@@ -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 = {}

src/project/models.py

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

src/project/templates/main.html

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

src/project/templates/project/assets/bell.svg

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

src/project/templates/project/content.html

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

src/project/templates/project/includes/navigation.html

@@ -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' %}