thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-01-18 07:46:37 -05:00
Code Issues Projects Releases Wiki Activity

Improved navigation: folding, vsual feedback, optimization for mobile

Browse Source 
(cherry picked from commit db50f282bab1e98397cc7434a811b8b7da2fe6dc)
This commit is contained in:
Silvio Giebl 2019-08-10 20:53:59 +02:00
parent 0a8138a6e0
commit 0ebbe4bb4e
6 changed files with 88 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_includes/nav.html
View File

@ -7,19 +7,25 @@
{%- 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 -%}
{%- if node.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ node.url | absolute_url }}" class="nav-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="nav-list-child-list "> <ul class="nav-list">
{%- for child in children_list -%} {%- for child in children_list -%}
<li class="nav-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 -%}
{%- if child.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ child.url | absolute_url }}" class="nav-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="nav-list-child-list"> <ul class="nav-list">
{%- for grand_child in grand_children_list -%} {%- for grand_child in grand_children_list -%}
<li class="nav-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="nav-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>

6
_layouts/default.html
View File

@ -7,6 +7,12 @@ layout: table_wrappers
<html lang="{{ site.lang | default: 'en-US' }}"> <html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %} {% include head.html %}
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
</symbol>
</svg>
<div class="page-wrap"> <div class="page-wrap">
<div class="side-bar"> <div class="side-bar">

7
_sass/layout.scss
View File

@ -113,8 +113,6 @@
} }
.site-nav { .site-nav {
@include container;
@include mq(md) { @include mq(md) {
padding-top: $sp-8; padding-top: $sp-8;
padding-bottom: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm;
@ -165,6 +163,11 @@
} }
} }
.site-title:hover,
.site-button:hover {
background-color: darken($sidebar-color, 3%);
}
// stylelint-disable selector-max-type // stylelint-disable selector-max-type
body { body {

90
_sass/navigation.scss
View File

@ -7,34 +7,6 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
}
.nav-list-child-list {
padding-left: $sp-3;
list-style: none;
.nav-list-link {
color: $nav-child-link-color;
}
.nav-list-item {
position: relative;
&::before {
position: absolute;
margin-top: 0.3em;
margin-left: -0.8em;
color: rgba($body-text-color, 0.3);
content: "- ";
}
&.active {
&::before {
color: $body-text-color;
}
}
}
}
.nav-list-item { .nav-list-item {
@include fs-4; @include fs-4;
@ -44,27 +16,65 @@
@include fs-3; @include fs-3;
} }
.nav-list-child-list {
display: none;
}
&.active {
.nav-list-child-list {
display: block;
}
}
}
.nav-list-link { .nav-list-link {
display: block; display: block;
height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1};
padding-top: $sp-1; padding-top: $sp-1;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-1; padding-bottom: $sp-1;
padding-left: $nav-list-item-height;
&.active { &.active {
font-weight: 600; font-weight: 600;
color: $body-heading-color;
text-decoration: none; text-decoration: none;
} }
&:hover,
&.active {
background-color: darken($sidebar-color, 3%);
}
}
.nav-list-expander {
position: absolute;
width: $nav-list-item-height;
height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4};
fill: $link-color;
&:hover {
background-color: darken($sidebar-color, 3%);
}
}
> .nav-list {
display: none;
padding-left: $sp-3;
list-style: none;
.nav-list-item {
position: relative;
.nav-list-link {
color: $nav-child-link-color;
}
}
}
&.active {
> .nav-list-expander svg {
transform: rotate(90deg);
}
> .nav-list {
display: block;
}
}
}
} }
// Small screen nav // Small screen nav

1
_sass/support/_variables.scss
View File

@ -112,6 +112,7 @@ $gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default; $gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default; $nav-width: 264px !default;
$nav-width-md: 248px !default; $nav-width-md: 248px !default;
$nav-list-item-height: $sp-6 !default;
$content-width: 800px !default; $content-width: 800px !default;
$header-height: 60px !default; $header-height: 60px !default;
$search-results-width: 500px !default; $search-results-width: 500px !default;

7
assets/js/just-the-docs.js
View File

@ -24,6 +24,13 @@ jtd.onReady = function(ready) {
// Show/hide mobile menu // Show/hide mobile menu
function initNav() { function initNav() {
jtd.addEvent(document, 'click', function(e){
var expander = e.path.find(function(x){ return x.classList && x.classList.contains('nav-list-expander') });
if (expander) {
expander.parentElement.classList.toggle('active');
}
});
const siteNav = document.getElementById('site-nav'); const siteNav = document.getElementById('site-nav');
const mainHeader = document.getElementById('main-header'); const mainHeader = document.getElementById('main-header');
const navTrigger = document.getElementById('site-nav-trigger'); const navTrigger = document.getElementById('site-nav-trigger');