From a6a778a9a188e941204c4d61dca6dd1ea6aabe34 Mon Sep 17 00:00:00 2001 From: avitex Date: Tue, 14 Apr 2020 18:18:17 +1000 Subject: [PATCH] mobile responsive, silence search error --- sass/_home.scss | 6 +++- sass/_layout.scss | 5 +-- sass/_search.scss | 4 +-- sass/_site-nav.scss | 14 ++++---- sass/site.scss | 8 +++++ static/search.js | 59 ++++++++++++++++++---------------- templates/partials/search.html | 8 ++--- templates/root.html | 2 +- 8 files changed, 60 insertions(+), 46 deletions(-) diff --git a/sass/_home.scss b/sass/_home.scss index ed0c5ce..3382793 100644 --- a/sass/_home.scss +++ b/sass/_home.scss @@ -1,7 +1,6 @@ .home-page { width: 100%; height: 100%; - min-width: 600px; display: flex; align-items: center; justify-content: center; @@ -11,4 +10,9 @@ margin: 0; } } + + @media (max-width: $sm-breakpoint) { + text-align: center; + flex-direction: column; + } } \ No newline at end of file diff --git a/sass/_layout.scss b/sass/_layout.scss index 75f03eb..c269d1e 100644 --- a/sass/_layout.scss +++ b/sass/_layout.scss @@ -5,15 +5,16 @@ } html, body { - height: 100%; width: 100%; + height: 100%; } .container { width: 100%; - min-width: 600px; max-width: 900px; margin-left: auto; margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; padding-bottom: 2rem; } diff --git a/sass/_search.scss b/sass/_search.scss index 842ee4f..26d16f4 100644 --- a/sass/_search.scss +++ b/sass/_search.scss @@ -1,4 +1,4 @@ -.search-container { +#search { input { padding: 0.5rem 0.75rem; border: none; @@ -7,7 +7,7 @@ border-radius: 4px; } - .search-results { + .results-container { display: none; } } diff --git a/sass/_site-nav.scss b/sass/_site-nav.scss index ec38b5c..60356c1 100644 --- a/sass/_site-nav.scss +++ b/sass/_site-nav.scss @@ -12,18 +12,17 @@ li { display: inline-block; padding: 0 0.2rem; - - color: $grey; - - & > a.active { - color: $white; - } } a { - color: inherit; + display: inline-block; + color: $grey; border: none; text-decoration: none; + + &:hover, &.active { + color: $white; + } } .main-menu { @@ -31,7 +30,6 @@ } .sub-menu { - color: $grey; font-size: 0.65rem; } } diff --git a/sass/site.scss b/sass/site.scss index 5ae222c..41996a9 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -95,6 +95,14 @@ small { font-size: 0.5em; } +ul, ol { + padding-left: 1rem; + + li { + padding-bottom: 0.2rem; + } +} + hr { border: none; height: 2px; diff --git a/static/search.js b/static/search.js index a23478d..1b97a09 100644 --- a/static/search.js +++ b/static/search.js @@ -34,13 +34,13 @@ function makeTeaser(body, terms) { }); var termFound = false; var index = 0; - var weighted = []; // contains elements of ["word", weight, index_in_document] + var weighted = []; // contains elements of ['word', weight, index_in_document] // split in sentences, then words - var sentences = body.toLowerCase().split(". "); + var sentences = body.toLowerCase().split('. '); for (var i in sentences) { - var words = sentences[i].split(" "); + var words = sentences[i].split(' '); var value = FIRST_WORD_WEIGHT; for (var j in words) { @@ -108,73 +108,76 @@ function makeTeaser(body, terms) { // add around search terms if (word[1] === TERM_WEIGHT) { - teaser.push(""); + teaser.push(''); } startIndex = word[2] + word[0].length; teaser.push(body.substring(word[2], startIndex)); if (word[1] === TERM_WEIGHT) { - teaser.push(""); + teaser.push(''); } } - teaser.push("…"); - return teaser.join(""); + teaser.push('…'); + return teaser.join(''); } function formatSearchResultItem(item, terms) { - return '
' - + `${item.doc.title}` - + `
${makeTeaser(item.doc.body, terms)}
` - + '
'; + return '
' + + `${item.doc.title}` + + `
${makeTeaser(item.doc.body, terms)}
` + + '
'; } function initSearch() { - var $searchInput = document.getElementById("search"); - var $searchResults = document.querySelector(".search-results"); - var $searchResultsItems = document.querySelector(".search-results__items"); + var $searchComponent = document.getElementById('search'); + if ($searchComponent === null) { + return; + } + var $searchInput = $searchComponent.querySelector('input'); + var $searchResults = $searchComponent.querySelector('.results-container'); + var $searchResultsItems = $searchComponent.querySelector('.results'); var MAX_ITEMS = 10; var options = { bool: "AND", fields: { - title: {boost: 2}, - body: {boost: 1}, + title: { boost: 2 }, + body: { boost: 1 }, } }; - var currentTerm = ""; + var currentTerm = ''; var index = elasticlunr.Index.load(window.searchIndex); - $searchInput.addEventListener("keyup", debounce(function() { + $searchInput.addEventListener("keyup", debounce(function () { var term = $searchInput.value.trim(); if (term === currentTerm || !index) { return; } - $searchResults.style.display = term === "" ? "none" : "block"; - $searchResultsItems.innerHTML = ""; - if (term === "") { + $searchResults.style.display = term === '' ? 'none' : 'block'; + $searchResultsItems.innerHTML = ''; + if (term === '') { return; } var results = index.search(term, options); if (results.length === 0) { - $searchResults.style.display = "none"; + $searchResults.style.display = 'none'; return; } currentTerm = term; for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) { - var item = document.createElement("li"); - item.innerHTML = formatSearchResultItem(results[i], term.split(" ")); + var item = document.createElement('li'); + item.innerHTML = formatSearchResultItem(results[i], term.split(' ')); $searchResultsItems.appendChild(item); } }, 150)); } - -if (document.readyState === "complete" || - (document.readyState !== "loading" && !document.documentElement.doScroll) +if (document.readyState === 'complete' || + (document.readyState !== 'loading' && !document.documentElement.doScroll) ) { initSearch(); } else { - document.addEventListener("DOMContentLoaded", initSearch); + document.addEventListener('DOMContentLoaded', initSearch); } \ No newline at end of file diff --git a/templates/partials/search.html b/templates/partials/search.html index bf5e886..5944ae0 100644 --- a/templates/partials/search.html +++ b/templates/partials/search.html @@ -1,6 +1,6 @@ -
- -
-
+ \ No newline at end of file diff --git a/templates/root.html b/templates/root.html index b24a9b0..8dbdfef 100644 --- a/templates/root.html +++ b/templates/root.html @@ -6,7 +6,7 @@ - +