827e532 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

styled the results as instructed, still missing the arrow on hover

827e532friederjanmoerman7 years ago

sass/_main.scss+45−10

compare with master

unifiedsplit

@@ -43,10 +43,9 @@ iframe {

44.pop-up {

45 width: 100%;

46− max-width: 500px;

46+ max-width: 600px;

47− margin: 14rem auto;

47+ margin: 28rem auto;

48 background: #fff;

49− padding: 7rem 0;

50}

49}

52.container--fixed {

51.container--fixed {

@@ -297,17 +296,27 @@ iframe {

297 z-index: 10;

296 z-index: 10;

298 display: none;

297 display: none;

299 .search-bar {

298 .search-bar {

300− padding: 0 14rem;

299+ padding: 0;

301 border: none;

300 border: none;

302− &:after {

301+ &__input {

303− content: none;

302+ padding-left: 40px;

303+ border-left: none;

304+ border-top: none;

305+ border-right: none;

304 }

306 }

305 &:before {

307 &:before {

306− content: none;

308+ z-index: 1;

307 }

309 }

308− &:hover {

310+ &:hover, &:active, &:focus {

309 border: none;

311 border: none;

310 }

312 }

313+ input[type="search"] {

314+ &:hover, &:active, &:focus {

315+ border-left: none;

316+ border-top: none;

317+ border-right: none;

318+ }

319+ }

311 &__input {

320 &__input {

312 line-height: 6rem;

321 line-height: 6rem;

313 }

322 }

@@ -315,9 +324,35 @@ iframe {

315}

324}

316

325

317.search-results {

326.search-results {

318− overflow-y: scroll;

319− padding: 0 14rem;

320 max-height: 400px;

327 max-height: 400px;

328+ &__item, &__header {

329+ color: #B1B2B3;

330+ }

331+ &__item {

332+ transition: all 0.1s linear;

333+ padding: 2rem 7rem;

334+ &:hover {

335+ background: #F9F9F9;

336+ }

337+ &:last-child {

338+ margin-bottom: 2rem;

339+ }

340+ b {

341+ color: #000;

342+ }

343+ &__title {

344+ color: #B1B2B3;

345+ font-size: 6rem;

346+ text-transform: capitalize;

347+ text-decoration: none;

348+ &__slug-end {

349+ color: #000;

350+ }

351+ }

352+ }

353+ &__header {

354+ padding: 0 7rem;

355+ }

321}

356}

322

357

323.has-active-search-window {

358.has-active-search-window {

static/scripts.js+18−11

@@ -111,7 +111,7 @@ function makeTeaser(body, terms) {

111 var TERM_WEIGHT = 40;

112 var NORMAL_WORD_WEIGHT = 2;

113 var FIRST_WORD_WEIGHT = 8;

114− var TEASER_MAX_WORDS = 17;

114+ //var TEASER_MAX_WORDS = 17;

115 var TEASER_MAX_CHARS = 63;

116

117 var stemmedTerms = terms.map(function (w) {

@@ -155,7 +155,8 @@ function makeTeaser(body, terms) {

155

156 var windowWeights = [];

157 var windowSize = 0;

158−

158+

159+ // loop over words (weighted) till max chars is reached adding a counter to windowSize every time a new word has passed

159 var sumChars = 0;

160 var sumChars = 0;

160 for (var i = 0; i < weighted.length; i++) {

161 for (var i = 0; i < weighted.length; i++) {

161 sumChars += weighted[i][0].length;

162 sumChars += weighted[i][0].length;

@@ -215,21 +216,26 @@ function makeTeaser(body, terms) {

215 return teaser.join("");

216 return teaser.join("");

216}

217}

217

218

218−/*function trimTeaser(teaser) {

219+function formatSearchResultTitle(path) {

219− var maxLength = 63; // maximum number of characters to extract

220+ var pathArray = path.split( 'docs/' );

220− var string = teaser;

221+ var slug = pathArray[1];

221− var trimmedString = teaser.substr(0, maxLength); //trim the string to the maximum length

222+ var slugArray = slug.split( '/' );

222− trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" "))) //re-trim if we are in the middle of a word

223+ var lastPartTitle = slugArray.splice(slugArray.length - 2, slugArray.length).join('');

223−}*/

224+ var firstPartTitle = slugArray.join(' / ');

225+

226+ console.log(lastPartTitle + " lastPartTitle");

227+

228+ var fullTitle = firstPartTitle + ' / ' + '<span class="search-results__item__title__slug-end">' + lastPartTitle + '</span>';

229+ console.log(fullTitle + " fullPartTitle");

224

230

225−function trimTeaserTitle() {

231+ return fullTitle;

226− //

227}

232}

228

233

229function formatSearchResultItem(item, terms) {

234function formatSearchResultItem(item, terms) {

230 var li = document.createElement("li");

235 var li = document.createElement("li");

236+ var teaserTitle = formatSearchResultTitle(item.ref);

231 li.classList.add("search-results__item");

237 li.classList.add("search-results__item");

232− li.innerHTML = `<a href="${item.ref}">${item.ref}</a>`;

238+ li.innerHTML = `<a class="search-results__item__title" href="${item.ref}">${teaserTitle}</a>`;

233 li.innerHTML += `<div class="search-results__teaser">${makeTeaser(item.doc.body, terms)}</div>`;

239 li.innerHTML += `<div class="search-results__teaser">${makeTeaser(item.doc.body, terms)}</div>`;

234 return li;

240 return li;

235}

241}

@@ -261,6 +267,7 @@ function initSearch() {

261 return;

267 return;

262 }

268 }

263 searchResults.style.display = term === "" ? "none" : "block";

269 searchResults.style.display = term === "" ? "none" : "block";

270+ searchResults.style.overflowY = term === "" ? "hidden" : "scroll";

264 searchResultsItems.innerHTML = "";

271 searchResultsItems.innerHTML = "";

265 if (term === "") {

272 if (term === "") {

266 return;

273 return;

templates/partials/search-overlay.html+2−5

@@ -3,13 +3,10 @@

3 <div class="wrapper">

4 <div id="search-window" class="pop-up">

5 <div class="search-bar">

6− <label for="search-bar__input">

7− <p class="mb0">Search</p>

8− </label>

9− <input id="search" autocomplete="off" type="search" class="search-bar__input">

6+ <input id="search" autocomplete="off" type="search" class="search-bar__input" placeholder="Go to...">

10− <div class="search-results__header mb2"></div>

11 </div>

7 </div>

12 <div class="search-results">

8 <div class="search-results">

9+ <div class="search-results__header mb2"></div>

13 <ul class="list search-results__items"></ul>

10 <ul class="list search-results__items"></ul>

14 </div>

11 </div>

15 </div>

12 </div>