[matrix] Refactor JS & add searchbar to mobile.

This commit is contained in:
Josh
2020-08-30 09:17:44 +10:00
committed by Rapptz
parent 18cfc4a4a5
commit c2e5b734ad
7 changed files with 332 additions and 229 deletions

View File

@ -62,14 +62,25 @@
<a href="https://github.com/Rapptz/discord.py" title="GitHub"><span class="material-icons custom-icons">github</span></a>
<a href="{{ discord_invite }}" title="{{ _('Discord') }}"><span class="material-icons custom-icons">discord</span></a>
<a href="{{ pathto('faq') }}" title="FAQ"><span class="material-icons">help_center</span></a>
<a href="{{ pathto('search') }}" title="{{ _('Search') }}" class='mobile-only'><span class="material-icons">search</span></a>
{#- If we have more links we can put them here #}
<a onclick="mobileSearch.open();" title="{{ _('Search') }}" id="open-search" class="mobile-only"><span class="material-icons">search</span></a>
<a onclick="mobileSearch.close();" title="{{ _('Close') }}" id="close-search" class="mobile-only" hidden><span class="material-icons">close</span></a>
</nav>
<nav class="mobile-only">
<form role="search" class="search" action="search.html" method="get">
<div class="search-wrapper">
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
<button type="submit">
<span class="material-icons">search</span>
</button>
</div>
</form>
</nav>
</header>
{#- The sub-header with search and extension related selection #}
<div class="sub-header grid-item">
<label for="documentation_select">{{ _('View Documentation For') }}</label>
<select id="documentation_select" onchange="changeDocumentation(this)">
<select id="documentation_select" onchange="window.location = this.value;">
{%- if pagename is prefixedwith 'ext/' %}
<option value="{{ pathto(master_doc)|e }}">discord</option>
{%- else %}
@ -80,21 +91,21 @@
{%- endfor %}
</select>
<form role="search" class="search" action="search.html" method="get">
<div class="searchwrapper">
<div class="search-wrapper">
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
<button type="submit">
<span class="material-icons">search</span>
</button>
</div>
</form>
<a accesskey="S" class="settings" onclick="openModal(settingsModal);"><span class="material-icons">settings</span></a>
<a accesskey="S" class="settings" onclick="settingsModal.open();"><span class="material-icons">settings</span></a>
</div>
{#- The sidebar component #}
<aside class="grid-item">
<span id="hamburger-toggle">
<span class="material-icons">menu</span>
</span>
<span id="settings-toggle" class="settings" onclick="openModal(settingsModal);">
<span id="settings-toggle" class="settings" onclick="settingsModal.open();">
<span class="material-icons">settings</span>
</span>
<div id="sidebar">
@ -125,7 +136,7 @@
</div>
{%- if READTHEDOCS %}
<script>
if (typeof READTHEDOCS_DATA !== 'undefined') {
if (typeof READTHEDOCS_DATA !== "undefined") {
if (!READTHEDOCS_DATA.features) {
READTHEDOCS_DATA.features = {};
}
@ -134,15 +145,15 @@
</script>
{%- endif %}
<div id="settings" class="modal" onclick="if (event.target == this){ closeModal(settingsModal); }" hidden>
<div id="settings" class="modal" onclick="if (event.target == this){ settingsModal.close(); }" hidden>
<div class="modal-content">
<span class="close" onclick="closeModal(settingsModal);" title="Close">
<span class="close" onclick="settingsModal.close();" title="Close">
<span class="material-icons">close</span>
</span>
<h1>Settings</h1>
<h2>Font</h2>
<div class='setting'>
<div class="setting">
<h3>Use a serif font:
<label class="toggle"
title="Use a serif font? Your system font will be used, falling back to serif.">
@ -153,7 +164,7 @@
</div>
<h2>Theme</h2>
<div class='setting'>
<div class="setting">
<h3>
<label class="toggle" title="Set your theme">
<input type="radio" name="setTheme" onclick="updateSetting(this);" value="automatic" checked>