From ba27c28f00caf7f4cb2eff88ccfb6cef2ad0b232 Mon Sep 17 00:00:00 2001 From: Simon Caminada Date: Fri, 16 Mar 2018 18:22:08 +0100 Subject: [PATCH] navigation frame --- private/scss/modules/_footer.scss | 27 ++- private/scss/modules/_header.scss | 51 ++++-- private/scss/modules/_navigation.scss | 30 +++- src/project/templates/404.html | 3 +- src/project/templates/500.html | 3 +- src/project/templates/main.html | 157 +++++++----------- .../project/includes/header_button_menu.html | 8 + .../project/includes/meta_navigation.html | 38 +++++ .../project/includes/navigation.html | 14 ++ .../project/includes/search_form.html | 3 +- 10 files changed, 209 insertions(+), 125 deletions(-) create mode 100644 src/project/templates/project/includes/header_button_menu.html create mode 100644 src/project/templates/project/includes/meta_navigation.html diff --git a/private/scss/modules/_footer.scss b/private/scss/modules/_footer.scss index 9f19924..ee0d4b7 100644 --- a/private/scss/modules/_footer.scss +++ b/private/scss/modules/_footer.scss @@ -17,6 +17,9 @@ opacity: 1; transform: none; } + @media screen and (max-width: $medium_breakpoint) { + display: none; + } } .footer__content { @@ -51,11 +54,23 @@ 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); + @media screen and (min-width: $medium_breakpoint + 1) { + padding: 0 em(30px) !important; + .header__button__icon { + width: em(16px); + height: em(16px); + top: em(-1px); + margin-right: em(10px); + } + } + @media screen and (max-width: $medium_breakpoint) { + position: relative; + left: 0 !important; + bottom: auto; + height: em(50px); + line-height: em(50px); + .header__button__icon { + padding: em(6px); + } } } \ No newline at end of file diff --git a/private/scss/modules/_header.scss b/private/scss/modules/_header.scss index 0600d65..f498a60 100644 --- a/private/scss/modules/_header.scss +++ b/private/scss/modules/_header.scss @@ -32,6 +32,9 @@ .search_open & { display: none; } + @media screen and (max-width: $medium_breakpoint) { + display: none; + } } .header__logo { @@ -68,10 +71,6 @@ } @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); @@ -92,8 +91,28 @@ margin-left: em(150px); top: 0; display: block; + transform: none; + transition: transform 0.5s; + @media screen and (max-width: 1060px) { + .navigation_open & { + transform: translateY(-100%); + } + } @media screen and (max-width: $medium_breakpoint) { - display: none; + display: block; + z-index: 10; + font-size: em(14px); + margin-left: em(115px); + transform: translateY(100%); + .navigation_open & { + transform: none; + } + } + @media screen and (max-width: $small_breakpoint) { + margin-left: em(105px); + } + @media screen and (max-width: $tiny_breakpoint) { + margin-left: em(80px); } } @@ -201,9 +220,9 @@ padding: 0 em(18px) 0 em(64px); } &.header__button--light { - padding: 0 em(15px); - } - &.header__button--light { + @media screen and (min-width: $medium_breakpoint + 1) { + padding: 0 em(15px); + } font-size: em(14px); font-weight: 400; color: $dark_gray; @@ -346,13 +365,15 @@ 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 (min-width: $medium_breakpoint + 1) { + 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); diff --git a/private/scss/modules/_navigation.scss b/private/scss/modules/_navigation.scss index 2f4072b..de72107 100644 --- a/private/scss/modules/_navigation.scss +++ b/private/scss/modules/_navigation.scss @@ -5,7 +5,6 @@ left: 0; width: 100%; height: auto; - padding: em(50px) 0; transform: translateY(-100%); transition: transform 1s $easeInOutQuart; body.navigation_open & { @@ -17,7 +16,7 @@ width: 100%; min-height: 100vh; background: $white; - padding: em(80px); + padding: em(50px) 0; .social_media { display: inline-block; vertical-align: top; @@ -28,10 +27,7 @@ color: $white; } @media screen and (max-width: $medium_breakpoint) { - padding: em(60px); - } - @media screen and (max-width: $small_breakpoint) { - padding: em(30px); + padding-bottom: 0; } } @@ -121,4 +117,26 @@ .navigation__list__meta--bottom { bottom: 0; +} + +.navigation__footer { + display: none; + .header__button { + width: 100%; + border: none; + border-top: 1px solid $medium_light_gray; + .search_open &, .navigation_open & { + transform: none; + } + } + @media screen and (max-width: $medium_breakpoint) { + display: block; + } +} + +.navigation__meta { + background: $light_gray; + .header__button { + background: none; + } } \ No newline at end of file diff --git a/src/project/templates/404.html b/src/project/templates/404.html index ba9de39..5ad9213 100755 --- a/src/project/templates/404.html +++ b/src/project/templates/404.html @@ -14,6 +14,7 @@

{% trans 'Zurück zur Startseite' %}
{% trans 'Zur Suche' %}
- {% trans 'Nehmen Sie mit uns Kontakt auf' %} + {% page_url 'contact' as contact_url %} + {% trans 'Nehmen Sie mit uns Kontakt auf' %}

{% endblock %} \ No newline at end of file diff --git a/src/project/templates/500.html b/src/project/templates/500.html index 28584b9..d0d5e39 100755 --- a/src/project/templates/500.html +++ b/src/project/templates/500.html @@ -15,6 +15,7 @@ {% trans 'Seite neu laden' %}
{% trans 'Zurück zur Startseite' %}
{% trans 'Zur Suche' %}
- {% trans 'Nehmen Sie mit uns Kontakt auf' %} + {% page_url 'contact' as contact_url %} + {% trans 'Nehmen Sie mit uns Kontakt auf' %}

{% endblock %} \ No newline at end of file diff --git a/src/project/templates/main.html b/src/project/templates/main.html index 5c15553..8e69cc2 100644 --- a/src/project/templates/main.html +++ b/src/project/templates/main.html @@ -27,113 +27,80 @@ {{ ALDRYN_SNAKE.render_head }} - {% cms_toolbar %} - - + + + + + + +{% url 'search' as search_url %} + +
+ {% trans 'Stärken stärken. Lernen lernen.' %} + + + {% trans 'Suche' %} + + {% include 'project/assets/search.svg' %} + - - - - - {% url 'search' as search_url %} - -
- {% trans 'Stärken stärken. Lernen lernen.' %} -
    - {% for lang in LANGUAGES %} -
  • - {{ lang.0 }} -
    • - {% endfor %} -
- - {% trans 'Suche' %} + {% with request.get_full_path as current_url %} + + {% trans 'Menü' %} - {% include 'project/assets/search.svg' %} + {% include 'project/assets/menu.svg' %} - {% url 'search' as search_url %} - {% with request.get_full_path as current_url %} - - {% trans 'Menü' %} - - {% include 'project/assets/menu.svg' %} - - - {% endwith %} - -
- - - {% include 'project/assets/oneday.svg' %} - - {% trans 'One Day' %} - - - - {% include 'project/assets/news.svg' %} - - {% trans 'News' %} - - - - {% include 'project/assets/calendar.svg' %} - - {% trans 'Kalender' %} - - - - {% include 'project/assets/contact.svg' %} - - {% trans 'Standort & Kontakt' %} - -
-
+ {% endwith %} -
- {% block content %} - {% placeholder 'content' %} - {% endblock %} +
+ {% include 'project/includes/meta_navigation.html' %}
+
-
- -
- - {% trans 'Medien' %} - - - {% trans 'Jobs' %} - - - {% trans 'Partner' %} - - - {% trans 'Impressum' %} - - {% static_placeholder 'social_media' %} -
+
+ {% block content %} + {% placeholder 'content' %} + {% endblock %} +
+ +
+ +
+ {% show_menu_below_id 'footer' 0 0 0 0 'project/includes/header_button_menu.html' %} + {% static_placeholder 'social_media' %}
+
- - + + - {% block extra_body %}{% endblock %} +{% block extra_body %}{% endblock %} - {% render_block "js" %} - {{ ALDRYN_SNAKE.render_tail }} +{% render_block "js" %} +{{ ALDRYN_SNAKE.render_tail }} diff --git a/src/project/templates/project/includes/header_button_menu.html b/src/project/templates/project/includes/header_button_menu.html new file mode 100644 index 0000000..08f1fd5 --- /dev/null +++ b/src/project/templates/project/includes/header_button_menu.html @@ -0,0 +1,8 @@ +{% load menu_tags %} + +{% for child in children %} + + {{ child.get_menu_title }} + +{% endfor %} \ No newline at end of file diff --git a/src/project/templates/project/includes/meta_navigation.html b/src/project/templates/project/includes/meta_navigation.html new file mode 100644 index 0000000..cea7d18 --- /dev/null +++ b/src/project/templates/project/includes/meta_navigation.html @@ -0,0 +1,38 @@ +{% load cms_tags i18n %} + +{% page_url 'oneday' as oneday_url %} +{% page_url 'news' as news_url %} +{% page_url 'calendar' as calendar_url %} +{% page_url 'contact' as contact_url %} +{% if oneday_url %} + + + {% include 'project/assets/oneday.svg' %} + + {% trans 'One Day' %} + +{% endif %} +{% if news_url %} + + + {% include 'project/assets/news.svg' %} + + {% trans 'News' %} + +{% endif %} +{% if calendar_url %} + + + {% include 'project/assets/calendar.svg' %} + + {% trans 'Kalender' %} + +{% endif %} +{% if contact_url %} + + + {% include 'project/assets/contact.svg' %} + + {% trans 'Standort & Kontakt' %} + +{% endif %} \ No newline at end of file diff --git a/src/project/templates/project/includes/navigation.html b/src/project/templates/project/includes/navigation.html index dfb6082..40eaff1 100644 --- a/src/project/templates/project/includes/navigation.html +++ b/src/project/templates/project/includes/navigation.html @@ -12,4 +12,18 @@ {% show_menu_below_id 'footer' 0 0 0 0 %}
+ +
+ {% include 'project/includes/meta_navigation.html' %} +
+ {% show_menu_below_id 'footer' 0 0 0 0 'project/includes/header_button_menu.html' %} +
+ {% static_placeholder 'social_media' %} + +
\ No newline at end of file diff --git a/src/project/templates/project/includes/search_form.html b/src/project/templates/project/includes/search_form.html index 7de56b2..a3c75b4 100644 --- a/src/project/templates/project/includes/search_form.html +++ b/src/project/templates/project/includes/search_form.html @@ -27,7 +27,8 @@ Leider wurden keine Resultate mit dem Begriff «{{ q }}» gefunden.
Sie erreichen uns auch über andere Kanäle: {% endblocktrans %} - {% trans 'Zum Kontakt' %} + {% page_url 'contact' as contact_url %} + {% trans 'Zum Kontakt' %} {% endif %}