steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-17 00:22:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added search button and menu icon

Browse Source 
(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 %} {% include head.html %}
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <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"> <symbol id="arrow-right" viewBox="0 0 24 24">
<title>Expand</title> <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"/> <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="page-wrap">
<div class="side-bar"> <div class="side-bar">
<div class="site-header"> <div class="site-header">
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a> <a href="{{ '/' | absolute_url }}" 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="#" id="menu-button" class="site-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#menu"></use></svg>
</a>
</div> </div>
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav"> <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
{% include nav.html %} {% include nav.html %}
@ -34,12 +44,12 @@ layout: table_wrappers
<div class="search"> <div class="search">
<div class="search-input-wrap"> <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"> <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>
<div id="search-results" class="search-results"></div> <div id="search-results" class="search-results"></div>
</div> </div>
{% endif %} {% endif %}
{% if site.aux_links != nil %} {% if site.aux_links %}
<nav aria-label="Auxiliary" class="aux-nav"> <nav aria-label="Auxiliary" class="aux-nav">
<ul class="aux-nav-list"> <ul class="aux-nav-list">
{% for link in site.aux_links %} {% for link in site.aux_links %}
@ -98,6 +108,12 @@ layout: table_wrappers
</div> </div>
</div> </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> </div>
</body> </body>

12
_sass/layout.scss
View File

@ -147,16 +147,10 @@
} }
.site-button { .site-button {
appearance: none;
display: flex; display: flex;
height: 100%; height: 100%;
padding: $gutter-spacing-sm; padding: $gutter-spacing-sm;
align-items: center; align-items: center;
color: $link-color;
text-transform: uppercase;
background: transparent;
border: 0;
@include fs-3;
@include mq(md) { @include mq(md) {
display: none; display: none;
@ -197,3 +191,9 @@ body {
justify-self: end; 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 { .search-icon {
width: 1.2rem;
height: 1.2rem;
align-self: center; align-self: center;
margin-right: $sp-2; margin-right: $sp-2;
fill: $grey-dk-000; fill: $grey-dk-000;
@ -165,3 +167,17 @@
font-weight: bold; font-weight: bold;
color: $link-color; 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 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 menuButton = document.getElementById('menu-button');
jtd.addEvent(navTrigger, 'click', function(e){ jtd.addEvent(menuButton, 'click', function(e){
e.preventDefault(); e.preventDefault();
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
siteNav.classList.toggle('nav-open'); if (menuButton.classList.toggle('nav-open')) {
mainHeader.classList.toggle('nav-open'); siteNav.classList.add('nav-open');
navTrigger.classList.toggle('nav-open'); mainHeader.classList.add('nav-open');
navTrigger.innerText = textToggle; } else {
navTrigger.setAttribute('data-text-toggle', text); siteNav.classList.remove('nav-open');
textToggle = text; 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 // Site search
{% if site.search_enabled != false -%}
function initSearch() { function initSearch() {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true); request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
@ -284,6 +296,7 @@ function initSearch() {
}); });
} }
} }
{%- endif %}
function pageFocus() { function pageFocus() {
var mainWrap = document.getElementById('main-wrap'); var mainWrap = document.getElementById('main-wrap');
@ -295,9 +308,9 @@ function pageFocus() {
jtd.onReady(function(){ jtd.onReady(function(){
initNav(); initNav();
pageFocus(); pageFocus();
if (typeof lunr !== 'undefined') { {% if site.search_enabled != false -%}
initSearch(); initSearch();
} {%- endif %}
}); });
})(window.jtd = window.jtd || {}); })(window.jtd = window.jtd || {});