git.iko.soy/urbit.org
on master help sign in
Merge pull request #361 from urbit/feat/search-hinting
00dfc18matildepark
sass/_main.scss−4
compare with master
unifiedsplit
@@ -314,10 +314,6 @@ nav.previous, nav.next {
314 // min-width: 110px;
314 // min-width: 110px;
315 text-align: left;
315 text-align: left;
316 background: transparent;
316 background: transparent;
317− span#search-icon {
318− display: inline-block;
319− transform: translate(-4px, 2px) rotate(-45deg);
320− }
321 span.search-slash {
317 span.search-slash {
322 font-size: 0.75em;
318 font-size: 0.75em;
323 position: absolute;
319 position: absolute;
static/scripts.js+6−3
@@ -15,8 +15,11 @@ function initHotKeys() {
15 document.body.classList.remove('has-active-search-window');
15 document.body.classList.remove('has-active-search-window');
16 }
16 }
17
17
18− // / to open toggle window
18+ // Ctrl or Meta + / to open toggle window
19+ if (
20+ (event.getModifierState("Control") || event.getModifierState("Meta")) &&
19− if (key === '/' || key === 'Period' || key === 58) {
21+ (key === '/' || key === 'Period' || key === 58)
22+ ) {
20 if (bodyEl.classList.contains('has-active-search-window')) {
23 if (bodyEl.classList.contains('has-active-search-window')) {
21 // if it's already open don't do anything!
24 // if it's already open don't do anything!
22 } else {
25 } else {
@@ -232,6 +235,7 @@ function initSearch() {
232 var searchWindow = document.getElementById('search-window');
235 var searchWindow = document.getElementById('search-window');
233 var searchActive = bodyEl.classList.contains('has-active-search-window');
236 var searchActive = bodyEl.classList.contains('has-active-search-window');
234
237
238+
235 if (toggleSearchWindow !== null) {
239 if (toggleSearchWindow !== null) {
236 toggleSearchWindow.onclick = function () {
240 toggleSearchWindow.onclick = function () {
237 inputReset.style.display = "none";
241 inputReset.style.display = "none";
@@ -325,7 +329,6 @@ function initSearch() {
325if (document.readyState === "complete" ||
329if (document.readyState === "complete" ||
326 (document.readyState !== "loading" && !document.documentElement.doScroll)
330 (document.readyState !== "loading" && !document.documentElement.doScroll)
327) {
331) {
328− initToggleSearchWindow();
329} else {
332} else {
330 document.addEventListener("DOMContentLoaded", function () {
333 document.addEventListener("DOMContentLoaded", function () {
331 initSearch();
334 initSearch();
templates/partials/navigation-docs.html+35−5
@@ -1,4 +1,30 @@
1<!-- First nav is desktop-specific. Second nav is dropdown version for mobile. -->
1<!-- First nav is desktop-specific. Second nav is dropdown version for mobile. -->
2+
3+{% set sectionTitle = "urbit.org" %}
4+{% if page %}
5+ {% if "docs" in page.components %}
6+ {% set sectionTitle = "Docs" %}
7+ {% endif %}
8+ {% if "updates" in page.components %}
9+ {% set sectionTitle = "Updates" %}
10+ {% endif %}
11+ {% if "blog" in page.components %}
12+ {% set sectionTitle = "Blog" %}
13+ {% endif %}
14+{% endif %}
15+
16+{% if section %}
17+ {% if "docs" in section.components %}
18+ {% set sectionTitle = "Docs" %}
19+ {% endif %}
20+ {% if "updates" in section.components %}
21+ {% set sectionTitle = "Updates" %}
22+ {% endif %}
23+ {% if "blog" in section.components %}
24+ {% set sectionTitle = "Blog" %}
25+ {% endif %}
26+{% endif %}
27+
2{% block content %}
28{% block content %}
3<nav class="bg-gray5 dn db-xl pt4 full-left no-break docs pr4">
29<nav class="bg-gray5 dn db-xl pt4 full-left no-break docs pr4">
4 <a class="gray3" href="{{config.base_url}}">Urbit</a>
30 <a class="gray3" href="{{config.base_url}}">Urbit</a>
@@ -6,9 +32,11 @@
6 <a href="{{config.base_url}}/docs/">
32 <a href="{{config.base_url}}/docs/">
7 Documentation
33 Documentation
8 </a>
34 </a>
9− <button id="js-search-window-toggle" class="mt2 mb4 dn db-m db-l db-xl" type="button" style="outline:none">
35+<button id="js-search-window-toggle" class="pointer pa0 pv3 dn db-m db-l db-xl bw-0 relative" type="button"
10− <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
36+ style="outline:none">
37+ <span class="dib pv1 v-mid gray3">Search {{sectionTitle}}</span>
38+ <span class="ml1 pa1 dib v-mid ba br1 b--gray3 gray3 f7" id="keyhint">Ctrl + /</span>
11− </button>
39+</button>
12 <ul class="lh-copy">
40 <ul class="lh-copy">
13 <li class="ml2 mt1"><a href="/using/install">Install -> </a></li>
41 <li class="ml2 mt1"><a href="/using/install">Install -> </a></li>
14 <li class="ml2 mt1"><a href="/using/operations/">Operations Manual -></a></li>
42 <li class="ml2 mt1"><a href="/using/operations/">Operations Manual -></a></li>
@@ -140,8 +168,10 @@
140 {% endif %}
168 {% endif %}
141 {% endfor %}
169 {% endfor %}
142 </select>
170 </select>
143− <button id="js-search-window-toggle" class="mt4 mb4 dn db-m db-l db-xl" type="button" style="outline:none">
171+ <button id="js-search-window-toggle" class="pointer pa0 pt3 dn db-m db-l db-xl bw-0 relative" type="button"
144− <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
172+ style="outline:none">
173+ <span class="pv1 dib v-mid gray3">Search {{sectionTitle}}</span>
174+ <span class="ml1 pa1 dib v-mid ba br1 b--gray3 gray3 f7" id="keyhint">Ctrl + /</span>
145 </button>
175 </button>
146</nav>
176</nav>
147{% endblock content %}
177{% endblock content %}
templates/partials/navigation-search.html+28−3
@@ -1,4 +1,29 @@
1+{% set sectionTitle = "urbit.org" %}
2+{% if page %}
3+ {% if "docs" in page.components %}
4+ {% set sectionTitle = "Docs" %}
5+ {% endif %}
6+ {% if "updates" in page.components %}
7+ {% set sectionTitle = "Updates" %}
8+ {% endif %}
9+ {% if "blog" in page.components %}
10+ {% set sectionTitle = "Blog" %}
11+ {% endif %}
12+{% endif %}
13+
14+{% if section %}
15+ {% if "docs" in section.components %}
16+ {% set sectionTitle = "Docs" %}
17+ {% endif %}
18+ {% if "updates" in section.components %}
19+ {% set sectionTitle = "Updates" %}
20+ {% endif %}
21+ {% if "blog" in section.components %}
22+ {% set sectionTitle = "Blog" %}
23+ {% endif %}
24+{% endif %}
25+
1−<button id="js-search-window-toggle" class="pointer mt2 dn db-m db-l db-xl bw-0 mb3" type="button" style="outline:none">
26+<button id="js-search-window-toggle" class="pointer pa0 pt3 dn db-m db-l db-xl bw-0 relative" type="button" style="outline:none">
2− <span id="search-icon" class="f3 gray3">⚲</span>
3− <span class="gray3">Search</span>
27+ <span class="pv1 dib v-mid gray3">Search {{sectionTitle}}</span>
28+ <span class="ml1 pa1 dib v-mid ba br1 b--gray3 gray3 f7" id="keyhint">Ctrl + /</span>
4</button>
29</button>