Make the theme responsive

python_docs_theme/layout.html

@@ -1,46 +1,121 @@
 {% extends "classic/layout.html" %}
 
-{% block rootrellink %}
- <li><img src="{{pathto('_static/' + theme_root_icon, 1) }}" alt=""
- style="vertical-align: middle; margin-top: -1px"/></li>
- <li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{reldelim1 }}</li>
-{% if theme_root_include_title %}
- <a href="{{pathto('index') }}">{{shorttitle }}</a>{{reldelim1 }}
-{% endif %}
-{% endblock %}
+{%- macro relbar() %}
+{# modified from sphinx/themes/basic/layout.html #}
+ <div class="related" role="navigation" aria-label="related navigation">
+ <h3>{{_('Navigation') }}</h3>
+ <ul>
+{%- for rellink in rellinks %}
+ <li class="right"{% if loop.first %}style="margin-right: 10px"{% endif %}>
+ <a href="{{pathto(rellink[0])|e }}" title="{{rellink[1]|striptags|e }}"
+{{accesskey(rellink[2]) }}>{{rellink[3] }}
+ </a>
+{%- if not loop.first %}{{reldelim2 }}{% endif %}
+ </li>
+{%- endfor %}
+{%- block rootrellink %}
+ <li><img src="{{pathto('_static/py.svg', 1) }}" alt="python logo" style="vertical-align: middle; margin-top: -1px"/></li>
+ <li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{reldelim1 }}</li>
+ <li class="switchers">
+ <div class="language_switcher_placeholder"></div>
+ <div class="version_switcher_placeholder"></div>
+ </li>
+ <li>
+{% if theme_root_include_title %}
+ <a href="{{pathto('index') }}">{{shorttitle }}</a>{{reldelim1 }}
+{% endif %}
+ </li>
+{%- endblock %}
+{%- for parent in parents %}
+ <li class="nav-item nav-item-{{loop.index }}"><a href="{{parent.link|e }}"{% if loop.last %}{{accesskey("U") }}{% endif %}>{{parent.title }}</a>{{reldelim1 }}</li>
+{%- endfor %}
+ <li class="nav-item nav-item-this"><a href="{{link|e }}">{{title }}</a></li>
+{% block relbaritems %}
+{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
+ <li class="right">
+{{searchbox() }}
+{{reldelim2 }}
+ </li>
+{%- endif %}
+{% endblock %}
+ </ul>
+ </div>
+{%- endmacro %}
 
 {%- macro searchbox() %}
 {# modified from sphinx/themes/basic/searchbox.html #}
 {%- if builder != "htmlhelp" %}
- <div class="inline-search" style="display: none" role="search">
+ <div class="inline-search" role="search">
  <form class="inline-search" action="{{pathto('search') }}" method="get">
- <input placeholder="{{_('Quick search') }}" type="text" name="q" />
+ <input placeholder="{{_('Quick search') }}" aria-label="{{_('Quick search') }}" type="text" name="q" />
  <input type="submit" value="{{_('Go') }}" />
  <input type="hidden" name="check_keywords" value="yes" />
  <input type="hidden" name="area" value="default" />
  </form>
  </div>
- <script type="text/javascript">$('.inline-search').show(0);</script>
 {%- endif %}
 {%- endmacro %}
 
 {% block relbar1 %}{% if builder != 'qthelp' %}{{relbar() }}{% endif %}{% endblock %}
 {% block relbar2 %}{% if builder != 'qthelp' %}{{relbar() }}{% endif %}{% endblock %}
-{% block relbaritems %}
-{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
- <li class="right">
-{{searchbox() }}
-{{reldelim2 }}
- </li>
-{%- endif %}
-{% endblock %}
 
-{% block extrahead %}
+
+{%- block extrahead -%}
  <link rel="shortcut icon" type="image/png" href="{{pathto('_static/' + theme_root_icon, 1) }}" />
-{% if builder != "htmlhelp" %}
-{% if not embedded %}<script type="text/javascript" src="{{pathto('_static/copybutton.js', 1) }}"></script>{% endif %}
-{% endif %}
+{%- if builder != "htmlhelp" %}
+{%- if not embedded %}
+ <script type="text/javascript" src="{{pathto('_static/copybutton.js', 1) }}"></script>
+ <script type="text/javascript" src="{{pathto('_static/menu.js', 1) }}"></script>
+{%- endif -%}
+{%- endif -%}
+{{super() }}
+{%- endblock -%}
+
+{%- block css -%}
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {{super() }}
+{%- endblock -%}
+
+{%- block body_tag %}
+{{super() }}
+<div class="mobile-nav">
+ <input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"
+ aria-pressed="false" aria-expanded="false" role="button" aria-label="{{_('Menu')}}" />
+ <label for="menuToggler" class="toggler__label">
+ <span></span>
+ </label>
+ <nav class="nav-content" role="navigation">
+ <a href="{{theme_root_url }}" class="nav-logo">
+ <img src="{{pathto('_static/py.svg', 1) }}" alt="Logo"/>
+ </a>
+ <div class="version_switcher_placeholder"></div>
+{%- if pagename != "search" and builder != "singlehtml" %}
+ <form id="searchbox" role="search" class="search" action="{{pathto('search') }}" method="get">
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
+ <path fill-rule="nonzero"
+ d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 001.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 00-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 005.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#444"></path>
+ </svg>
+ <input type="text" name="q" aria-label="{{_('Quick search') }}"/>
+ <input type="submit" value="{{_('Go') }}"/>
+ </form>
+{%- endif %}
+ </nav>
+ <div class="menu-wrapper">
+ <nav class="menu" role="navigation" aria-label="main navigation">
+ <div class="language_switcher_placeholder"></div>
+{%- if logo %}
+ <p class="logo">
+ <a href="{{pathto('index') }}">
+ <img class="logo" src="{{pathto('_static/' + logo, 1)|e }}" alt="Logo"/>
+ </a>
+ </p>
+{%- endif %}
+{%- for sidebartemplate in sidebars %}
+{%- include sidebartemplate %}
+{%- endfor %}
+ </nav>
+ </div>
+</div>
 {% endblock %}
 
 {% block footer %}

python_docs_theme/static/menu.js

@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', function (){
+
+ // Make tables responsive by wrapping them in a div and making them scrollable
+ const tables = document.querySelectorAll('table.docutils');
+ tables.forEach(function(table){
+ table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + '</div>'
+ });
+
+ const togglerInput = document.querySelector('.toggler__input');
+ const togglerLabel = document.querySelector('.toggler__label');
+ const sideMenu = document.querySelector('.menu-wrapper');
+ const menuItems = document.querySelectorAll('.menu')
+ const doc = document.querySelector('.document');
+ const body = document.querySelector('body');
+
+ function closeMenu(){
+ togglerInput.checked = false;
+ sideMenu.setAttribute("aria-expanded", 'false');
+ sideMenu.setAttribute('aria-hidden', 'true');
+ togglerLabel.setAttribute('aria-pressed', 'false');
+ body.style.overflow = 'visible'
+ }
+ function openMenu(){
+ togglerInput.checked = true;
+ sideMenu.setAttribute("aria-expanded", 'true');
+ sideMenu.setAttribute('aria-hidden', 'false');
+ togglerLabel.setAttribute('aria-pressed', 'true');
+ body.style.overflow = 'hidden'
+ }
+
+ // Close menu when link on the sideMenu is clicked
+ sideMenu.addEventListener('click', function (event){
+ let target = event.target;
+ if (target.tagName.toLowerCase() !== 'a') return;
+ closeMenu();
+ })
+ // Add accessibility data when sideMenu is opened/closed
+ togglerInput.addEventListener('change', function (e){
+ togglerInput.checked ? openMenu() : closeMenu();
+ });
+ // Make sideMenu links tabbable only when visible
+ for(let menuItem of menuItems){
+ if(togglerInput.checked){
+ menuItem.setAttribute('tabindex', '0');
+ } else{
+ menuItem.setAttribute('tabindex', '-1');
+ }
+ }
+ // Close sideMenu when document body is clicked
+ doc.addEventListener('click', function (){
+ if (togglerInput.checked){
+ closeMenu();
+ }
+ })
+})