Skip to content
Snippets Groups Projects
Commit cc0b5772 authored by Silvio Giebl's avatar Silvio Giebl
Browse files

Added search button and menu icon 

(cherry picked from commit 468264941d08b00252a4f6f081bc2dff5920bffe)
parent 52bcb26d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
_layouts/default.html
+ 20
− 4
View file @ cc0b5772
......@@ -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>
......
_sass/layout.scss
+ 6
− 6
View file @ cc0b5772
......@@ -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;
}
_sass/search.scss
+ 16
− 0
View file @ cc0b5772
......@@ -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;
}
assets/js/just-the-docs.js
+ 28
− 15
View file @ cc0b5772
......@@ -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 || {});
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment