530f30e · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

Cleaned up icon CSS. Removed mobile search.

530f30efrancescanarea7 years ago

sass/_main.scss+27−105

compare with master

unifiedsplit

@@ -91,6 +91,7 @@ iframe {

91 .content-nav {

92 &__search-bar {

93 width: 100%;

94+ padding-left: 0rem;

94 }

95 }

95 &__index {

96 &__index {

96 height: calc(100% - 48px);

97 height: calc(100% - 48px);

@@ -238,6 +239,9 @@ iframe {

238 transform: translate(0, 7px);

239 transform: translate(0, 7px);

239 }

240 }

241 }

242+ &__search-icon {

243+ -webkit-transform: rotate(-45deg);

244+ }

241}

245}

242

246

243.has-active-main-nav {

247.has-active-main-nav {

@@ -287,99 +291,41 @@ iframe {

287 max-width: 320px;

291 max-width: 320px;

288}

292}

289

293

290−.search-overlay {

294+.padding-none {

291− position: fixed;

295+ padding: 0 !important;

292− height: 100%;

296+}

293− width: 100%;

297+

298+.border-none {

299+ border: none !important;

300+}

301+

302+.b-transparent {

294 background: rgba(0,0,0,0.4);

303 background: rgba(0,0,0,0.4);

295− top: 0;

296− left: 0;

297− z-index: 10;

298− display: none;

299− .search-bar {

300− padding: 0;

301− border: none;

302− //border-bottom:black;

303− &__input {

304− padding-left: 40px;

305− border-left: none;

306− border-top: none;

307− border-right: none;

308− }

304+}

309− &:before {

310− z-index: 1;

311− }

312− &:hover, &:active, &:focus {

313− border:none;

314

305

315− }

306+.top0 {

316− input[type="search"] {

307+ top: 0;

317− &:hover, &:active, &:focus {

308+}

318− border-left: none;

319− border-top: none;

320− border-right: none;

321

309

310+.float-right {

311+ float: right;

312+}

322

313

323− }

314+.search-overlay {

324− }

315+ .search-bar {

325 &__input {

316 &__input {

326− line-height: (6rem / 4);

317+ padding-left: 40px;

327 }

318 }

328 }

319 }

329}

320}

330

321

331.search-results {

322.search-results {

332 max-height: 400px;

323 max-height: 400px;

333− &__item, &__item a,

334−

335− &__item {

336− a {

337− //text-decoration: none;

338− //display: block;

339− //padding: (3rem /4) (4rem / 4);

340− &:hover {

324+ &__item a:hover {

341− background: #F9F9F9;

325+ background: #F9F9F9;

342− &:before, &:after {

326+ span {

343− content: '';

327+ display:inline-block;

344− position: absolute;

345− right: 40px;

346− }

347− &:before {

348− content: '';

349− height: 10px;

350− width: 10px;

351− border-top: 2px solid #000;

352− border-right: 2px solid #000;

353− transform: rotate(45deg);

354− top: 17px;

355− }

356− &:after {

357− content: '';

358− width: 17px;

359− height: 2px;

360− background: #000;

361− top: 22px;

362− right: 39px;

363− }

364− }

365− }

366− position: relative;

367− transition: all 0.1s linear;

368− &:last-child {

369− margin-bottom: (2rem / 4);

370− }

371− b {

372− color: #000;

373 }

328 }

374− /*&__title {

375− //font-size: (6rem / 4);

376− text-transform: capitalize;

377− &__slug-end {

378− color: #000;

379− font-weight: 700;

380− padding-right: (8rem / 4);

381− }

382− }*/

383 }

329 }

384}

330}

385

331

@@ -439,30 +385,6 @@ button, .btn {

439 text-align: left;

385 text-align: left;

440 box-shadow: none !important;

386 box-shadow: none !important;

441 color: #B1B2B3;

387 color: #B1B2B3;

442− &:after {

443− content: '';

444− position: absolute;

445− left: 10px;

446− top: 20px;

447− width: 10px;

448− height: 10px;

449− border-radius: 50%;

450− border: 2px solid #000;

451− margin-top: -4px;

452− }

453− &:before {

454− content: '';

455− position: absolute;

456− left: 23px;

457− top: 25px;

458− transform: rotate(-45deg);

459− background: #000;

460− width: 2px;

461− height: 9px;

462− }

463− &:hover {

464− border: 1px solid #7f7f7f;

465− }

466}

388}

467

389

468.has-valid-input {

390.has-valid-input {

static/scripts.js+5−10

@@ -106,7 +106,6 @@ function debounce(func, wait) {

106// maximum sum. If there are multiple maximas, then get the last one.

107// Enclose the terms in <b>.

108function makeTeaser(body, terms) {

109− console.log("make teaser");

110 var TERM_WEIGHT = 40;

109 var TERM_WEIGHT = 40;

111 var NORMAL_WORD_WEIGHT = 2;

110 var NORMAL_WORD_WEIGHT = 2;

112 var FIRST_WORD_WEIGHT = 8;

111 var FIRST_WORD_WEIGHT = 8;

@@ -225,7 +224,7 @@ function formatSearchResultTitle(path) {

225 // last directory is in 2nd to last element of array

224 // last directory is in 2nd to last element of array

226 var lastPartTitle = pathArray[pathArray.length-2].replace(/-/g,' ');

225 var lastPartTitle = pathArray[pathArray.length-2].replace(/-/g,' ');

227

226

228− var fullTitle = firstPartTitle + '<span class="gray90">' + ' / ' + lastPartTitle + '</span>';

227+ var fullTitle = firstPartTitle + '<span class="gray90 inline-block pl2">' + ' / ' + lastPartTitle + '</span>';

229

228

230 return fullTitle;

229 return fullTitle;

231}

230}

@@ -236,18 +235,18 @@ function formatSearchResultItem(item, terms) {

236 li.appendChild(createA);

235 li.appendChild(createA);

237 var teaserTitle = formatSearchResultTitle(item.ref);

236 var teaserTitle = formatSearchResultTitle(item.ref);

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

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

238+ li.classList.add("ph3");

239 var hrefA = item.ref;

240 createA.setAttribute('href', hrefA);

241− createA.setAttribute('class','no-underline block pl6 pv2');

241+ createA.setAttribute('class','no-underline block pl6 pv3');

242 createA.innerHTML = `<span class="fs45 capitalize gray30">${teaserTitle}</span>`;

243+ createA.innerHTML += `<span class='pr7 fs5 none float-right'>→</span>`;

243− createA.innerHTML += `<div class="fs35 gray30">${makeTeaser(item.doc.body, terms)}</div>`;

244+ createA.innerHTML += `<div class="fs35 gray30 truncate mr10">${makeTeaser(item.doc.body, terms)}</div>`;

244 return li;

245 return li;

245}

246}

246

247

247function initSearch() {

248function initSearch() {

248− console.log("init search");

249 var searchInput = document.getElementById("search");

250−

251 if (!searchInput) {

250 if (!searchInput) {

252 return;

251 return;

253 }

252 }

@@ -256,7 +255,6 @@ function initSearch() {

256 var searchResultsHeader = document.querySelector(".search-results__header");

255 var searchResultsHeader = document.querySelector(".search-results__header");

257 var searchResultsItems = document.querySelector(".search-results__items");

256 var searchResultsItems = document.querySelector(".search-results__items");

258 var MAX_ITEMS = 200;

257 var MAX_ITEMS = 200;

259−

260 var options = {

258 var options = {

261 bool: "AND",

259 bool: "AND",

262 expand: true, // turn on partial word search

260 expand: true, // turn on partial word search

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

267 };

265 };

268 var currentTerm = "";

266 var currentTerm = "";

269 var index = elasticlunr.Index.load(window.searchIndex);

267 var index = elasticlunr.Index.load(window.searchIndex);

270−

271 // toggle search window

268 // toggle search window

272 var toggleSearchWindow = document.getElementById('js-search-window-toggle');

269 var toggleSearchWindow = document.getElementById('js-search-window-toggle');

273 var bodyEl = document.body;

270 var bodyEl = document.body;

@@ -290,11 +287,9 @@ function initSearch() {

290 }

287 }

291 })

288 })

292 }

289 }

293−

294 // when typing

290 // when typing

295 searchInput.addEventListener("keyup", debounce(function() {

291 searchInput.addEventListener("keyup", debounce(function() {

296 searchResultsHeader.value = "";

292 searchResultsHeader.value = "";

297−

298 var term = searchInput.value.trim();

293 var term = searchInput.value.trim();

299

294

300 /*

295 /*

templates/partials/navigation-docs.html+3−3

@@ -1,10 +1,10 @@

1{% block content %}

2<div id="js-content-nav-toggle" class="content-nav-icon"></div>

3<nav class="content-nav">

4+ <button id="js-search-window-toggle" type="button" class="search-bar content-nav__search-bar" style="outline:none">

5+ <span class="header__search-icon mh3 inline-block fs6">⚲</span>Search

6+ </button>

4 <ul class="list content-nav__index">

7 <ul class="list content-nav__index">

5− <li class="list__item content-nav__index__item">

6− <button id="js-search-window-toggle" type="button" class="search-bar content-nav__search-bar mb2">Search</button>

7− </li>

8 {% block menu %}

9 {% set index = get_section(path="docs/_index.md") %}

10 {% for s in index.subsections %}

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

@@ -1,12 +1,13 @@

1{% block content %}

2−<div id="search-overlay" class="search-overlay">

2+<div id="search-overlay" class="search-overlay fix vh100 w-full b-transparent z10 none top0">

3 <div class="wrapper">

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

5− <div class="search-bar">

5+ <div class="search-bar padding-none border-none z1">

6+ <span class="header__search-icon abs z1 fs6 pl3 pt4 pb2">⚲</span>

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

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

7 </div>

8 </div>

8− <div class="search-results">

9+ <div class="search-results bt1 b-gray30">

9− <div class="search-results__header ml6 mv2 gray30 fs3"></div>

10+ <div class="search-results__header ml9 mv2 gray30 fs3"></div>

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

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

11 </div>

12 </div>

13 </div>