Skip to content

Commit 3bf3806

Browse files
septatrixseptatrix
committed
Fix more bugs with the new mobile view
1 parent dd57722 commit 3bf3806

5 files changed

Lines changed: 89 additions & 86 deletions

File tree

‎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-
<li class="right"><input type="button" value="Toggle theme" class="theme-toggle" onclick="toggleTheme()">{{ reldelim2 }}</li>
40+
<li class="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+
<label class="theme-selector-label">
62+
{{ _('Color theme') }}
63+
<select class="theme-selector" oninput="activateTheme(this.value)">
64+
<option value="auto" selected>{{ _('Auto (default)') }}</option>
65+
<option value="light">{{ _('Light theme') }}</option>
66+
<option value="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
<div class="mobile-nav">
8596
<input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"
8697
aria-pressed="false" aria-expanded="false" role="button" aria-label="{{ _('Menu')}}" />
87-
<label for="menuToggler" class="toggler__label">
88-
<span></span>
89-
</label>
9098
<nav class="nav-content" role="navigation">
91-
<a href="{{ theme_root_url }}" class="nav-logo">
92-
<img src="{{ pathto('_static/py.svg', 1) }}" alt="Logo"/>
93-
</a>
94-
<div class="version_switcher_placeholder"></div>
95-
{%- if pagename != "search" and builder != "singlehtml" %}
96-
<form role="search" class="search" action="{{ pathto('search') }}" method="get">
97-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
98-
<path fill-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-
<input type="text" name="q" aria-label="{{ _('Quick search') }}"/>
102-
<input type="submit" value="{{ _('Go') }}"/>
103-
</form>
104-
{%- endif %}
99+
<label for="menuToggler" class="toggler__label">
100+
<span></span>
101+
</label>
102+
<span class="nav-items-wrapper">
103+
<a href="{{ theme_root_url }}" class="nav-logo">
104+
<img src="{{ pathto('_static/py.svg', 1) }}" alt="Logo"/>
105+
</a>
106+
<span class="version_switcher_placeholder"></span>
107+
{%- if pagename != "search" and builder != "singlehtml" %}
108+
<form id="searchbox" role="search" class="search" action="{{ pathto('search') }}" method="get">
109+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
110+
<path fill-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+
<input type="search" name="q" aria-label="{{ _('Quick search') }}"/>
113+
<input type="submit" value="{{ _('Go') }}"/>
114+
{# TODO missing hidden inputs #}
115+
</form>
116+
{%- endif %}
117+
</span>
105118
</nav>
106119
<div class="menu-wrapper">
107120
<nav class="menu" role="navigation" aria-label="main navigation">
108121
<div class="language_switcher_placeholder"></div>
122+
{{ themeselector() }}
109123
{%- if logo %}
110124
<p class="logo">
111125
<a href="{{ 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) 0 0 2px 0;
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: 0 1rem 0 45px;
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: 0 0 auto;
334+
flex: auto;
335+
padding: .5rem;
336+
}
337+
.nav-logo {
338+
margin-right: 1rem;
339+
flex-shrink: 0;
336340
}
337341
.nav-content img {
342+
display: block;
338343
width: 20px;
339-
height: auto;
340344
}
341345
.version_switcher_placeholder {
342-
flex: 0 1 0;
343346
margin-right: 1rem;
344347
}
348+
.version_switcher_placeholder > select {
349+
height: 100%;
350+
}
345351
.nav-content .search {
346352
display: flex;
347-
flex: 1 1 auto;
348-
align-items: center;
349-
padding: 0 0 0 2px;
353+
flex: auto;
350354
border: 1px solid #a9a9a9;
351-
height: 30px;
352-
overflow: hidden;
353355
}
354356
.nav-content .search:hover {
355357
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
356358
border-color: rgba(223,225,229,0);
357359
}
358-
.nav-content .search input[type=text] {
360+
.nav-content .search input[type=search] {
359361
border: 0;
360362
outline: 0;
361-
box-shadow: none;
362-
width: 40px;
363-
height: 28px;
364-
flex: 1 1 auto;
363+
padding-left: 20px;
364+
flex: 1;
365365
}
366366
.nav-content .search input[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 .search svg {
381-
flex: 0 0 20px;
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: 0 8px;
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__label span {
428+
.toggler__input:checked ~ nav > .toggler__label span {
442429
transform: rotate(135deg);
443430
}
444-
.toggler__input:checked ~ .toggler__label span::before {
431+
.toggler__input:checked ~ nav > .toggler__label span::before {
445432
transform: rotate(90deg);
446433
}
447-
.toggler__input:checked ~ .toggler__label span::before,
448-
.toggler__input:checked ~ .toggler__label span::after {
434+
.toggler__input:checked ~ nav > .toggler__label span::before,
435+
.toggler__input:checked ~ nav > .toggler__label span::after {
449436
top: 0;
450437
}
451-
.toggler__input:checked:hover ~ .toggler__label span {
438+
.toggler__input:checked:hover ~ nav > .toggler__label span {
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) 0 0 2px 0;
118+
}
119+
120+
.nav-content {
121+
background-color: black;
122+
}
123+
124+
.nav-content .search svg {
125+
color: black;
118126
}

‎python_docs_theme/static/themetoggle.js‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,24 @@
1-
let currentTheme = localStorage.getItem('currentTheme') || 'auto'
2-
3-
const pygmentsDark = document.getElementById('pygments_dark_css')
41
const pydocthemeDark = document.getElementById('pydoctheme_dark_css')
2+
const pygmentsDark = document.getElementById('pygments_dark_css')
3+
const themeSelectors = document.getElementsByClassName('theme-selector')
54

6-
const themeOrder = {
7-
light: 'dark',
8-
dark: 'auto',
9-
auto: 'light',
10-
}
11-
12-
updateTheme()
13-
14-
function toggleTheme() {
15-
currentTheme = themeOrder[currentTheme]
16-
localStorage.setItem('currentTheme', currentTheme)
17-
updateTheme()
18-
}
19-
20-
function updateTheme() {
21-
const buttons = Array.from(document.getElementsByClassName('theme-toggle'))
22-
switch (currentTheme) {
5+
function activateTheme(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)