petr/www.tagesschule-elementa.ch
2
1
Fork 0
forked from TagesschuleElementa/www.tagesschule-elementa.ch
Code Issues Pull Requests Releases Wiki Activity

navigation frame

Browse Source
This commit is contained in:
Simon Caminada
2018-03-16 18:22:08 +01:00
parent eaa888cfa5
commit ba27c28f00
10 changed files with 208 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
private/scss/modules/_footer.scss
View File

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

51
private/scss/modules/_header.scss
View File

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

30
private/scss/modules/_navigation.scss
View File

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

3
src/project/templates/404.html
View File

@@ -14,6 +14,7 @@
<br><br>
<a href="/{{ LANGUAGE_CODE }}/">{% trans 'Zurück zur Startseite' %}</a><br>
<a href="{% url 'search' %}">{% trans 'Zur Suche' %}</a><br>
<a href="{% page_url 'contact' %}">{% trans 'Nehmen Sie mit uns Kontakt auf' %}</a>
{% page_url 'contact' as contact_url %}
<a href="{{ contact_url }}">{% trans 'Nehmen Sie mit uns Kontakt auf' %}</a>
</p>
{% endblock %}

3
src/project/templates/500.html
View File

@@ -15,6 +15,7 @@
<a href="{{ request.get_current_url }}">{% trans 'Seite neu laden' %}</a><br>
<a href="/{{ LANGUAGE_CODE }}/">{% trans 'Zurück zur Startseite' %}</a><br>
<a href="{% url 'search' %}">{% trans 'Zur Suche' %}</a><br>
<a href="{% page_url 'contact' %}">{% trans 'Nehmen Sie mit uns Kontakt auf' %}</a>
{% page_url 'contact' as contact_url %}
<a href="{{ contact_url }}">{% trans 'Nehmen Sie mit uns Kontakt auf' %}</a>
</p>
{% endblock %}

155
src/project/templates/main.html
View File

@@ -27,113 +27,80 @@
{{ ALDRYN_SNAKE.render_head }}
</head>
<body class="{% block body_class %}{% endblock %}">
{% cms_toolbar %}
{% cms_toolbar %}
<a href="/{{ LANGUAGE_CODE }}/" class="header__logo reveal reveal_animation">
<img src="{% static 'img/tagesschule-elementa.svg' %}" width="100" height="100">
<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>
</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' %}
{% 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/search.svg' %}
{% include 'project/assets/menu.svg' %}
</span>
</a>
{% 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 %}
{% endwith %}
<div class="header__navigation">
<a href="#" class="header__button header__button--reverse header__button--light data_id_0">
<span class="header__button__icon">
{% include 'project/assets/oneday.svg' %}
</span>
{% trans 'One Day' %}
</a>
<a href="#" class="header__button header__button--reverse header__button--light data_id_1">
<span class="header__button__icon">
{% include 'project/assets/news.svg' %}
</span>
{% trans 'News' %}
</a>
<a href="#" class="header__button header__button--reverse header__button--light data_id_2">
<span class="header__button__icon">
{% include 'project/assets/calendar.svg' %}
</span>
{% trans 'Kalender' %}
</a>
<a href="#" class="header__button header__button--reverse header__button--light data_id_3">
<span class="header__button__icon">
{% include 'project/assets/contact.svg' %}
</span>
{% trans 'Standort & Kontakt' %}
</a>
</div>
<div class="header__navigation">
{% include 'project/includes/meta_navigation.html' %}
</div>
</div>
<div id="canvas">
{% block content %}
{% placeholder 'content' %}
{% endblock %}
<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 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">
<a href="#" class="header__button header__button--light data_id_1">
{% trans 'Medien' %}
</a>
<a href="#" class="header__button header__button--light data_id_2">
{% trans 'Jobs' %}
</a>
<a href="#" class="header__button header__button--light data_id_3">
{% trans 'Partner' %}
</a>
<a href="#" class="header__button header__button--light data_id_4">
{% trans 'Impressum' %}
</a>
{% static_placeholder 'social_media' %}
</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>

8
src/project/templates/project/includes/header_button_menu.html Normal file
View File

@@ -0,0 +1,8 @@
{% load menu_tags %}
{% for child in children %}
<a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}"
class="header__button header__button--light data_id_{{ forloop.counter0 }}">
{{ child.get_menu_title }}
</a>
{% endfor %}

38
src/project/templates/project/includes/meta_navigation.html Normal file
View File

@@ -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 %}
<a href="{{ oneday_url }}" class="header__button header__button--reverse header__button--light data_id_0">
<span class="header__button__icon">
{% include 'project/assets/oneday.svg' %}
</span>
{% trans 'One Day' %}
</a>
{% endif %}
{% if news_url %}
<a href="{{ news_url }}" class="header__button header__button--reverse header__button--light data_id_1">
<span class="header__button__icon">
{% include 'project/assets/news.svg' %}
</span>
{% trans 'News' %}
</a>
{% endif %}
{% if calendar_url %}
<a href="{{ calendar_url }}" class="header__button header__button--reverse header__button--light data_id_2">
<span class="header__button__icon">
{% include 'project/assets/calendar.svg' %}
</span>
{% trans 'Kalender' %}
</a>
{% endif %}
{% if contact_url %}
<a href="{{ contact_url }}" class="header__button header__button--reverse header__button--light data_id_3">
<span class="header__button__icon">
{% include 'project/assets/contact.svg' %}
</span>
{% trans 'Standort & Kontakt' %}
</a>
{% endif %}

14
src/project/templates/project/includes/navigation.html
View File

@@ -12,4 +12,18 @@
{% show_menu_below_id 'footer' 0 0 0 0 %}
</ul>
</div>
<div class="navigation__footer">
{% include 'project/includes/meta_navigation.html' %}
<div class="navigation__meta">
{% show_menu_below_id 'footer' 0 0 0 0 'project/includes/header_button_menu.html' %}
</div>
{% static_placeholder 'social_media' %}
<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' %}
</span>
{% trans 'Login' %}
</a>
</div>
</div>

3
src/project/templates/project/includes/search_form.html
View File

@@ -27,7 +27,8 @@
Leider wurden keine Resultate mit dem Begriff «{{ q }}» gefunden.<br>
Sie erreichen uns auch über andere Kanäle:
{% endblocktrans %}
<a href="{% page_url 'contact' %}">{% trans 'Zum Kontakt' %}</a>
{% page_url 'contact' as contact_url %}
<a href="{{ contact_url }}">{% trans 'Zum Kontakt' %}</a>
</strong>
{% endif %}
</p>