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

Commit3bf3806

Browse files
committed
Fix more bugs with the new mobile view
1 parentdd57722 commit3bf3806

File tree

5 files changed

+89
-86
lines changed

5 files changed

+89
-86
lines changed

‎python_docs_theme/layout.html

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h3>{{ _('Navigation') }}</h3>
3737
{{ reldelim2 }}
3838
</li>
3939
{%- endif %}
40-
<liclass="right"><inputtype="button"value="Toggle theme"class="theme-toggle"onclick="toggleTheme()">{{ reldelim2 }}</li>
40+
<liclass="right">{{ themeselector() }}{{ reldelim2 }}</li>
4141
{% endblock %}
4242
</ul>
4343
</div>
@@ -57,6 +57,17 @@ <h3>{{ _('Navigation') }}</h3>
5757
{%- endif %}
5858
{%- endmacro %}
5959

60+
{%- macro themeselector() %}
61+
<labelclass="theme-selector-label">
62+
{{ _('Color theme') }}
63+
<selectclass="theme-selector"oninput="activateTheme(this.value)">
64+
<optionvalue="auto"selected>{{ _('Auto (default)') }}</option>
65+
<optionvalue="light">{{ _('Light theme') }}</option>
66+
<optionvalue="dark">{{ _('Dark theme') }}</option>
67+
</select>
68+
</label>
69+
{%- endmacro %}
70+
6071
{% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
6172
{% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
6273

@@ -84,28 +95,31 @@ <h3>{{ _('Navigation') }}</h3>
8495
<divclass="mobile-nav">
8596
<inputtype="checkbox"id="menuToggler"class="toggler__input"aria-controls="navigation"
8697
aria-pressed="false"aria-expanded="false"role="button"aria-label="{{ _('Menu')}}"/>
87-
<labelfor="menuToggler"class="toggler__label">
88-
<span></span>
89-
</label>
9098
<navclass="nav-content"role="navigation">
91-
<ahref="{{ theme_root_url }}"class="nav-logo">
92-
<imgsrc="{{ pathto('_static/py.svg', 1) }}"alt="Logo"/>
93-
</a>
94-
<divclass="version_switcher_placeholder"></div>
95-
{%- if pagename != "search" and builder != "singlehtml" %}
96-
<formrole="search"class="search"action="{{ pathto('search') }}"method="get">
97-
<svgxmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 24 24"class="search-icon">
98-
<pathfill-rule="nonzero"
99-
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>
100-
</svg>
101-
<inputtype="text"name="q"aria-label="{{ _('Quick search') }}"/>
102-
<inputtype="submit"value="{{ _('Go') }}"/>
103-
</form>
104-
{%- endif %}
99+
<labelfor="menuToggler"class="toggler__label">
100+
<span></span>
101+
</label>
102+
<spanclass="nav-items-wrapper">
103+
<ahref="{{ theme_root_url }}"class="nav-logo">
104+
<imgsrc="{{ pathto('_static/py.svg', 1) }}"alt="Logo"/>
105+
</a>
106+
<spanclass="version_switcher_placeholder"></span>
107+
{%- if pagename != "search" and builder != "singlehtml" %}
108+
<formid="searchbox"role="search"class="search"action="{{ pathto('search') }}"method="get">
109+
<svgxmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 24 24"class="search-icon">
110+
<pathfill-rule="nonzero"fill="currentColor"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"></path>
111+
</svg>
112+
<inputtype="search"name="q"aria-label="{{ _('Quick search') }}"/>
113+
<inputtype="submit"value="{{ _('Go') }}"/>
114+
{# TODO missing hidden inputs #}
115+
</form>
116+
{%- endif %}
117+
</span>
105118
</nav>
106119
<divclass="menu-wrapper">
107120
<navclass="menu"role="navigation"aria-label="main navigation">
108121
<divclass="language_switcher_placeholder"></div>
122+
{{ themeselector() }}
109123
{%- if logo %}
110124
<pclass="logo">
111125
<ahref="{{ pathto('index') }}">

‎python_docs_theme/static/caret-down.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎python_docs_theme/static/pydoctheme.css

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,10 @@ dl > dt span ~ em {
264264
padding-left:20px;
265265
}
266266

267+
.theme-selector {
268+
margin-left:.5em;
269+
}
270+
267271
@media (max-width:1023px) {
268272
/* Body layout */
269273
div.body {
@@ -309,7 +313,6 @@ dl > dt span ~ em {
309313
position: fixed;
310314
top:0;
311315
left:0;
312-
background-color: white;
313316
box-shadow:rgba(0,0,0,0.25)002px0;
314317
z-index:1;
315318
}
@@ -318,58 +321,55 @@ dl > dt span ~ em {
318321
}
319322
.nav-content {
320323
position: absolute;
321-
z-index:2;
322-
left:0;
323-
top:0;
324+
z-index:1;
324325
height:40px;
325326
width:100%;
326327
max-width:100vw;
327328
padding:01rem045px;
328329
display: flex;
329-
align-items: center;
330330
background-color: white;
331331
}
332-
.nav-logo {
333-
margin-right:0.7rem;
332+
.nav-items-wrapper {
334333
display: flex;
335-
flex:00 auto;
334+
flex: auto;
335+
padding:.5rem;
336+
}
337+
.nav-logo {
338+
margin-right:1rem;
339+
flex-shrink:0;
336340
}
337341
.nav-contentimg {
342+
display: block;
338343
width:20px;
339-
height: auto;
340344
}
341345
.version_switcher_placeholder {
342-
flex:010;
343346
margin-right:1rem;
344347
}
348+
.version_switcher_placeholder>select {
349+
height:100%;
350+
}
345351
.nav-content .search {
346352
display: flex;
347-
flex:11 auto;
348-
align-items: center;
349-
padding:0002px;
353+
flex: auto;
350354
border:1px solid#a9a9a9;
351-
height:30px;
352-
overflow: hidden;
353355
}
354356
.nav-content .search:hover {
355357
box-shadow:01px6px0rgba(32,33,36,0.28);
356358
border-color:rgba(223,225,229,0);
357359
}
358-
.nav-content .searchinput[type=text] {
360+
.nav-content .searchinput[type=search] {
359361
border:0;
360362
outline:0;
361-
box-shadow: none;
362-
width:40px;
363-
height:28px;
364-
flex:11 auto;
363+
padding-left:20px;
364+
flex:1;
365365
}
366366
.nav-content .searchinput[type=submit] {
367367
height:100%;
368368
appearance: none;
369369
-webkit-appearance: none;
370-
border:1px solid transparent;
371-
border-left-color:#a9a9a9;
372370
box-shadow: none;
371+
border:0;
372+
outline:1px solid#999;
373373
cursor: pointer;
374374
background-color:#f0f0f0;
375375
margin-right:0;
@@ -378,34 +378,21 @@ dl > dt span ~ em {
378378
border-color:#a9a9a9;
379379
}
380380
.nav-content .searchsvg {
381-
flex:0020px;
382-
fill:#333;
381+
position: absolute;
383382
}
384383
.toggler__input {
385-
width:40px;
386-
height:40px;
387-
left:0;
388-
opacity:0;
389-
position: absolute;
390-
z-index:3;
391-
margin:0;
384+
display: none;
392385
}
393386
.toggler__label {
394387
width:40px;
395-
height:40px;
396-
margin:0;
397-
position: absolute;
398388
cursor: pointer;
399-
top:0;
400-
left:0;
401389
background-color: transparent;
402390
border:1px solid white;
403-
box-shadow: none;
404-
z-index:3;
405391
display: flex;
406392
align-items: center;
407393
justify-content: center;
408-
padding:08px;
394+
padding:8px;
395+
flex-shrink:0;
409396
}
410397
.toggler__label:focus {
411398
background-color:#eee;
@@ -438,17 +425,17 @@ dl > dt span ~ em {
438425
.toggler__label>span::after {
439426
top:8px;
440427
}
441-
.toggler__input:checked~ .toggler__labelspan {
428+
.toggler__input:checked~nav>.toggler__labelspan {
442429
transform:rotate(135deg);
443430
}
444-
.toggler__input:checked~ .toggler__labelspan::before {
431+
.toggler__input:checked~nav>.toggler__labelspan::before {
445432
transform:rotate(90deg);
446433
}
447-
.toggler__input:checked~ .toggler__labelspan::before,
448-
.toggler__input:checked~ .toggler__labelspan::after {
434+
.toggler__input:checked~nav>.toggler__labelspan::before,
435+
.toggler__input:checked~nav>.toggler__labelspan::after {
449436
top:0;
450437
}
451-
.toggler__input:checked:hover~ .toggler__labelspan {
438+
.toggler__input:checked:hover~nav>.toggler__labelspan {
452439
transform:rotate(315deg);
453440
}
454441
.toggler__input:checked~ .menu-wrapper {
@@ -554,4 +541,14 @@ dl > dt span ~ em {
554541
width:100%;
555542
overflow-x: auto;
556543
}
544+
545+
.menu .theme-selector-label {
546+
margin-top:.5em;
547+
display: flex;
548+
width:100%;
549+
}
550+
551+
.menu .theme-selector {
552+
flex: auto;
553+
}
557554
}

‎python_docs_theme/static/pydoctheme_dark.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,4 +115,12 @@ div.note {
115115

116116
.mobile-nav {
117117
box-shadow:rgba(255,255,255,0.25)002px0;
118+
}
119+
120+
.nav-content {
121+
background-color: black;
122+
}
123+
124+
.nav-content .searchsvg {
125+
color: black;
118126
}
Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,24 @@
1-
letcurrentTheme=localStorage.getItem('currentTheme')||'auto'
2-
3-
constpygmentsDark=document.getElementById('pygments_dark_css')
41
constpydocthemeDark=document.getElementById('pydoctheme_dark_css')
2+
constpygmentsDark=document.getElementById('pygments_dark_css')
3+
constthemeSelectors=document.getElementsByClassName('theme-selector')
54

6-
constthemeOrder={
7-
light:'dark',
8-
dark:'auto',
9-
auto:'light',
10-
}
11-
12-
updateTheme()
13-
14-
functiontoggleTheme(){
15-
currentTheme=themeOrder[currentTheme]
16-
localStorage.setItem('currentTheme',currentTheme)
17-
updateTheme()
18-
}
19-
20-
functionupdateTheme(){
21-
constbuttons=Array.from(document.getElementsByClassName('theme-toggle'))
22-
switch(currentTheme){
5+
functionactivateTheme(theme){
6+
localStorage.setItem('currentTheme',theme);
7+
[...themeSelectors].forEach(e=>e.value=theme)
8+
switch(theme){
239
case'light':
2410
pydocthemeDark.media='not all'
2511
pygmentsDark.media='not all'
26-
buttons.forEach(e=>e.value="Toggle theme (light)")
2712
break;
2813
case'dark':
2914
pydocthemeDark.media='all'
3015
pygmentsDark.media='all'
31-
buttons.forEach(e=>e.value="Toggle theme (dark)")
3216
break;
3317
default:
3418
// auto
3519
pydocthemeDark.media='(prefers-color-scheme: dark)'
3620
pygmentsDark.media='(prefers-color-scheme: dark)'
37-
buttons.forEach(e=>e.value="Toggle theme (auto)")
3821
}
3922
}
23+
24+
activateTheme(localStorage.getItem('currentTheme')||'auto')

0 commit comments

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