thang
/
notes
mirror of https://github.com/thangisme/notes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'improvement/search-button' into improvement/navigation-new

This commit is contained in:
Silvio Giebl 2020-06-15 21:37:31 +02:00
parent c7466e88a8 cf64965554
commit e216623ed3
4 changed files with 82 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
_layouts/default.html
View File

@ -12,6 +12,14 @@ layout: table_wrappers
<title>Link</title>
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
</symbol>
<symbol id="search" viewBox="0 0 24 24">
<title>Menu</title>
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/>
</symbol>
<symbol id="menu" viewBox="0 0 24 24">
<title>Search</title>
<path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</symbol>
<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"/>
@ -21,8 +29,10 @@ layout: table_wrappers
<div class="page-wrap">
<div class="side-bar">
<div class="site-header">
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
<button id="site-nav-trigger" class="site-button" data-text-toggle="Hide" type="button">Menu</button>
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
<a href="#" id="menu-button" class="site-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#menu"></use></svg>
</a>
</div>
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
{% include nav.html %}
@ -38,12 +48,12 @@ layout: table_wrappers
<div class="search">
<div class="search-input-wrap">
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
<svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
<svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#search"></use></svg>
</div>
<div id="search-results" class="search-results"></div>
</div>
{% endif %}
{% if site.aux_links != nil %}
{% if site.aux_links %}
<nav aria-label="Auxiliary" class="aux-nav">
<ul class="aux-nav-list">
{% for link in site.aux_links %}
@ -61,7 +71,7 @@ layout: table_wrappers
</nav>
{% endif %}
</div>
<div class="main-content-wrap">
<div id="main-content-wrap" class="main-content-wrap">
{% unless page.url == "/" %}
{% if page.parent %}
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
@ -136,6 +146,12 @@ layout: table_wrappers
</div>
</div>
</div>
{% if site.search_enabled != false %}
<a href="#" id="search-button" class="search-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#search"></use></svg>
</a>
{% endif %}
</div>
</body>

12
_sass/layout.scss
View File

@ -164,16 +164,10 @@
}
.site-button {
appearance: none;
display: flex;
height: 100%;
padding: $gutter-spacing-sm;
align-items: center;
color: $link-color;
text-transform: uppercase;
background: transparent;
border: 0;
@include fs-3;
@include mq(md) {
display: none;
@ -214,3 +208,9 @@ body {
justify-self: end;
}
}
.icon {
width: $sp-5;
height: $sp-5;
fill: $link-color;
}

25
_sass/search.scss
View File

@ -62,6 +62,8 @@
}
.search-icon {
width: 1.2rem;
height: 1.2rem;
align-self: center;
margin-right: $sp-2;
fill: $grey-dk-000;
@ -165,3 +167,26 @@
font-weight: bold;
color: $link-color;
}
.search-button {
position: fixed;
right: $sp-4;
bottom: $sp-4;
display: flex;
width: $sp-9;
height: $sp-9;
background-color: $search-background-color;
border-radius: #{$sp-9 / 2};
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
align-items: center;
justify-content: center;
}
.search-results,
.search-button {
border: 1px solid rgba($link-color, 0.3);
}
.blur {
filter: blur(5px);
}

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

@ -37,24 +37,36 @@ function initNav() {
const siteNav = document.getElementById('site-nav');
const mainHeader = document.getElementById('main-header');
const navTrigger = document.getElementById('site-nav-trigger');
const menuButton = document.getElementById('menu-button');
jtd.addEvent(navTrigger, 'click', function(e){
jtd.addEvent(menuButton, 'click', function(e){
e.preventDefault();
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
siteNav.classList.toggle('nav-open');
mainHeader.classList.toggle('nav-open');
navTrigger.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
textToggle = text;
})
if (menuButton.classList.toggle('nav-open')) {
siteNav.classList.add('nav-open');
mainHeader.classList.add('nav-open');
} else {
siteNav.classList.remove('nav-open');
mainHeader.classList.remove('nav-open');
}
});
{% if site.search_enabled != false -%}
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
jtd.addEvent(searchButton, 'click', function(e){
e.preventDefault();
mainHeader.classList.add('nav-open');
searchInput.focus();
});
{%- endif %}
}
// Site search
{% if site.search_enabled != false -%}
function initSearch() {
var request = new XMLHttpRequest();
request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
@ -106,10 +118,12 @@ function initSearch() {
var docs = data;
var searchInput = document.getElementById('search-input');
var searchResults = document.getElementById('search-results');
var mainContentWrap = document.getElementById('main-content-wrap');
function hideResults() {
searchResults.innerHTML = '';
searchResults.classList.remove('active');
mainContentWrap.classList.remove('blur');
}
jtd.addEvent(searchInput, 'keydown', function(e){
@ -188,6 +202,7 @@ function initSearch() {
if (results.length > 0) {
searchResults.classList.add('active');
mainContentWrap.classList.add('blur');
var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList);
@ -289,6 +304,7 @@ function initSearch() {
});
}
}
{%- endif %}
// Focus
@ -314,9 +330,9 @@ jtd.setTheme = function(theme) {
jtd.onReady(function(){
initNav();
pageFocus();
if (typeof lunr !== 'undefined') {
initSearch();
}
{% if site.search_enabled != false -%}
initSearch();
{%- endif %}
});
})(window.jtd = window.jtd || {});