git.iko.soy/urbit.org
on master help sign in
New search input reset, centered search icon, smaller search box
12f20fbfrancescanarea
sass/_main.scss+8−1
compare with master
unifiedsplit
@@ -339,6 +339,14 @@ iframe {
339 * styling
339 * styling
340 */
340 */
341
341
342+ // remove default x icon
343+ input[type="search"]::-webkit-search-decoration,
344+ input[type="search"]::-webkit-search-cancel-button,
345+ input[type="search"]::-webkit-search-results-button,
346+ input[type="search"]::-webkit-search-results-decoration {
347+ display: none;
348+ }
349+
342textarea, input[type="text"], input[type="email"], input[type="number"], input[type="search"] {
350textarea, input[type="text"], input[type="email"], input[type="number"], input[type="search"] {
343 border: 1px solid #B1B2B3;
351 border: 1px solid #B1B2B3;
344 font-size: (4rem / 4);
352 font-size: (4rem / 4);
@@ -377,7 +385,6 @@ button, .btn {
377 border: 1px solid #B1B2B3;
385 border: 1px solid #B1B2B3;
378 background: #fff;
386 background: #fff;
379 font-size: (4rem / 4);
387 font-size: (4rem / 4);
380− line-height: (6rem / 4);
381 transition: all 0.1s linear;
388 transition: all 0.1s linear;
382 padding: 12px 12px 12px 40px;
389 padding: 12px 12px 12px 40px;
383 position: relative;
390 position: relative;
static/scripts.js+24−31
@@ -1,32 +1,3 @@
1−// styling of input fields
2−var inputElements = document.querySelectorAll('input.tlon-input');
3−for (var i = 0; i < inputElements.length; i++) {
4− //listen for changes in input
5− inputElements[i].addEventListener('input', function() {
6− // if input has a value do this
7− if (this.value) {
8− var inputContainer = this.parentNode;
9− var validInputs = inputContainer.querySelectorAll('input.tlon-input:valid');
10− var inputs = inputContainer.querySelectorAll('input.tlon-input');
11− if (validInputs.length !== 0) {
12− // has valid input
13− for (var i = 0; i < validInputs.length; i++) {
14− if (this.classList.contains('is-valid') == false ) {
15− validInputs[i].parentNode.classList.add('has-valid-input');
16− }
17− }
18− } else {
19− // doesn't have valid input
20− for (var i = 0; i < inputs.length; i++) {
21− inputs[i].parentNode.classList.remove('has-valid-input');
22− }
23− }
24− } else {
25− this.parentNode.classList.remove('has-valid-input');
26− }
27− });
28−}
29−
30// toggling of navigation menus
1// toggling of navigation menus
31var toggleMainNav = document.getElementById('js-main-nav-toggle');
2var toggleMainNav = document.getElementById('js-main-nav-toggle');
32if (toggleMainNav !== null) {
3if (toggleMainNav !== null) {
@@ -247,6 +218,9 @@ function formatSearchResultItem(item, terms) {
247
218
248function initSearch() {
219function initSearch() {
249 var searchInput = document.getElementById("search");
220 var searchInput = document.getElementById("search");
221+ var searchForm = document.getElementById("search-form");
222+ var inputReset = searchForm.nextElementSibling;
223+
250 if (!searchInput) {
224 if (!searchInput) {
251 return;
225 return;
252 }
226 }
@@ -271,12 +245,16 @@ function initSearch() {
271 var searchOverlay = document.getElementById('search-overlay');
245 var searchOverlay = document.getElementById('search-overlay');
272 var searchWindow = document.getElementById('search-window');
246 var searchWindow = document.getElementById('search-window');
273 var searchActive = bodyEl.classList.contains('has-active-search-window');
247 var searchActive = bodyEl.classList.contains('has-active-search-window');
248+
274 if (toggleSearchWindow !== null) {
249 if (toggleSearchWindow !== null) {
275 toggleSearchWindow.onclick = function() {
250 toggleSearchWindow.onclick = function() {
251+ inputReset.style.display="none";
252+
276 //activate search
253 //activate search
277 bodyEl.classList.toggle('has-active-search-window');
254 bodyEl.classList.toggle('has-active-search-window');
278 //put input in focus when activating search
255 //put input in focus when activating search
279 searchInput.focus();
256 searchInput.focus();
257+
280 searchInput.value = "";
258 searchInput.value = "";
281 searchResultsHeader.value = "";
259 searchResultsHeader.value = "";
282 searchResults.style.display = searchInput.value.trim() === "" ? "none" : "block";
260 searchResults.style.display = searchInput.value.trim() === "" ? "none" : "block";
@@ -287,11 +265,13 @@ function initSearch() {
287 }
265 }
288 })
266 })
289 }
267 }
290− // when typing
268+
269+
291 searchInput.addEventListener("keyup", debounce(function() {
270 searchInput.addEventListener("keyup", debounce(function() {
271+ inputReset.style.display="block";
272+
292 searchResultsHeader.value = "";
273 searchResultsHeader.value = "";
293 var term = searchInput.value.trim();
274 var term = searchInput.value.trim();
294−
295 /*
275 /*
296 //removed to fix: a state where there’s a valid search term, but no results
276 //removed to fix: a state where there’s a valid search term, but no results
297
277
@@ -303,12 +283,14 @@ function initSearch() {
303 searchResults.style.overflowY = term === "" ? "hidden" : "scroll";
283 searchResults.style.overflowY = term === "" ? "hidden" : "scroll";
304 searchResultsItems.innerHTML = "";
284 searchResultsItems.innerHTML = "";
305 if (term === "") {
285 if (term === "") {
286+ inputReset.style.display="none";
306 return;
287 return;
307 }
288 }
308
289
309 var results = index.search(term, options).filter(function (r) {
290 var results = index.search(term, options).filter(function (r) {
310 return r.doc.body !== "";
291 return r.doc.body !== "";
311 });
292 });
293+
312 if (results.length === 0) {
294 if (results.length === 0) {
313 searchResultsHeader.innerText = `No search results for '${term}'.`;
295 searchResultsHeader.innerText = `No search results for '${term}'.`;
314 return;
296 return;
@@ -323,6 +305,17 @@ function initSearch() {
323 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));
305 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));
324 }
306 }
325 }, 150));
307 }, 150));
308+
309+ // reset input button
310+ inputReset.onclick=function(){
311+ document.getElementById('search-form').reset();
312+ }
313+ searchForm.addEventListener("reset", function(event){
314+ var e = document.createEvent('KeyboardEvent');
315+ e.initEvent("keyup", false, true);
316+ searchInput.dispatchEvent(e);
317+ });
318+
326}
319}
327
320
328if (document.readyState === "complete" ||
321if (document.readyState === "complete" ||
templates/partials/search-overlay.html+5−4
@@ -2,11 +2,12 @@
2<div id="search-overlay" class="search-overlay fix vh100 w-full b-transparent z10 none top0">
2<div id="search-overlay" class="search-overlay fix vh100 w-full b-transparent z10 none top0">
3 <div class="wrapper">
3 <div class="wrapper">
4 <div id="search-window" class="pop-up">
4 <div id="search-window" class="pop-up">
5− <div class="search-bar padding-none border-none z1">
5+ <div class="search-bar padding-none border-none z1 inline align-center w-full">
6− <span class="header__search-icon abs z1 fs6 pl3 pt4 pb2">⚲</span>
6+ <span class="header__search-icon ml3 abs z1 fs6 gray50">⚲</span>
7− <input id="search" autocomplete="off" type="search" class="search-bar__input border-none" placeholder="Go to...">
7+ <form id="search-form" class="w-full"><input id="search" autocomplete="off" type="search" class="search-bar__input border-none" placeholder="Go to..."></form>
8+ <a id="search-reset" class="fs6 pr3 gray50 no-underline pointer:hover">&#57503;</a>
8 </div>
9 </div>
9− <div class="search-results bt1 b-gray40">
10+ <div id="search-results" class="search-results bt1 b-gray40">
10 <div class="search-results__header ml9 mv2 gray60 fs3"></div>
11 <div class="search-results__header ml9 mv2 gray60 fs3"></div>
11 <ul class="list search-results__items"></ul>
12 <ul class="list search-results__items"></ul>
12 </div>
13 </div>