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

Added search button and menu icon 

(cherry picked from commit 468264941d08b00252a4f6f081bc2dff5920bffe)
This commit is contained in:
Silvio Giebl 2019-07-21 21:56:50 +02:00
parent 52bcb26ddd
commit cc0b57727d
4 changed files with 69 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
_layouts/default.html
View File

@ -8,6 +8,14 @@ layout: table_wrappers
{% include head.html %}
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<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"/>
@ -17,8 +25,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 %}
@ -34,12 +44,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 %}
@ -98,6 +108,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

@ -147,16 +147,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;
@ -197,3 +191,9 @@ body {
justify-self: end;
}
}
.icon {
width: $sp-5;
height: $sp-5;
fill: $link-color;
}

16
_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,17 @@
font-weight: bold;
color: $link-color;
}
.search-button {
position: fixed;
display: flex;
width: $sp-9;
height: $sp-9;
bottom: $sp-4;
right: $sp-4;
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;
}

41
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);
@ -284,6 +296,7 @@ function initSearch() {
});
}
}
{%- endif %}
function pageFocus() {
var mainWrap = document.getElementById('main-wrap');
@ -295,9 +308,9 @@ function pageFocus() {
jtd.onReady(function(){
initNav();
pageFocus();
if (typeof lunr !== 'undefined') {
initSearch();
}
{% if site.search_enabled != false -%}
initSearch();
{%- endif %}
});
})(window.jtd = window.jtd || {});