Skip to content

Commit 8449732

Browse files
obulatobulat
authored
Make the theme responsive (#46)
1 parent 6892a23 commit 8449732

File tree

6 files changed

+470
-28
lines changed

6 files changed

+470
-28
lines changed

‎python_docs_theme/layout.html

+98-23
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,121 @@
11
{% extends "classic/layout.html" %}
22

3-
{% block rootrellink %}
4-
<li><img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt=""
5-
style="vertical-align: middle; margin-top: -1px"/></li>
6-
<li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
7-
{% if theme_root_include_title %}
8-
<a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
9-
{% endif %}
10-
{% endblock %}
3+
{%- macro relbar() %}
4+
{# modified from sphinx/themes/basic/layout.html #}
5+
<div class="related" role="navigation" aria-label="related navigation">
6+
<h3>{{ _('Navigation') }}</h3>
7+
<ul>
8+
{%- for rellink in rellinks %}
9+
<li class="right" {% if loop.first %}style="margin-right: 10px"{% endif %}>
10+
<a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
11+
{{ accesskey(rellink[2]) }}>{{ rellink[3] }}
12+
</a>
13+
{%- if not loop.first %}{{ reldelim2 }}{% endif %}
14+
</li>
15+
{%- endfor %}
16+
{%- block rootrellink %}
17+
<li><img src="{{ pathto('_static/py.svg', 1) }}" alt="python logo" style="vertical-align: middle; margin-top: -1px"/></li>
18+
<li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
19+
<li class="switchers">
20+
<div class="language_switcher_placeholder"></div>
21+
<div class="version_switcher_placeholder"></div>
22+
</li>
23+
<li>
24+
{% if theme_root_include_title %}
25+
<a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
26+
{% endif %}
27+
</li>
28+
{%- endblock %}
29+
{%- for parent in parents %}
30+
<li class="nav-item nav-item-{{ loop.index }}"><a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a>{{ reldelim1 }}</li>
31+
{%- endfor %}
32+
<li class="nav-item nav-item-this"><a href="{{ link|e }}">{{ title }}</a></li>
33+
{% block relbaritems %}
34+
{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
35+
<li class="right">
36+
{{ searchbox() }}
37+
{{ reldelim2 }}
38+
</li>
39+
{%- endif %}
40+
{% endblock %}
41+
</ul>
42+
</div>
43+
{%- endmacro %}
1144

1245
{%- macro searchbox() %}
1346
{# modified from sphinx/themes/basic/searchbox.html #}
1447
{%- if builder != "htmlhelp" %}
15-
<div class="inline-search" style="display: none" role="search">
48+
<div class="inline-search" role="search">
1649
<form class="inline-search" action="{{ pathto('search') }}" method="get">
17-
<input placeholder="{{ _('Quick search') }}" type="text" name="q" />
50+
<input placeholder="{{ _('Quick search') }}" aria-label="{{ _('Quick search') }}" type="text" name="q" />
1851
<input type="submit" value="{{ _('Go') }}" />
1952
<input type="hidden" name="check_keywords" value="yes" />
2053
<input type="hidden" name="area" value="default" />
2154
</form>
2255
</div>
23-
<script type="text/javascript">$('.inline-search').show(0);</script>
2456
{%- endif %}
2557
{%- endmacro %}
2658

2759
{% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
2860
{% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
29-
{% block relbaritems %}
30-
{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
31-
<li class="right">
32-
{{ searchbox() }}
33-
{{ reldelim2 }}
34-
</li>
35-
{%- endif %}
36-
{% endblock %}
3761

38-
{% block extrahead %}
62+
63+
{%- block extrahead -%}
3964
<link rel="shortcut icon" type="image/png" href="{{ pathto('_static/' + theme_root_icon, 1) }}" />
40-
{% if builder != "htmlhelp" %}
41-
{% if not embedded %}<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>{% endif %}
42-
{% endif %}
65+
{%- if builder != "htmlhelp" %}
66+
{%- if not embedded %}
67+
<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
68+
<script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
69+
{%- endif -%}
70+
{%- endif -%}
71+
{{ super() }}
72+
{%- endblock -%}
73+
74+
{%- block css -%}
75+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4376
{{ super() }}
77+
{%- endblock -%}
78+
79+
{%- block body_tag %}
80+
{{ super() }}
81+
<div class="mobile-nav">
82+
<input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"
83+
aria-pressed="false" aria-expanded="false" role="button" aria-label="{{ _('Menu')}}" />
84+
<label for="menuToggler" class="toggler__label">
85+
<span></span>
86+
</label>
87+
<nav class="nav-content" role="navigation">
88+
<a href="{{ theme_root_url }}" class="nav-logo">
89+
<img src="{{ pathto('_static/py.svg', 1) }}" alt="Logo"/>
90+
</a>
91+
<div class="version_switcher_placeholder"></div>
92+
{%- if pagename != "search" and builder != "singlehtml" %}
93+
<form id="searchbox" role="search" class="search" action="{{ pathto('search') }}" method="get">
94+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
95+
<path fill-rule="nonzero"
96+
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>
97+
</svg>
98+
<input type="text" name="q" aria-label="{{ _('Quick search') }}"/>
99+
<input type="submit" value="{{ _('Go') }}"/>
100+
</form>
101+
{%- endif %}
102+
</nav>
103+
<div class="menu-wrapper">
104+
<nav class="menu" role="navigation" aria-label="main navigation">
105+
<div class="language_switcher_placeholder"></div>
106+
{%- if logo %}
107+
<p class="logo">
108+
<a href="{{ pathto('index') }}">
109+
<img class="logo" src="{{ pathto('_static/' + logo, 1)|e }}" alt="Logo"/>
110+
</a>
111+
</p>
112+
{%- endif %}
113+
{%- for sidebartemplate in sidebars %}
114+
{%- include sidebartemplate %}
115+
{%- endfor %}
116+
</nav>
117+
</div>
118+
</div>
44119
{% endblock %}
45120

46121
{% block footer %}

‎python_docs_theme/static/caret-down.svg

+1
Loading

‎python_docs_theme/static/menu.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
3+
// Make tables responsive by wrapping them in a div and making them scrollable
4+
const tables = document.querySelectorAll('table.docutils');
5+
tables.forEach(function(table){
6+
table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + '</div>'
7+
});
8+
9+
const togglerInput = document.querySelector('.toggler__input');
10+
const togglerLabel = document.querySelector('.toggler__label');
11+
const sideMenu = document.querySelector('.menu-wrapper');
12+
const menuItems = document.querySelectorAll('.menu')
13+
const doc = document.querySelector('.document');
14+
const body = document.querySelector('body');
15+
16+
function closeMenu() {
17+
togglerInput.checked = false;
18+
sideMenu.setAttribute("aria-expanded", 'false');
19+
sideMenu.setAttribute('aria-hidden', 'true');
20+
togglerLabel.setAttribute('aria-pressed', 'false');
21+
body.style.overflow = 'visible';
22+
}
23+
function openMenu() {
24+
togglerInput.checked = true;
25+
sideMenu.setAttribute("aria-expanded", 'true');
26+
sideMenu.setAttribute('aria-hidden', 'false');
27+
togglerLabel.setAttribute('aria-pressed', 'true');
28+
body.style.overflow = 'hidden';
29+
}
30+
31+
// Close menu when link on the sideMenu is clicked
32+
sideMenu.addEventListener('click', function (event) {
33+
let target = event.target;
34+
if (target.tagName.toLowerCase() !== 'a') return;
35+
closeMenu();
36+
})
37+
// Add accessibility data when sideMenu is opened/closed
38+
togglerInput.addEventListener('change', function (e) {
39+
togglerInput.checked ? openMenu() : closeMenu();
40+
});
41+
// Make sideMenu links tabbable only when visible
42+
for(let menuItem of menuItems) {
43+
if(togglerInput.checked) {
44+
menuItem.setAttribute('tabindex', '0');
45+
} else {
46+
menuItem.setAttribute('tabindex', '-1');
47+
}
48+
}
49+
// Close sideMenu when document body is clicked
50+
doc.addEventListener('click', function () {
51+
if (togglerInput.checked) {
52+
closeMenu();
53+
}
54+
})
55+
})

‎python_docs_theme/static/py.svg

+14
Loading

0 commit comments

Comments
 (0)