From cc0b57727dfcb6d4e7cc05a598d37b3c95ff5067 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 21 Jul 2019 21:56:50 +0200 Subject: [PATCH 1/5] Added search button and menu icon (cherry picked from commit 468264941d08b00252a4f6f081bc2dff5920bffe) --- _layouts/default.html | 24 ++++++++++++++++++---- _sass/layout.scss | 12 +++++------ _sass/search.scss | 16 +++++++++++++++ assets/js/just-the-docs.js | 41 +++++++++++++++++++++++++------------- 4 files changed, 69 insertions(+), 24 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 2eba760..84971bd 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,6 +8,14 @@ layout: table_wrappers {% include head.html %} + + Menu + + + + Search + + Expand @@ -17,8 +25,10 @@ layout: table_wrappers
- {% include title.html %} - + {% include title.html %} + + +
+ + {% if site.search_enabled != false %} + + + + {% endif %} diff --git a/_sass/layout.scss b/_sass/layout.scss index 12b7fe0..3c1ed35 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -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; +} diff --git a/_sass/search.scss b/_sass/search.scss index 79c3cfd..d3d8ed9 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -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; +} diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 0ba8dc9..4caedac 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -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 || {}); From 936a1e63be4cbbcdfa4780245025c23bff6753ee Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 21 Jul 2019 22:35:06 +0200 Subject: [PATCH 2/5] Fixed css style (cherry picked from commit 4d52a68745672407bfb258eff055fb06756aac0e) --- _sass/search.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/search.scss b/_sass/search.scss index d3d8ed9..c5af4e5 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -171,10 +171,10 @@ .search-button { position: fixed; display: flex; + right: $sp-4; + bottom: $sp-4; 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); From 7c93bcc48fec0cffba2a74f61967ed7ac897d187 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 21 Jul 2019 22:38:41 +0200 Subject: [PATCH 3/5] Fixed css style (cherry picked from commit e5f2a27f0d48d041a3d63001c0b13230a6afdf6b) --- _sass/search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/search.scss b/_sass/search.scss index c5af4e5..3a6ad20 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -170,9 +170,9 @@ .search-button { position: fixed; - display: flex; right: $sp-4; bottom: $sp-4; + display: flex; width: $sp-9; height: $sp-9; background-color: $search-background-color; From 887a18daa0074c5335c31d537bd74e766338b2b2 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Mon, 22 Jul 2019 21:50:15 +0200 Subject: [PATCH 4/5] Improved search button and results, added blur to content (cherry picked from commit 99371e971406090a2dba7b9b69f514a8f87afce3) --- _layouts/default.html | 2 +- _sass/search.scss | 9 +++++++++ assets/js/just-the-docs.js | 3 +++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/_layouts/default.html b/_layouts/default.html index 84971bd..69bfe00 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -59,7 +59,7 @@ layout: table_wrappers {% endif %} -
+
{% unless page.url == "/" %} {% if page.parent %}