d14ebf2 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

Restore search functionality, update for indigo

d14ebf2Matilde Park7 years ago

sass/_main.scss+85−3

compare with master

unifiedsplit

@@ -88,7 +88,7 @@ nav ul.docs {

88 line-height: 30px;

89}

91− // search button

91+ // search button and overlay

92#js-search-window-toggle {

93 position: relative;

94 display: block;

@@ -103,16 +103,98 @@ nav ul.docs {

103 font-size: 0.75em;

104 position: absolute;

105 right: 0px;

106− top: 2px;

106+ top: 6px;

107 padding: 6px;

108 border: 1px solid #b1b2b3;

109 border-radius: 3px;

110 }

111}

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+ }

112 // tooltipping

193 // tooltipping

113.tippy-tooltip {

194.tippy-tooltip {

114 border-radius: 0px;

195 border-radius: 0px;

115}

196}

197+

116.tippy-content {

198.tippy-content {

117 color: white;

199 color: white;

118}

200}

@@ -121,4 +203,4 @@ nav ul.docs {

121 .top-alert {

203 .top-alert {

122 margin: 0 -32px 1rem -32px;

204 margin: 0 -32px 1rem -32px;

123 padding: 0.3rem 32px;

205 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')

20−if (toggleContentNav !== null) {

21− toggleContentNav.onclick = function() {

22− document.body.classList.toggle('has-active-content-nav');

23− }

24−}

25−

26function initHotKeys() {

3function initHotKeys() {

28 var bodyEl = document.body;

5 var bodyEl = document.body;

@@ -341,14 +318,14 @@ if (document.readyState === "complete" ||

341}

318}

342

319

343// Scroll to current document in nav list.

320// Scroll to current document in nav list.

344−let docsNavScroll = function() {

321+// let docsNavScroll = function() {

345− let docsNav = document.querySelectorAll("ul.content-nav__index a")

322+// let docsNav = document.querySelectorAll("ul.content-nav__index a")

346− for (let link in docsNav) {

323+// for (let link in docsNav) {

347− if (window.location.href.includes(docsNav[link].href)) {

324+// if (window.location.href.includes(docsNav[link].href)) {

348− docsNav[link].scrollIntoView()

325+// docsNav[link].scrollIntoView()

349− }

326+// }

350− }

327+// }

351−}

328+//}

352

329

353if (window.location.href.includes("docs")) {

330if (window.location.href.includes("docs")) {

354 docsNavScroll();

331 docsNavScroll();

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

@@ -1,14 +1,14 @@

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

3 <div class="wrapper">

4 <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">

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

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="fs6 pr3 gray50 no-underline pointer:hover"></a>

8+ <a id="search-reset" class="f6 pr3 gray5 no-underline pointer:hover"></a>

9 </div>

10− <div id="search-results" class="search-results bt1 b-gray40">

10+ <div id="search-results" class="search-results bt1 b-gray4 col">

11− <div class="search-results__header ml9 mv2 gray60 fs3"></div>

11+ <div class="search-results__header ml5 mv2 gray6 f5"></div>

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

13 </div>

14 </div>