on master help sign in
search window basic styling and scrolling results now
commitb88193ed625b5cb000aeea4959f50213c29f8740 authorfriederjanmoerman <hijbrid@gmail.com> dateWed 29 May 2019, 01:04 (7 years ago) parente56cbdf
3 files changed+20−25
sass/_main.scss+8−3 static/scripts.js+8−19 templates/partials/search-overlay.html+4−3
sass/_main.scss+8−3
@@ -46,7 +46,7 @@ iframe {
4646 max-width: 500px;
4747 margin: 14rem auto;
4848 background: #fff;
49− padding: 7rem 14rem;
49+ padding: 7rem 0;
5050}
5151
5252.container--fixed {
@@ -297,8 +297,7 @@ iframe {
297297 z-index: 10;
298298 display: none;
299299 .search-bar {
300− width: 100%;
301− padding: 0;
300+ padding: 0 14rem;
302301 border: none;
303302 &:after {
304303 content: none;
@@ -315,6 +314,12 @@ iframe {
315314 }
316315}
317316
317+.search-results {
318+ overflow-y: scroll;
319+ padding: 0 14rem;
320+ max-height: 400px;
321+}
322+
318323.has-active-search-window {
319324 .search-overlay {
320325 display: block;
static/scripts.js+8−19
@@ -67,6 +67,13 @@ function initToggleMenu() {
6767 }
6868}
6969
70+var toggleContentNav = document.getElementById('js-search-window-toggle');
71+if (toggleContentNav !== null) {
72+ toggleContentNav.onclick = function() {
73+ document.body.classList.toggle('has-active-search-window');
74+ }
75+}
76+
7077//
7178 // search functionality
7279//
@@ -100,7 +107,7 @@ function makeTeaser(body, terms) {
100107 var TERM_WEIGHT = 40;
101108 var NORMAL_WORD_WEIGHT = 2;
102109 var FIRST_WORD_WEIGHT = 8;
103− var TEASER_MAX_WORDS = 30;
110+ var TEASER_MAX_WORDS = 17;
104111
105112 var stemmedTerms = terms.map(function (w) {
106113 return elasticlunr.stemmer(w.toLowerCase());
@@ -202,29 +209,11 @@ function formatSearchResultItem(item, terms) {
202209 return li;
203210}
204211
205−// Go from the book view to the search view
206−function toggleSearchMode() {
207− var bookContent = document.querySelector(".book-content");
208− var searchContainer = document.querySelector(".search-container");
209− if (searchContainer.classList.contains("search-container--is-visible")) {
210− searchContainer.classList.remove("search-container--is-visible");
211− document.body.classList.remove("search-mode");
212− bookContent.style.display = "block";
213− } else {
214− searchContainer.classList.add("search-container--is-visible");
215− document.body.classList.add("search-mode");
216− $bookContent.style.display = "none";
217− document.getElementById("search").focus();
218− }
219−}
220−
221212function initSearch() {
222213 var searchInput = document.getElementById("search");
223214 if (!searchInput) {
224215 return;
225216 }
226− var searchIcon = document.getElementById("js-search-window-toggle");
227− searchIcon.addEventListener("click", toggleSearchMode);
228217
229218 var searchResults = document.querySelector(".search-results");
230219 var searchResultsHeader = document.querySelector(".search-results__header");
templates/partials/search-overlay.html+4−3
@@ -6,11 +6,12 @@
66 <label for="search-bar__input">
77 <p class="mb0">Search</p>
88 </label>
9− <input id="search" type="search" class="search-bar__input">
9+ <input id="search" autocomplete="off" type="search" class="search-bar__input">
10+ <div class="search-results__header mb2"></div>
1011 </div>
1112 <div class="search-results">
12− <div class="search-results__header"></div>
13− <ul class="search-results__items"></ul>
13+
14+ <ul class="list search-results__items"></ul>
1415 </div>
1516 </div>
1617 </div>