Zobrazení sub-položek hlavní navigace do sloupců

Položky v každé sekci jsou řazeny do dvou sloupců, implicitně do levého.
Pokud má položka atribut `nav_right = true`, bude vyrenderována v pravém
sloupci. Řazení položek se vyhodnocuje vahou. Sloupcům je možné nastavit
názvy, a to v hlavičce hlavní sekce pomocí atributů `nav_title_left` a
`nav_title_right`.

Closes: #11
remotes/1722757888236843906/tmp_refs/heads/search
Emil Miler 4 years ago
parent d24c9d1d50
commit e2b66c1c0e

@ -3,6 +3,8 @@ title = "Katedra"
[extra] [extra]
color = "#B48EAD" color = "#B48EAD"
nav_title_left = "Informace o katedře"
nav_title_right = "Pravidla a předpisy"
heading = "Katedra informačních technologií a technické výchovy" heading = "Katedra informačních technologií a technické výchovy"
+++ +++

@ -0,0 +1,7 @@
+++
title = "Bezpečnost práce"
[extra]
nav_right = true
icon = "icon-skull-line"
+++

@ -1,4 +1,8 @@
+++ +++
title = "Galerie" title = "Galerie"
weight = 4
[extra]
icon = "icon-book-3-line"
+++ +++

@ -1,5 +1,6 @@
+++ +++
title = "Pracovníci" title = "Pracovníci"
weight = 1
template = "people-list.html" template = "people-list.html"
page_template = "people-profile.html" page_template = "people-profile.html"

@ -0,0 +1,7 @@
+++
title = "Pravidla pro práci v síti"
[extra]
nav_right = true
icon = "icon-node-tree"
+++

@ -1,4 +1,8 @@
+++ +++
title = "Sídlo pracoviště" title = "Sídlo pracoviště"
weight = 2
[extra]
icon = "icon-map-pin-line"
+++ +++

@ -0,0 +1,7 @@
+++
title = "Studijní řád"
[extra]
nav_right = true
icon = "icon-file-paper-2-line"
+++

@ -1,4 +1,8 @@
+++ +++
title = "Učebny" title = "Učebny"
weight = 3
[extra]
icon = "icon-artboard-line"
+++ +++

@ -57,12 +57,13 @@ header {
a { padding: .9rem } a { padding: .9rem }
li:hover { color: var(--color) } li:hover { color: var(--color) }
li:hover ul { display: grid } li:hover div { display: grid }
ul { li>div {
grid-template-columns: auto auto;
display: none; display: none;
position: absolute; position: absolute;
grid-template-columns: 1fr 1fr;
column-gap: 1em;
left: 0; left: 0;
top: 100%; top: 100%;
width: 100%; width: 100%;
@ -75,14 +76,25 @@ header {
font-weight: normal; font-weight: normal;
color: #2E3440; color: #2E3440;
a { .title {
display: flex; margin-bottom: 1em;
align-items: center;
padding: .5em; padding: .5em;
font-weight: bold;
color: var(--color);
}
ul {
flex-direction: column;
a {
display: flex;
align-items: center;
padding: .5em;
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
color: var(--color); color: var(--color);
margin-right: .4em; margin-right: .5em;
}
} }
} }
} }

@ -20,7 +20,7 @@
<div class="wrap"> <div class="wrap">
<a href="{{ config.base_url }}" class="logo"><img src="{{ get_url(path="logo-plain.svg") }}" alt="Logo KITTV"></a> <a href="{{ config.base_url }}" class="logo"><img src="{{ get_url(path="logo-plain.svg") }}" alt="Logo KITTV"></a>
<nav class="primary"> <nav class="primary">
{{ macro::nav_list_items_recursive(items=config.extra.nav_primary) }} {{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
</nav> </nav>
<nav class="secondary"> <nav class="secondary">
<span class="icon-search-line"></span> <span class="icon-search-line"></span>

@ -9,7 +9,7 @@
{{ macro::nav_list_items(items=config.extra.nav_secondary) }} {{ macro::nav_list_items(items=config.extra.nav_secondary) }}
</nav> </nav>
<nav class="primary"> <nav class="primary">
{{ macro::nav_list_items_recursive(items=config.extra.nav_primary) }} {{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
</nav> </nav>
</section> </section>
</div> </div>

@ -8,7 +8,7 @@
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
{% macro nav_list_items_recursive(items) %} {% macro nav_list_items_main(items) %}
{% if items %} {% if items %}
<ul> <ul>
{% for item in items %} {% for item in items %}
@ -22,19 +22,42 @@
> >
<a href="{{ section.permalink }}">{{ section.title }}</a> <a href="{{ section.permalink }}">{{ section.title }}</a>
{% if section.subsections %} {% if section.subsections %}
<ul> <div>
{% for subsection in section.subsections %} {% if section.extra.nav_title_left and section.extra.nav_title_right %}
{% set subsection = get_section(path=subsection) %} <div class="title">{{ section.extra.nav_title_left }}</div>
<li> <div class="title">{{ section.extra.nav_title_right }}</div>
<a href="{{ subsection.permalink }}"> {% endif %}
{% if subsection.extra.icon %} <ul>
<span class="{{ subsection.extra.icon | safe }}"></span> {% for subsection in section.subsections %}
{% endif %} {% set subsection = get_section(path=subsection) %}
{{ subsection.title }} {% if not subsection.extra.nav_right %}
</a> <li>
</li> <a href="{{ subsection.permalink }}">
{% endfor %} {% if subsection.extra.icon %}
</ul> <span class="{{ subsection.extra.icon | safe }}"></span>
{% endif %}
{{ subsection.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<ul>
{% for subsection in section.subsections %}
{% set subsection = get_section(path=subsection) %}
{% if subsection.extra.nav_right %}
<li>
<a href="{{ subsection.permalink }}">
{% if subsection.extra.icon %}
<span class="{{ subsection.extra.icon | safe }}"></span>
{% endif %}
{{ subsection.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %} {% endif %}
</li> </li>
{% endfor %} {% endfor %}

Loading…
Cancel
Save