navigation frame

private/js/modules/navigation.js

@@ -12,7 +12,8 @@ $(function() {
   $body.on('click', 'a', function(event) {
     var href = $(this).attr('href');
     var target = $(this).attr('target');
-    if (href.indexOf('/') === 0 && !target && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && !$('html').hasClass('cms-ready')) {
+    var is_event = $(this).hasClass('event');
+    if (href.indexOf('/') === 0 && !target && !is_event && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && !$('html').hasClass('cms-ready')) {
       event.preventDefault();
       $body.addClass('unload loading');
       window.setTimeout(function() {
@@ -22,13 +23,21 @@ $(function() {
   });
 
   $body.on('click', '.header__button--navigation', function(event) {
-    event.preventDefault();
-    open_navigation();
-  });
-
-  $body.on('click', '.navigation__close', function(event) {
-    event.preventDefault();
-    close_navigation();
+    if ($body.hasClass('search_open')) {
+      if (!$body.hasClass('_search') && !$body.hasClass('search_results')) {
+        event.preventDefault();
+        window.close_search();
+      } else {
+        $(this).removeClass('event');
+        $(this).click();
+      }
+    } else if ($body.hasClass('navigation_open')) {
+      event.preventDefault();
+      close_navigation();
+    } else {
+      event.preventDefault();
+      open_navigation();
+    }
   });
 
   var scroll_top = 0;

private/js/modules/plugins/timetable.js

@@ -16,19 +16,22 @@ $(function() {
   var activated = false;
 
   function test_scroll() {
-    if (activated) {
-      if ($(window).scrollTop() < $(window).height() * 0.05 && window.timetable_can_scroll) {
-        window.prevent_scroll_calc = true;
-        $timetable.attr('data-active', 0);
-        $timetable.removeClass('active');
-        activated = false;
-      }
-    } else {
-      if ($(window).scrollTop() > $(window).height() * 0.05 && window.timetable_can_scroll) {
-        init_timetable_items();
+    if (!window.navigation_is_open) {
+      if (activated) {
+        if ($(window).scrollTop() < $(window).height() * 0.05 && window.timetable_can_scroll) {
+          window.prevent_scroll_calc = true;
+          $timetable.attr('data-active', 0);
+          $timetable.removeClass('active');
+          activated = false;
+        }
+      } else {
+        if ($(window).scrollTop() > $(window).height() * 0.05 && window.timetable_can_scroll) {
+          init_timetable_items();
+        }
       }
     }
     window.requestAnimationFrame(test_scroll);
+
   }
 
   function init_timetable_items() {

private/js/modules/search.js

@@ -7,13 +7,6 @@ $(function() {
     open_search();
   });
 
-  $body.on('click', '.search__close', function(event) {
-    if (!$body.hasClass('_search') && !$body.hasClass('search_results')) {
-      event.preventDefault();
-      close_search();
-    }
-  });
-
   var scroll_top = 0;
   var search_input_timeout;
 
@@ -47,6 +40,7 @@ $(function() {
       window.timetable_can_scroll = true;
     });
   }
+  window.close_search = close_search;
 
   $body.on('submit', '.search__form', function(event) {
     event.preventDefault();
@@ -59,9 +53,8 @@ $(function() {
     history.pushState({}, 'search', form_url + '?' + serialized_form);
 
     if (serialized_form !== 'q=') {
-      if ($body.hasClass('search_results')) {
-        $body.find('.search__results').addClass('loading');
-      }
+      var $search_content_main = $body.find('.search__content__main');
+      $search_content_main.addClass('loading');
 
       $.ajax({
         type: $form.attr('method'),
@@ -70,6 +63,7 @@ $(function() {
         success: function(data) {
           $body.find('#canvas').remove();
           $body.addClass('_search');
+          $search_content_main.removeClass('loading');
           $body.find('.search__results').replaceWith($(data).find('.search__results'));
           window.requestAnimationFrame(function() {
             $body.addClass('search_results');

private/scss/_config.scss

@@ -29,7 +29,7 @@ $huge_breakpoint: 1700px;
 $large_breakpoint: 1200px;
 $medium_breakpoint: 840px;
 $small_breakpoint: 600px;
-$tiny_breakpoint: 350px;
+$tiny_breakpoint: 370px;
 
 $reveal_duration: 1.5s;
 $reveal_timing_function: $easeOutQuart;

private/scss/main.scss

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

private/scss/modules/_footer.scss

@@ -0,0 +1,61 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: em(51px);
+  border-top: em(1px) solid $light_gray;
+  background: $white;
+  text-align: right;
+  font-size: 0;
+  z-index: 912;
+  transform: translateY(em(60px));
+  transition: transform 0.5s $easeOutQuad, opacity 0s 0.5s;
+  opacity: 0;
+  .navigation_open & {
+    transition: transform 0.5s $easeOutQuad, opacity 0s;
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.footer__content {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  .header__button {
+    position: relative;
+    top: 100%;
+  }
+  .social_media {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    top: 100%;
+    width: auto;
+    padding: em(8px) em(15px);
+    border-left: em(1px) solid $light_gray;
+    transition: transform 0.5s 0.5s;
+    .navigation_open & {
+      transform: translateY(-100%);
+    }
+  }
+}
+
+.footer__login {
+  position: absolute;
+  z-index: 5;
+  bottom: -100%;
+  background: $green;
+  color: $white !important;
+  height: em(60px);
+  line-height: em(60px);
+  border: none;
+  padding: 0 em(30px) !important;
+  .header__button__icon {
+    width: em(16px);
+    height: em(16px);
+    top: em(-1px);
+    margin-right: em(10px);
+  }
+}

private/scss/modules/_header.scss

@@ -9,11 +9,12 @@
   text-align: right;
   font-size: 0;
   z-index: 506;
-  box-shadow: 0 -1px 0 0 $light_gray, 0 em(-50px) 0 0 $white;
-  transition: top 1s $easeInOutQuart;
+  overflow: hidden;
+  transition: z-index 0s 1s;
   will-change: transform, top;
-  .search_open & {
-    top: 100%;
+  .search_open &, .navigation_open & {
+    z-index: 909;
+    transition: z-index 0s;
   }
   &.reveal {
     transform: translateY(-100%);
@@ -23,6 +24,16 @@
   }
 }
 
+.header__navigation {
+  position: absolute;
+  top: 100%;
+  right: em(62px);
+  z-index: 2;
+  .search_open & {
+    display: none;
+  }
+}
+
 .header__logo {
   position: fixed;
   top: 0;
@@ -37,7 +48,7 @@
     height: em(100px);
     display: block;
   }
-  .search_open & {
+  .search_open &, .navigation_open & {
     z-index: 910;
     transition: z-index 0s;
   }
@@ -55,6 +66,20 @@
       display: block;
     }
   }
+  @media screen and (max-width: $small_breakpoint) {
+    padding: em(8px) em(10px) em(10px) em(10px);
+    img {
+      width: em(70px);
+      height: em(70px);
+    }
+  }
+  @media screen and (max-width: $tiny_breakpoint) {
+    padding: em(4px) em(5px) em(8px) em(5px);
+    img {
+      width: em(60px);
+      height: em(60px);
+    }
+  }
 }
 
 .header__slogan {
@@ -72,7 +97,7 @@
   }
 }
 
-.header__logo, .header__slogan {
+.header__logo, .header__slogan, .footer__login {
   left: 15%;
   .timetable_body & {
     left: em(100px);
@@ -83,14 +108,78 @@
   @media screen and (max-width: $large_breakpoint) {
     left: em(30px) !important;
   }
+  @media screen and (max-width: $small_breakpoint) {
+    left: em(15px) !important;
+  }
+  @media screen and (max-width: $tiny_breakpoint) {
+    left: 0 !important;
+  }
+}
+
+.header__languages {
+  vertical-align: top;
+  display: inline-block;
+  height: 100%;
+  padding: 0 em(15px);
+  transition: transform 0.5s 0.1s;
+  transform: none;
+  li {
+    display: inline-block;
+    height: em(50px);
+    &:first-child {
+      a:before {
+        display: none;
+      }
+    }
+    a {
+      color: $dark_gray;
+      text-decoration: none;
+      font-size: em(14px);
+      line-height: em(50px);
+      width: em(40px);
+      text-transform: uppercase;
+      display: block;
+      font-weight: 800;
+      text-align: center;
+      opacity: 0.5;
+      transition: opacity 0.2s $easeOutQuad;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: em(15px);
+        bottom: em(15px);
+        width: em(1px);
+        background: $medium_light_gray;
+      }
+      &:hover {
+        opacity: 1;
+      }
+    }
+    &.active {
+      font-weight: bold;
+      a {
+        opacity: 1;
+      }
+    }
+  }
+  .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;
+  }
 }
 
 .header__button {
   height: em(50px);
+  vertical-align: top;
   line-height: em(48px);
   display: inline-block;
   border-left: em(1px) solid $light_gray;
-  border-bottom: em(1px) solid $light_gray;
   font-size: em(18px);
   font-weight: 800;
   color: $green;
@@ -98,14 +187,60 @@
   padding: 0 em(64px) 0 em(18px);
   position: relative;
   background: $white;
-  transition: background 0.3s ease-in-out;
-  vertical-align: middle;
+  transition: transform 0.5s, border 0.3s, color 0.3s;
+  transform: none;
+  @for $i from 0 through 5 {
+    &.data_id_#{$i} {
+      transition-delay: $i * 0.1s, 0s, 0s;
+      .header__button__icon {
+        transition: transform 0.5s $i * 0.1s;
+      }
+    }
+  }
+  &.header__button--reverse {
+    padding: 0 em(18px) 0 em(64px);
+  }
+  &.header__button--light {
+    padding: 0 em(15px);
+  }
+  &.header__button--light {
+    font-size: em(14px);
+    font-weight: 400;
+    color: $dark_gray;
+  }
+  &:last-child {
+    border-right: em(1px) solid $light_gray;
+  }
+  .search_open &, .navigation_open & {
+    transform: translateY(em(-50px));
+  }
+  @media screen and (max-width: $small_breakpoint) {
+    padding: 0 em(54px) 0 em(12px);
+    &.header__button--reverse {
+      padding: 0 em(12px) 0 em(54px);
+    }
+  }
+}
+
+.header__button--light {
+  line-height: em(50px);
+  .header__button__icon {
+    transition: transform 0.2s 0s !important;
+  }
   &:hover {
-    background: darken($white, 1);
+    color: darken($dark_gray, 20);
+    .header__button__icon {
+      transform: scale(1.1);
+    }
+  }
+  .search_open & {
+    transform: none;
   }
 }
 
 .header__button--navigation {
+  height: em(100px);
+  padding-bottom: em(50px);
   rect {
     transform: none;
     transform-origin: 100% 50%;
@@ -125,6 +260,32 @@
       transform: scaleX(1);
     }
   }
+  .search_open &, .navigation_open & {
+    border-color: transparent;
+    .header__button__icon {
+      transform: translateY(em(50px));
+    }
+    rect {
+      transform-origin: 50% 50%;
+    }
+    .line-top {
+      transform: rotate(-45deg) translateY(10px);
+    }
+    .line-bottom {
+      transform: rotate(45deg) translateY(-10px);
+    }
+    .line-middle {
+      transform: scaleX(0);
+    }
+    &:hover {
+      .line-top {
+        transform: rotate(-45deg) scaleX(0.8) translateY(10px);
+      }
+      .line-bottom {
+        transform: rotate(45deg) scaleX(0.8) translateY(-10px);
+      }
+    }
+  }
 }
 
 .header__button--close {
@@ -176,5 +337,28 @@
     width: 100%;
     height: 100%;
     fill: $green;
+    .header__button--light & {
+      fill: currentColor;
+    }
+  }
+  .header__button--reverse & {
+    right: auto;
+    left: em(16px);
+  }
+  .header__button--light & {
+    position: relative;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+  @media screen and (max-width: $small_breakpoint) {
+    right: em(12px);
+    .header__button--reverse & {
+      right: auto;
+      left: em(12px);
+    }
   }
 }

private/scss/modules/_navigation.scss

@@ -1,58 +1,15 @@
-.navigation__close {
-  font-size: 0;
-  display: block;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 0;
-  width: 100%;
-  background: rgba($green, 0.9);
-  opacity: 0;
-  transition: height 0s 1s, opacity 1s;
-  overflow: hidden;
-  z-index: 940;
-  .header__button {
-    transform: translateX(100%);
-    transition: transform 1s $easeInOutQuart;
-    color: $white;
-    svg {
-      fill: $white;
-    }
-    @media screen and (max-width: $medium_breakpoint) {
-      font-size: 0;
-      padding-left: 0;
-      right: auto;
-      left: 0;
-      transform: translateX(em(640px));
-    }
-  }
-  body.navigation_open & {
-    opacity: 1;
-    height: 100vh;
-    transition: height 0s, opacity 1s;
-    .header__button {
-      transform: translateX(em(-640px));
-      @media screen and (max-width: $medium_breakpoint) {
-        transform: none;
-      }
-    }
-  }
-}
-
 #navigation {
   position: fixed;
-  z-index: 950;
+  z-index: 905;
   top: 0;
-  left: 100%;
-  width: em(640px);
-  height: 100%;
-  transform: none;
+  left: 0;
+  width: 100%;
+  height: auto;
+  padding: em(50px) 0;
+  transform: translateY(-100%);
   transition: transform 1s $easeInOutQuart;
   body.navigation_open & {
-    transform: translateX(-100%);
-  }
-  @media screen and (max-width: $medium_breakpoint) {
-    width: calc(100% - #{em(64px)});
+    transform: none;
   }
 }
 
@@ -164,38 +121,4 @@
 
 .navigation__list__meta--bottom {
   bottom: 0;
-}
-
-.navigation__languages {
-  vertical-align: top;
-  display: inline-block;
-  margin-right: em(30px);
-  margin-bottom: em(20px);
-  li {
-    display: inline-block;
-    height: em(34px);
-    margin-left: em(9px);
-    padding: em(6px) 0;
-    &:first-child {
-      margin-left: 0;
-      padding-left: 0;
-      a {
-        border-left: none;
-        padding-left: 0;
-      }
-    }
-    a {
-      color: $dark_gray;
-      text-decoration: none;
-      font-size: em(15px);
-      text-transform: uppercase;
-      display: block;
-      border-left: 1px solid $light_gray;
-      padding-left: em(10px);
-      line-height: em(20px);
-    }
-    &.active {
-      font-weight: bold;
-    }
-  }
 }

private/scss/modules/_search.scss

@@ -128,11 +128,5 @@
   .search_results & {
     opacity: 1;
     transform: none;
-    &.loading {
-      opacity: 0.2;
-      &:before {
-        top: em(180px);
-      }
-    }
   }
 }