navigation fixes

2018-03-19 14:20:01 +01:00
parent ff0fff0c5e
commit 340767ddab
9 changed files with 154 additions and 47 deletions
--- a/private/js/modules/navigation.js
+++ b/private/js/modules/navigation.js
@@ -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;
--- a/private/scss/modules/_footer.scss
+++ b/private/scss/modules/_footer.scss
@@ -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;
--- a/private/scss/modules/_header.scss
+++ b/private/scss/modules/_header.scss
@@ -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;
 }
--- a/private/scss/modules/_navigation.scss
+++ b/private/scss/modules/_navigation.scss
@@ -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);
        }
      }
    }
--- a/private/scss/modules/plugins/_timetable.scss
+++ b/private/scss/modules/plugins/_timetable.scss
@@ -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%);
+    }
  }
 }

--- a/settings.py
+++ b/settings.py
@@ -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
--- a/src/project/context_processors.py
+++ b/src/project/context_processors.py
@@ -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
--- a/src/project/templates/project/includes/main_menu.html
+++ b/src/project/templates/project/includes/main_menu.html
@@ -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 %}
--- a/src/project/templates/project/includes/meta_navigation.html
+++ b/src/project/templates/project/includes/meta_navigation.html
@@ -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' %}