Gro/webseite
0
0
Fork 0
forked from ag_kommunikation/webseite
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved navigation to separate block and fixed highlighting of active page.

Browse Source 
Highlighting is done via color (orange) and typography (underline) on purpose to make it recognizable even if one can't see colors properly.
This commit is contained in:
Stephan 2021-04-11 16:08:56 +02:00
parent 58df4b29b6
commit d940444fdc
4 changed files with 72 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/css/style.css
View File

@ -102,8 +102,10 @@ body {
font-size: 1.25rem;
}
.primary_nav__navitem.-active .primary_nav__navlink {
.primary_nav__navlink.-active,
.primary_nav__sub_navlink.-active {
color: var(--wtf-orange);
text-decoration: underline;
}
.primary_nav__navitem.-last, .primary_nav__navitem.-last a {
@ -115,7 +117,7 @@ body {
color: var(--wtf-nearly-black);
}
.primary_nav__sub_navitem .primary_nav__navlink {
.primary_nav__sub_navlink {
color: var(--wtf-nearly-white);
}
@ -1559,7 +1561,8 @@ footer {
border-top: none;
}
.primary_nav__sub_navitem .primary_nav__navlink {
.primary_nav__navlink,
.primary_nav__sub_navlink {
color: var(--wtf-nearly-black)
}

64
templates/blocks/navigation.html Normal file
View File

@ -0,0 +1,64 @@
{% block navigation %}
<nav class="header__primary_nav -logo_header">
<div class="primary_nav__toggle">
<svg viewBox="0 0 100 80" width="32" height="32">
<rect width="100" height="15"></rect>
<rect y="30" width="100" height="15"></rect>
<rect y="60" width="100" height="15"></rect>
</svg>
<p>menu</p>
</div>
<ul class="primary_nav__navlist">
{% for title, mapping in bag("navigation").items() %}
{% if mapping.visible|default(true) %}
<li class="primary_nav__navitem">
<a class="primary_nav__navlink {% if this._path == mapping.href or
this._path in mapping['items'].values() or
title == 'Aktuelles' and
('blog' in this._path or 'podcast' in this._path)
%}-active{% endif %}" href="{{ mapping.href|url }}">
{{ title }}
</a>
{% if mapping.list_childs %}
<ul class="primary_nav__sub_navlist">
{% set sub_menu = mapping['items'].items() %}
{% for sub_title, href in sub_menu %}
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
{{ sub_title }}
</a>
</li>
{% if sub_title == 'Blog' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% if sub_title == 'Podcast' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path + '/' == child.url_path %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
{% endblock %}

65
templates/header_slim.html
View File

@ -24,71 +24,8 @@
</nav>
</div>
<div class="header__slim_box">
<nav class="header__primary_nav">
<div class="primary_nav__toggle">
<svg viewBox="0 0 100 80" width="32" height="32">
<rect width="100" height="15"></rect>
<rect y="30" width="100" height="15"></rect>
<rect y="60" width="100" height="15"></rect>
</svg>
<p>menu</p>
</div>
{% include "blocks/navigation.html" %}
<ul class="primary_nav__navlist">
{% for title, mapping in bag("navigation").items() %}
{% if mapping.visible|default(true) %}
<li class="primary_nav__navitem
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
-active
{%- endif -%}
{%- if loop.index == 1 %}
-first
{%- endif -%}
">
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
{{ title }}
</a>
{% if mapping.list_childs %}
<ul class="primary_nav__sub_navlist">
{% set sub_menu = mapping['items'].items() %}
{% for sub_title, href in sub_menu %}
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
{{ sub_title }}
</a>
</li>
{% if sub_title == 'Blog' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% if sub_title == 'Podcast' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
<div class="slim_box__top_bar_left"></div>
<div class="slim_box__top_bar_middle"></div>
<div class="slim_box__top_bar_right"></div>

65
templates/header_with_logo.html
View File

@ -24,71 +24,8 @@
</nav>
</div>
<div class="header__bg_box">
<nav class="header__primary_nav -logo_header">
<div class="primary_nav__toggle">
<svg viewBox="0 0 100 80" width="32" height="32">
<rect width="100" height="15"></rect>
<rect y="30" width="100" height="15"></rect>
<rect y="60" width="100" height="15"></rect>
</svg>
<p>menu</p>
</div>
{% include "blocks/navigation.html" %}
<ul class="primary_nav__navlist">
{% for title, mapping in bag("navigation").items() %}
{% if mapping.visible|default(true) %}
<li class="primary_nav__navitem
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
-active
{%- endif -%}
{%- if loop.index == 1 %}
-first
{%- endif -%}
">
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
{{ title }}
</a>
{% if mapping.list_childs %}
<ul class="primary_nav__sub_navlist">
{% set sub_menu = mapping['items'].items() %}
{% for sub_title, href in sub_menu %}
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
{{ sub_title }}
</a>
</li>
{% if sub_title == 'Blog' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% if sub_title == 'Podcast' %}
{% set children = site.get(href).children %}
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ child.url_path }}">
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
<!-- background for header box - start -->
<div class="bg_box__top_bar_left"></div>
<div class="bg_box__top_bar_middle"></div>