git.iko.soy/urbit.org
on master help sign in
Now displays search results for all pages, not just /docs + misc design fixes
d09c724francescanarea
sass/_main.scss+14−15
compare with master
unifiedsplit
@@ -299,6 +299,7 @@ iframe {
299 .search-bar {
299 .search-bar {
300 padding: 0;
300 padding: 0;
301 border: none;
301 border: none;
302+ //border-bottom:black;
302 &__input {
303 &__input {
303 padding-left: 40px;
304 padding-left: 40px;
304 border-left: none;
305 border-left: none;
@@ -309,13 +310,16 @@ iframe {
309 z-index: 1;
310 z-index: 1;
310 }
311 }
311 &:hover, &:active, &:focus {
312 &:hover, &:active, &:focus {
312− border: none;
313+ border:none;
314+
313 }
315 }
314 input[type="search"] {
316 input[type="search"] {
315 &:hover, &:active, &:focus {
317 &:hover, &:active, &:focus {
316 border-left: none;
318 border-left: none;
317 border-top: none;
319 border-top: none;
318 border-right: none;
320 border-right: none;
321+
322+
319 }
323 }
320 }
324 }
321 &__input {
325 &__input {
@@ -326,15 +330,13 @@ iframe {
326
330
327.search-results {
331.search-results {
328 max-height: 400px;
332 max-height: 400px;
329− //&__item, &__item a,
333+ &__item, &__item a,
330− &__header {
334+
331− color: #B1B2B3;
332− }
333 &__item {
335 &__item {
334 a {
336 a {
335− text-decoration: none;
337+ //text-decoration: none;
336− display: block;
338+ //display: block;
337− padding: (3rem /4) (4rem / 4);
339+ //padding: (3rem /4) (4rem / 4);
338 &:hover {
340 &:hover {
339 background: #F9F9F9;
341 background: #F9F9F9;
340 &:before, &:after {
342 &:before, &:after {
@@ -369,18 +371,15 @@ iframe {
369 b {
371 b {
370 color: #000;
372 color: #000;
371 }
373 }
372− &__title {
374+ /*&__title {
373− font-size: (6rem / 4);
375+ //font-size: (6rem / 4);
374 text-transform: capitalize;
376 text-transform: capitalize;
375 &__slug-end {
377 &__slug-end {
376 color: #000;
378 color: #000;
377 font-weight: 700;
379 font-weight: 700;
378 padding-right: (8rem / 4);
380 padding-right: (8rem / 4);
379 }
381 }
380− }
382+ }*/
381− }
382− &__header {
383− padding: 0 (7rem / 4);
384 }
383 }
385}
384}
386
385
@@ -462,7 +461,7 @@ button, .btn {
462 height: 9px;
461 height: 9px;
463 }
462 }
464 &:hover {
463 &:hover {
465− border: 1px solid #000000;
464+ border: 1px solid #7f7f7f;
466 }
465 }
467}
466}
468
467
static/scripts.js+28−6
@@ -137,6 +137,7 @@ function makeTeaser(body, terms) {
137 var stemmedTerms = terms.map(function (w) {
137 var stemmedTerms = terms.map(function (w) {
138 return elasticlunr.stemmer(w.toLowerCase());
138 return elasticlunr.stemmer(w.toLowerCase());
139 });
139 });
140+
140 var termFound = false;
141 var termFound = false;
141 var index = 0;
142 var index = 0;
142 var weighted = []; // contains elements of ["word", weight, index_in_document]
143 var weighted = []; // contains elements of ["word", weight, index_in_document]
@@ -221,15 +222,15 @@ function makeTeaser(body, terms) {
221 startIndex = word[2];
222 startIndex = word[2];
222 }
223 }
223
224
224− // add <em/> around search terms
225+ // add dark color around search terms
225 if (word[1] === TERM_WEIGHT) {
226 if (word[1] === TERM_WEIGHT) {
226− teaser.push("<b>");
227+ teaser.push("<span class='gray70'>");
227 }
228 }
228 startIndex = word[2] + word[0].length;
229 startIndex = word[2] + word[0].length;
229 teaser.push(body.substring(word[2], startIndex));
230 teaser.push(body.substring(word[2], startIndex));
230
231
231 if (word[1] === TERM_WEIGHT) {
232 if (word[1] === TERM_WEIGHT) {
232− teaser.push("</b>");
233+ teaser.push("</span>");
233 }
234 }
234 }
235 }
235 teaser.push("…");
236 teaser.push("…");
@@ -237,15 +238,35 @@ function makeTeaser(body, terms) {
237}
238}
238
239
239function formatSearchResultTitle(path) {
240function formatSearchResultTitle(path) {
241+// console.log(path);
242+ var pathArray = path.split( '/' );
243+ //console.log(pathArray);
244+ /*var slug = pathArray[1];
245+// console.log(slug);
246+ var slugArray = slug.split( '/' );
247+ var lastPartTitle = slugArray.splice(slugArray.length - 2, slugArray.length).join('');
248+ var firstPartTitle = slugArray.join(' / ');
249+//console.log(lastPartTitle);
250+//console.log(firstPartTitle);
251+*/
252+ var firstPartTitle = pathArray[3]; // first directory is in 4th element of path array
253+ var lastPartTitle = pathArray[pathArray.length-2]; // last directory is in 2nd to last element of array
254+ var fullTitle = firstPartTitle + '<span class="gray90">' + ' / ' + lastPartTitle + '</span>';
255+ console.log(fullTitle);
256+ return fullTitle;
257+/*
240 var pathArray = path.split( 'docs/' );
258 var pathArray = path.split( 'docs/' );
259+// console.log(pathArray);
241 var slug = pathArray[1];
260 var slug = pathArray[1];
261+// console.log(slug);
242 var slugArray = slug.split( '/' );
262 var slugArray = slug.split( '/' );
243 var lastPartTitle = slugArray.splice(slugArray.length - 2, slugArray.length).join('');
263 var lastPartTitle = slugArray.splice(slugArray.length - 2, slugArray.length).join('');
244 var firstPartTitle = slugArray.join(' / ');
264 var firstPartTitle = slugArray.join(' / ');
245
265
246− var fullTitle = firstPartTitle + ' / ' + '<span class="search-results__item__title__slug-end">' + lastPartTitle + '</span>';
266+ var fullTitle = firstPartTitle + '<span class="gray90">' + ' / ' + lastPartTitle + '</span>';
247
267
248 return fullTitle;
268 return fullTitle;
269+ */
249}
270}
250
271
251function formatSearchResultItem(item, terms) {
272function formatSearchResultItem(item, terms) {
@@ -256,8 +277,9 @@ function formatSearchResultItem(item, terms) {
256 li.classList.add("search-results__item");
277 li.classList.add("search-results__item");
257 var hrefA = item.ref;
278 var hrefA = item.ref;
258 createA.setAttribute('href', hrefA);
279 createA.setAttribute('href', hrefA);
280+ createA.setAttribute('class','no-underline block pl6 pv2');
259− createA.innerHTML = `<span class="search-results__item__title">${teaserTitle}</span>`;
281+ createA.innerHTML = `<span class="fs45 capitalize gray30">${teaserTitle}</span>`;
260− createA.innerHTML += `<div class="search-results__teaser">${makeTeaser(item.doc.body, terms)}</div>`;
282+ createA.innerHTML += `<div class="fs35 gray30">${makeTeaser(item.doc.body, terms)}</div>`;
261 return li;
283 return li;
262}
284}
263
285
templates/partials/navigation-docs.html+1−1
@@ -7,7 +7,7 @@
7 {% set index = get_section(path="docs/_index.md") %}
7 {% set index = get_section(path="docs/_index.md") %}
8 {% for s in index.subsections %}
8 {% for s in index.subsections %}
9 {% set subsection = get_section(path=s) %}
9 {% set subsection = get_section(path=s) %}
10− <li class="list__item content-nav__index__item">
10+ <li class="list__item content-nav__index__item mt5">
11 <a class="text-600" href="{{ subsection.permalink }}">
11 <a class="text-600" href="{{ subsection.permalink }}">
12 {{ subsection.title }}
12 {{ subsection.title }}
13 </a>
13 </a>
templates/partials/search-overlay.html+1−1
@@ -6,7 +6,7 @@
6 <input id="search" autocomplete="off" type="search" class="search-bar__input" placeholder="Go to...">
6 <input id="search" autocomplete="off" type="search" class="search-bar__input" placeholder="Go to...">
7 </div>
7 </div>
8 <div class="search-results">
8 <div class="search-results">
9− <div class="search-results__header mb2"></div>
9+ <div class="search-results__header ml6 mv2 gray30 fs3"></div>
10 <ul class="list search-results__items"></ul>
10 <ul class="list search-results__items"></ul>
11 </div>
11 </div>
12 </div>
12 </div>