[matrix] Refactor JS & add searchbar to mobile.

1 files changed, 21 insertions, 10 deletions

diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index c05866ce..f2f3f377 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -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>