[matrix] Refactor JS & add searchbar to mobile.
This commit is contained in:
		
							
								
								
									
										31
									
								
								docs/_templates/layout.html
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										31
									
								
								docs/_templates/layout.html
									
									
									
									
										vendored
									
									
								
							@@ -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>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user