Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8449732

Browse files
authored
Make the theme responsive (#46)
1 parent6892a23 commit8449732

File tree

6 files changed

+470
-28
lines changed

6 files changed

+470
-28
lines changed

‎python_docs_theme/layout.html

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

3-
{% block rootrellink %}
4-
<li><imgsrc="{{ pathto('_static/' + theme_root_icon, 1) }}"alt=""
5-
style="vertical-align: middle; margin-top: -1px"/></li>
6-
<li><ahref="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
7-
{% if theme_root_include_title %}
8-
<ahref="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
9-
{% endif %}
10-
{% endblock %}
3+
{%- macro relbar() %}
4+
{# modified from sphinx/themes/basic/layout.html #}
5+
<divclass="related"role="navigation"aria-label="related navigation">
6+
<h3>{{ _('Navigation') }}</h3>
7+
<ul>
8+
{%- for rellink in rellinks %}
9+
<liclass="right"{%ifloop.first%}style="margin-right: 10px"{%endif%}>
10+
<ahref="{{ 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><imgsrc="{{ pathto('_static/py.svg', 1) }}"alt="python logo"style="vertical-align: middle; margin-top: -1px"/></li>
18+
<li><ahref="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
19+
<liclass="switchers">
20+
<divclass="language_switcher_placeholder"></div>
21+
<divclass="version_switcher_placeholder"></div>
22+
</li>
23+
<li>
24+
{% if theme_root_include_title %}
25+
<ahref="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
26+
{% endif %}
27+
</li>
28+
{%- endblock %}
29+
{%- for parent in parents %}
30+
<liclass="nav-item nav-item-{{ loop.index }}"><ahref="{{ parent.link|e }}"{%ifloop.last%}{{accesskey("U") }}{% endif %}>{{ parent.title }}</a>{{ reldelim1 }}</li>
31+
{%- endfor %}
32+
<liclass="nav-item nav-item-this"><ahref="{{ link|e }}">{{ title }}</a></li>
33+
{% block relbaritems %}
34+
{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
35+
<liclass="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-
<divclass="inline-search"style="display: none"role="search">
48+
<divclass="inline-search"role="search">
1649
<formclass="inline-search"action="{{ pathto('search') }}"method="get">
17-
<inputplaceholder="{{ _('Quick search') }}"type="text"name="q"/>
50+
<inputplaceholder="{{ _('Quick search') }}"aria-label="{{ _('Quick search') }}"type="text"name="q"/>
1851
<inputtype="submit"value="{{ _('Go') }}"/>
1952
<inputtype="hidden"name="check_keywords"value="yes"/>
2053
<inputtype="hidden"name="area"value="default"/>
2154
</form>
2255
</div>
23-
<scripttype="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-
<liclass="right">
32-
{{ searchbox() }}
33-
{{ reldelim2 }}
34-
</li>
35-
{%- endif %}
36-
{% endblock %}
3761

38-
{% block extrahead %}
62+
63+
{%- block extrahead -%}
3964
<linkrel="shortcut icon"type="image/png"href="{{ pathto('_static/' + theme_root_icon, 1) }}"/>
40-
{% if builder != "htmlhelp" %}
41-
{% if not embedded %}<scripttype="text/javascript"src="{{ pathto('_static/copybutton.js', 1) }}"></script>{% endif %}
42-
{% endif %}
65+
{%- if builder != "htmlhelp" %}
66+
{%- if not embedded %}
67+
<scripttype="text/javascript"src="{{ pathto('_static/copybutton.js', 1) }}"></script>
68+
<scripttype="text/javascript"src="{{ pathto('_static/menu.js', 1) }}"></script>
69+
{%- endif -%}
70+
{%- endif -%}
71+
{{ super() }}
72+
{%- endblock -%}
73+
74+
{%- block css -%}
75+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
4376
{{ super() }}
77+
{%- endblock -%}
78+
79+
{%- block body_tag %}
80+
{{ super() }}
81+
<divclass="mobile-nav">
82+
<inputtype="checkbox"id="menuToggler"class="toggler__input"aria-controls="navigation"
83+
aria-pressed="false"aria-expanded="false"role="button"aria-label="{{ _('Menu')}}"/>
84+
<labelfor="menuToggler"class="toggler__label">
85+
<span></span>
86+
</label>
87+
<navclass="nav-content"role="navigation">
88+
<ahref="{{ theme_root_url }}"class="nav-logo">
89+
<imgsrc="{{ pathto('_static/py.svg', 1) }}"alt="Logo"/>
90+
</a>
91+
<divclass="version_switcher_placeholder"></div>
92+
{%- if pagename != "search" and builder != "singlehtml" %}
93+
<formid="searchbox"role="search"class="search"action="{{ pathto('search') }}"method="get">
94+
<svgxmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 24 24"class="search-icon">
95+
<pathfill-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+
<inputtype="text"name="q"aria-label="{{ _('Quick search') }}"/>
99+
<inputtype="submit"value="{{ _('Go') }}"/>
100+
</form>
101+
{%- endif %}
102+
</nav>
103+
<divclass="menu-wrapper">
104+
<navclass="menu"role="navigation"aria-label="main navigation">
105+
<divclass="language_switcher_placeholder"></div>
106+
{%- if logo %}
107+
<pclass="logo">
108+
<ahref="{{ pathto('index') }}">
109+
<imgclass="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 %}
Lines changed: 1 addition & 0 deletions
Loading

‎python_docs_theme/static/menu.js

Lines changed: 55 additions & 0 deletions
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+
consttables=document.querySelectorAll('table.docutils');
5+
tables.forEach(function(table){
6+
table.outerHTML='<div class="responsive-table__container">'+table.outerHTML+'</div>'
7+
});
8+
9+
consttogglerInput=document.querySelector('.toggler__input');
10+
consttogglerLabel=document.querySelector('.toggler__label');
11+
constsideMenu=document.querySelector('.menu-wrapper');
12+
constmenuItems=document.querySelectorAll('.menu')
13+
constdoc=document.querySelector('.document');
14+
constbody=document.querySelector('body');
15+
16+
functioncloseMenu(){
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+
functionopenMenu(){
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+
lettarget=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(letmenuItemofmenuItems){
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

Lines changed: 14 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp