diff --git a/private/js/modules/navigation.js b/private/js/modules/navigation.js index 9af4c89..f4b71f2 100644 --- a/private/js/modules/navigation.js +++ b/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; diff --git a/private/js/modules/plugins/timetable.js b/private/js/modules/plugins/timetable.js index e6084dd..6ac015b 100644 --- a/private/js/modules/plugins/timetable.js +++ b/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() { diff --git a/private/js/modules/search.js b/private/js/modules/search.js index acf2218..0e62f94 100644 --- a/private/js/modules/search.js +++ b/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'); diff --git a/private/scss/_config.scss b/private/scss/_config.scss index 5a83f1b..954af0b 100644 --- a/private/scss/_config.scss +++ b/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; \ No newline at end of file diff --git a/private/scss/main.scss b/private/scss/main.scss index 28f04cd..3ec23f6 100644 --- a/private/scss/main.scss +++ b/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"; diff --git a/private/scss/modules/_footer.scss b/private/scss/modules/_footer.scss new file mode 100644 index 0000000..9f19924 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/private/scss/modules/_header.scss b/private/scss/modules/_header.scss index cf20605..0600d65 100644 --- a/private/scss/modules/_header.scss +++ b/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); + } } } \ No newline at end of file diff --git a/private/scss/modules/_navigation.scss b/private/scss/modules/_navigation.scss index 790e449..2f4072b 100644 --- a/private/scss/modules/_navigation.scss +++ b/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; - } - } } \ No newline at end of file diff --git a/private/scss/modules/_search.scss b/private/scss/modules/_search.scss index 43aec36..63d9160 100644 --- a/private/scss/modules/_search.scss +++ b/private/scss/modules/_search.scss @@ -128,11 +128,5 @@ .search_results & { opacity: 1; transform: none; - &.loading { - opacity: 0.2; - &:before { - top: em(180px); - } - } } } \ No newline at end of file diff --git a/src/project/templates/main.html b/src/project/templates/main.html index ddbe8e3..5c15553 100644 --- a/src/project/templates/main.html +++ b/src/project/templates/main.html @@ -1,4 +1,4 @@ -{% load static i18n cms_tags sekizai_tags fontawesome %} +{% load static i18n cms_tags sekizai_tags fontawesome menu_tags %}
@@ -27,56 +27,113 @@ {{ ALDRYN_SNAKE.render_head }} -{% cms_toolbar %} - - -