git.iko.soy/urbit.org
on master help sign in
Restore search functionality, update for indigo
commitd14ebf2695bad9d7181d67781c44ee0da9fa2e14 authorMatilde Park <matilde@tlon.io> dateTue 3 Sep 2019, 13:20 (7 years ago) parentbf4de9e
3 files changed+99−40
compare with master
unifiedsplit
sass/_main.scss+85−3 static/scripts.js+8−31 templates/partials/search-overlay.html+6−6
sass/_main.scss+85−3
@@ -88,7 +88,7 @@ nav ul.docs {
8888 line-height: 30px;
8989}
9090
91− // search button
91+ // search button and overlay
9292#js-search-window-toggle {
9393 position: relative;
9494 display: block;
@@ -103,16 +103,98 @@ nav ul.docs {
103103 font-size: 0.75em;
104104 position: absolute;
105105 right: 0px;
106− top: 2px;
106+ top: 6px;
107107 padding: 6px;
108108 border: 1px solid #b1b2b3;
109109 border-radius: 3px;
110110 }
111111}
112+.has-active-search-window {
113+ .search-overlay {
114+ display: block;
115+ margin-left: -32px;
116+ padding-left: 32px;
117+ height: 100vh;
118+ }
119+}
120+
121+.b-transparent {
122+ background: rgba(0,0,0,0.4);
123+}
124+
125+.pop-up {
126+ width: 100%;
127+ max-width: 600px;
128+ margin: (28rem / 4) auto;
129+ background: #fff;
130+}
131+
132+input[type="search"]::-webkit-search-decoration,
133+input[type="search"]::-webkit-search-cancel-button,
134+input[type="search"]::-webkit-search-results-button,
135+input[type="search"]::-webkit-search-results-decoration {
136+ display: none;
137+}
138+
139+input[type="search"] {
140+ font-size: (4rem / 4);
141+ line-height: (6rem / 4);
142+ transition: all 0.1s linear;
143+ padding-right: 40px;
144+ position: relative;
145+ border-radius: 0 !important;
146+ &:focus {
147+ outline: 0;
148+ border: 0;
149+ }
150+}
151+
152+.search-bar {
153+ background: #fff;
154+ font-size: (4rem / 4);
155+ transition: all 0.1s linear;
156+ padding: 12px 0 12px 0;
157+ position: relative;
158+ font-weight: normal;
159+ text-align: left;
160+ box-shadow: none !important;
161+ color: #B1B2B3;
162+ width: 100%;
163+ padding-left: 0rem;
164+ }
165+
166+ .header__search-icon {
167+ transform: rotate(-45deg);
168+ vertical-align: bottom;
169+ }
170+
171+ .search-overlay {
172+ .search-bar {
173+ &__input {
174+ padding-left: 40px;
175+ }
176+ }
177+ }
178+
179+ .search-results {
180+ max-height: 400px;
181+ &__item a:hover {
182+ background: #F9F9F9;
183+ span {
184+ display:inline-block;
185+ }
186+ }
187+ }
188+
189+ #search-reset {
190+ cursor: pointer;
191+ user-select: none;
192+ }
112193 // tooltipping
113194.tippy-tooltip {
114195 border-radius: 0px;
115196}
197+
116198.tippy-content {
117199 color: white;
118200}
@@ -121,4 +203,4 @@ nav ul.docs {
121203 .top-alert {
122204 margin: 0 -32px 1rem -32px;
123205 padding: 0.3rem 32px;
124− }
206+ }
static/scripts.js+8−31
@@ -1,28 +1,5 @@
1−// toggling of navigation menus
2−var toggleMainNav = document.getElementById('js-main-nav-toggle');
3−if (toggleMainNav !== null) {
4− toggleMainNav.onclick = function() {
5− document.body.classList.toggle('has-active-main-nav');
6− }
7−}
8−
9−var toggleContentNav = document.getElementById('js-content-nav-toggle');
10−
11−// Only show the content nav for docs or posts
12−let navEnabledSections = ['docs', 'posts']
13−let showNav = false
14−for (let section of navEnabledSections) {
15− window.location.href.includes(section) ? showNav = true : null
16−}
17−showNav ? null : toggleContentNav.classList.add('none')
181
192
20−if (toggleContentNav !== null) {
21− toggleContentNav.onclick = function() {
22− document.body.classList.toggle('has-active-content-nav');
23− }
24−}
25−
263function initHotKeys() {
274
285 var bodyEl = document.body;
@@ -341,14 +318,14 @@ if (document.readyState === "complete" ||
341318}
342319
343320// Scroll to current document in nav list.
344−let docsNavScroll = function() {
345− let docsNav = document.querySelectorAll("ul.content-nav__index a")
346− for (let link in docsNav) {
347− if (window.location.href.includes(docsNav[link].href)) {
348− docsNav[link].scrollIntoView()
349− }
350− }
351−}
321+// let docsNavScroll = function() {
322+// let docsNav = document.querySelectorAll("ul.content-nav__index a")
323+// for (let link in docsNav) {
324+// if (window.location.href.includes(docsNav[link].href)) {
325+// docsNav[link].scrollIntoView()
326+// }
327+// }
328+//}
352329
353330if (window.location.href.includes("docs")) {
354331 docsNavScroll();
templates/partials/search-overlay.html+6−6
@@ -1,14 +1,14 @@
11{% block content %}
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 col full b-transparent z10 none top0">
33 <div class="wrapper">
44 <div id="search-window" class="pop-up">
5− <div class="search-bar padding-none border-none z1 inline align-center w-full">
5+ <div class="search-bar p0 b0 z1 inline align-center col">
66 <span class="header__search-icon ml3 abs z1 fs6 gray50">⚲</span>
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>
7+ <form id="search-form" class="col"><input id="search" autocomplete="off" type="search" class="search-bar__input b0" placeholder="Go to..."></form>
8+ <a id="search-reset" class="f6 pr3 gray5 no-underline pointer:hover">&#57503;</a>
99 </div>
10− <div id="search-results" class="search-results bt1 b-gray40">
11− <div class="search-results__header ml9 mv2 gray60 fs3"></div>
10+ <div id="search-results" class="search-results bt1 b-gray4 col">
11+ <div class="search-results__header ml5 mv2 gray6 f5"></div>
1212 <ul class="list search-results__items"></ul>
1313 </div>
1414 </div>