thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-02-21 06:57:46 -05:00
Code Issues Projects Releases Wiki Activity

Improved navigation

Browse Source 
(cherry picked from commit 6684f7c7faa15d6d59df35fbff9ea6666634d754)
This commit is contained in:
Silvio Giebl 2019-07-22 09:33:17 +02:00
parent ec420a385b
commit 0a8138a6e0
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
_includes/nav.html
View File

@ -1,28 +1,28 @@
<ul class="navigation-list"> <ul class="nav-list">
{%- assign pages_list = site.html_pages | sort:"nav_order" -%} {%- assign pages_list = site.html_pages | sort:"nav_order" -%}
{%- for node in pages_list -%} {%- for node in pages_list -%}
{%- unless node.nav_exclude -%} {%- unless node.nav_exclude -%}
{%- if node.parent == nil -%} {%- if node.parent == nil -%}
<li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}"> <li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
{%- if page.parent == node.title or page.grand_parent == node.title -%} {%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | absolute_url -%} {%- assign first_level_url = node.url | absolute_url -%}
{%- endif -%} {%- endif -%}
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a> <a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{%- if node.has_children -%} {%- if node.has_children -%}
{%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%} {%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
<ul class="navigation-list-child-list "> <ul class="nav-list-child-list ">
{%- for child in children_list -%} {%- for child in children_list -%}
<li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}"> <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
{%- if page.url == child.url or page.parent == child.title -%} {%- if page.url == child.url or page.parent == child.title -%}
{%- assign second_level_url = child.url | absolute_url -%} {%- assign second_level_url = child.url | absolute_url -%}
{%- endif -%} {%- endif -%}
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a> <a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{%- if child.has_children -%} {%- if child.has_children -%}
{%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%} {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
<ul class="navigation-list-child-list"> <ul class="nav-list-child-list">
{%- for grand_child in grand_children_list -%} {%- for grand_child in grand_children_list -%}
<li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}"> <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a> <a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
</li> </li>
{%- endfor -%} {%- endfor -%}
</ul> </ul>

17
_sass/navigation.scss
View File

@ -1,22 +1,23 @@
// //
// Main nav, breadcrumb, etc... // Main nav, breadcrumb, etc...
// //
.navigation-list {
.nav-list {
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
} }
.navigation-list-child-list { .nav-list-child-list {
padding-left: $sp-3; padding-left: $sp-3;
list-style: none; list-style: none;
.navigation-list-link { .nav-list-link {
color: $nav-child-link-color; color: $nav-child-link-color;
} }
.navigation-list-item { .nav-list-item {
position: relative; position: relative;
&::before { &::before {
@ -35,7 +36,7 @@
} }
} }
.navigation-list-item { .nav-list-item {
@include fs-4; @include fs-4;
margin: 0; margin: 0;
@ -43,18 +44,18 @@
@include fs-3; @include fs-3;
} }
.navigation-list-child-list { .nav-list-child-list {
display: none; display: none;
} }
&.active { &.active {
.navigation-list-child-list { .nav-list-child-list {
display: block; display: block;
} }
} }
} }
.navigation-list-link { .nav-list-link {
display: block; display: block;
padding-top: $sp-1; padding-top: $sp-1;
padding-bottom: $sp-1; padding-bottom: $sp-1;