git.iko.soy/urbit.org
on master help sign in
search window basic styling and scrolling results now
b88193efriederjanmoerman
sass/_main.scss+8−3
compare with master
unifiedsplit
@@ -46,7 +46,7 @@ iframe {
46 max-width: 500px;
46 max-width: 500px;
47 margin: 14rem auto;
47 margin: 14rem auto;
48 background: #fff;
48 background: #fff;
49− padding: 7rem 14rem;
49+ padding: 7rem 0;
50}
50}
51
51
52.container--fixed {
52.container--fixed {
@@ -297,8 +297,7 @@ iframe {
297 z-index: 10;
297 z-index: 10;
298 display: none;
298 display: none;
299 .search-bar {
299 .search-bar {
300− width: 100%;
301− padding: 0;
300+ padding: 0 14rem;
302 border: none;
301 border: none;
303 &:after {
302 &:after {
304 content: none;
303 content: none;
@@ -315,6 +314,12 @@ iframe {
315 }
314 }
316}
315}
317
316
317+.search-results {
318+ overflow-y: scroll;
319+ padding: 0 14rem;
320+ max-height: 400px;
321+}
322+
318.has-active-search-window {
323.has-active-search-window {
319 .search-overlay {
324 .search-overlay {
320 display: block;
325 display: block;
static/scripts.js+8−19
@@ -67,6 +67,13 @@ function initToggleMenu() {
67 }
67 }
68}
68}
69
69
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+
70//
77//
71 // search functionality
78 // search functionality
72//
79//
@@ -100,7 +107,7 @@ function makeTeaser(body, terms) {
100 var TERM_WEIGHT = 40;
107 var TERM_WEIGHT = 40;
101 var NORMAL_WORD_WEIGHT = 2;
108 var NORMAL_WORD_WEIGHT = 2;
102 var FIRST_WORD_WEIGHT = 8;
109 var FIRST_WORD_WEIGHT = 8;
103− var TEASER_MAX_WORDS = 30;
110+ var TEASER_MAX_WORDS = 17;
104
111
105 var stemmedTerms = terms.map(function (w) {
112 var stemmedTerms = terms.map(function (w) {
106 return elasticlunr.stemmer(w.toLowerCase());
113 return elasticlunr.stemmer(w.toLowerCase());
@@ -202,29 +209,11 @@ function formatSearchResultItem(item, terms) {
202 return li;
209 return li;
203}
210}
204
211
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−
221function initSearch() {
212function initSearch() {
222 var searchInput = document.getElementById("search");
213 var searchInput = document.getElementById("search");
223 if (!searchInput) {
214 if (!searchInput) {
224 return;
215 return;
225 }
216 }
226− var searchIcon = document.getElementById("js-search-window-toggle");
227− searchIcon.addEventListener("click", toggleSearchMode);
228
217
229 var searchResults = document.querySelector(".search-results");
218 var searchResults = document.querySelector(".search-results");
230 var searchResultsHeader = document.querySelector(".search-results__header");
219 var searchResultsHeader = document.querySelector(".search-results__header");
templates/partials/search-overlay.html+4−3
@@ -6,11 +6,12 @@
6 <label for="search-bar__input">
6 <label for="search-bar__input">
7 <p class="mb0">Search</p>
7 <p class="mb0">Search</p>
8 </label>
8 </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>
10 </div>
11 </div>
11 <div class="search-results">
12 <div class="search-results">
12− <div class="search-results__header"></div>
13+
13− <ul class="search-results__items"></ul>
14+ <ul class="list search-results__items"></ul>
14 </div>
15 </div>
15 </div>
16 </div>
16 </div>
17 </div>