git.iko.soy/urbit.org
on master help sign in
Docs: Mobile select navigation
bdb3f80Matilde Park
sass/_main.scss+9−1
compare with master
unifiedsplit
@@ -418,13 +418,21 @@ body.page-indiced {
418 }
418 }
419}
419}
420
420
421−// doc-specific chevrons
421+// doc-specific navigation
422
422
423+select {
424+ -webkit-appearance: none;
425+ border: 0;
426+ outline: 0;
427+ background: transparent;
428+ font-family: "Inter UI", sans-serif;
429+}
423nav.docs:not(.mobile) {
430nav.docs:not(.mobile) {
424 height: 100vh;
431 height: 100vh;
425 position: fixed;
432 position: fixed;
426 overflow-y: scroll;
433 overflow-y: scroll;
427 width: 25vw;
434 width: 25vw;
435+ max-width: 300px;
428}
436}
429nav.docs details {
437nav.docs details {
430 summary {
438 summary {
static/scripts.js+9−1
@@ -384,4 +384,12 @@ window.addEventListener("scroll", event => {
384// }
384// }
385// })
385// })
386//
386//
387−})};
387+})};
388+
389+let docsSelect = document.getElementById('docsSelect');
390+let goTo = function() {
391+ let url = docsSelect.options[docsSelect.selectedIndex].value;
392+ document.location.assign(url);
393+}
394+
395+docsSelect.addEventListener('change', goTo);
templates/partials/navigation-docs.html+31−1
@@ -64,7 +64,37 @@
64 <span class="gray3"> / </span>
64 <span class="gray3"> / </span>
65 <a href="{{config.base_url}}/docs/">
65 <a href="{{config.base_url}}/docs/">
66 Documentation
66 Documentation
67− </a>
67+ </a>
68+ <select class="mw4" id="docsSelect">
69+ <option>⌄</option>
70+ {% set index = get_section(path="docs/_index.md") %}
71+ {% for s in index.subsections %}
72+ {% set subsection = get_section(path=s) %}
73+ <option>{{ subsection.title }}</option>
74+ {% if subsection.pages %}
75+ {% for page in subsection.pages %}
76+ <option value="{{ page.permalink }}">{{ page.title }}</option>
77+ {% endfor %}
78+ {% for y in subsection.subsections %}
79+ {% set subsubsection = get_section(path=y) %}
80+ {% if subsubsection.pages %}
81+ {% for page in subsubsection.pages %}
82+ <option value="{{ page.permalink }}">{{ page.title }}</option>
83+ {% endfor %}
84+ {% for x in subsubsection.subsections %}
85+ {% set subsubsubsection = get_section(path=x) %}
86+ <option>{{ subsubsubsection.title }}</option>
87+ {% if subsubsubsection.pages %}
88+ {% for page in subsubsubsection.pages %}
89+ <option value="{{ page.permalink }}">{{ page.title }}</option>
90+ {% endfor %}
91+ {% endif %}
92+ {% endfor %}
93+ {% endif %}
94+ {% endfor %}
95+ {% endif %}
96+ {% endfor %}
97+ </select>
68 <button id="js-search-window-toggle" class="mt4 mb4" type="button" style="outline:none">
98 <button id="js-search-window-toggle" class="mt4 mb4" type="button" style="outline:none">
69 <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
99 <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
70 </button>
100 </button>