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 ...@@ -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 ...@@ -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 ...@@ -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 ...@@ -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>
......
_sass/layout.scss
+ 6
− 6
View file @ cc0b5772
...@@ -147,16 +147,10 @@ ...@@ -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 { ...@@ -197,3 +191,9 @@ body {
justify-self: end; 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 @@ ...@@ -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 @@ ...@@ -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;
}
assets/js/just-the-docs.js
+ 28
− 15
View file @ cc0b5772
...@@ -37,24 +37,36 @@ function initNav() { ...@@ -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'); if (menuButton.classList.toggle('nav-open')) {
siteNav.classList.add('nav-open');
siteNav.classList.toggle('nav-open'); mainHeader.classList.add('nav-open');
mainHeader.classList.toggle('nav-open'); } else {
navTrigger.classList.toggle('nav-open'); siteNav.classList.remove('nav-open');
navTrigger.innerText = textToggle; mainHeader.classList.remove('nav-open');
navTrigger.setAttribute('data-text-toggle', text); }
textToggle = text; });
})
{% 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() { ...@@ -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() { ...@@ -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 || {});
......
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