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

git.iko.soy/urbit.org

Cleaned up icon CSS. Removed mobile search.

commit530f30ea324efcd65fd6ee64bd80698fd1c9219a authorfrancescanarea <francesca@narea.com> dateMon 8 Jul 2019, 21:13 (7 years ago) parentc36eab8

4 files changed+41−123

compare with master

unifiedsplit

sass/_main.scss+27−105 static/scripts.js+5−10 templates/partials/navigation-docs.html+3−3 templates/partials/search-overlay.html+6−5

sass/_main.scss+27−105

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

9191 .content-nav {

9292 &__search-bar {

9393 width: 100%;

94+ padding-left: 0rem;

9495 }

9596 &__index {

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

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

238239 transform: translate(0, 7px);

239240 }

240241 }

242+ &__search-icon {

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

244+ }

241245}

242246

243247.has-active-main-nav {

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

287291 max-width: 320px;

288292}

289293

290−.search-overlay {

291− position: fixed;

292− height: 100%;

293− width: 100%;

294+.padding-none {

295+ padding: 0 !important;

296+}

297+

298+.border-none {

299+ border: none !important;

300+}

301+

302+.b-transparent {

294303 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− }

309− &:before {

310− z-index: 1;

311− }

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

313− border:none;

304+}

314305

315− }

316− input[type="search"] {

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

318− border-left: none;

319− border-top: none;

320− border-right: none;

306+.top0 {

307+ top: 0;

308+}

321309

310+.float-right {

311+ float: right;

312+}

322313

323− }

324− }

314+.search-overlay {

315+ .search-bar {

325316 &__input {

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

317+ padding-left: 40px;

327318 }

328319 }

329320}

330321

331322.search-results {

332323 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 {

341− background: #F9F9F9;

342− &:before, &:after {

343− content: '';

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;

324+ &__item a:hover {

325+ background: #F9F9F9;

326+ span {

327+ display:inline-block;

373328 }

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− }*/

383329 }

384330}

385331

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

439385 text-align: left;

440386 box-shadow: none !important;

441387 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− }

466388}

467389

468390.has-valid-input {

static/scripts.js+5−10

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

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

107107// Enclose the terms in <b>.

108108function makeTeaser(body, terms) {

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

110109 var TERM_WEIGHT = 40;

111110 var NORMAL_WORD_WEIGHT = 2;

112111 var FIRST_WORD_WEIGHT = 8;

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

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

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

227226

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

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

229228

230229 return fullTitle;

231230}

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

236235 li.appendChild(createA);

237236 var teaserTitle = formatSearchResultTitle(item.ref);

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

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

239239 var hrefA = item.ref;

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

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

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

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

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

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

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

244245 return li;

245246}

246247

247248function initSearch() {

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

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

250−

251250 if (!searchInput) {

252251 return;

253252 }

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

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

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

258257 var MAX_ITEMS = 200;

259−

260258 var options = {

261259 bool: "AND",

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

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

267265 };

268266 var currentTerm = "";

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

270−

271268 // toggle search window

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

273270 var bodyEl = document.body;

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

290287 }

291288 })

292289 }

293−

294290 // when typing

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

296292 searchResultsHeader.value = "";

297−

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

299294

300295 /*

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

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

11{% block content %}

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

33<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>

47 <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>

88 {% block menu %}

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

1010 {% for s in index.subsections %}

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

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

11{% 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">

33 <div class="wrapper">

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

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

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

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

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

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

78 </div>

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

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

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

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

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

1112 </div>

1213 </div>