Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 203b40a

Browse files
obulatobulat
committed
Address code review issues
- Remove unnecessary `show` call for searchbox. - Remove `box-sizing:border-box` for all elements. - Add `aria-label` to search input instead of visually-hiding labels for accessibility - Some style fixes
1 parent 7aba474 commit 203b40a

File tree

4 files changed

+63
-56
lines changed

4 files changed

+63
-56
lines changed

‎python_docs_theme/layout.html

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,14 @@
1212
{%- macro searchbox() %}
1313
{# modified from sphinx/themes/basic/searchbox.html #}
1414
{%- if builder != "htmlhelp" %}
15-
<div class="inline-search" style="display: none" role="search">
15+
<div class="inline-search" role="search">
1616
<form class="inline-search" action="{{ pathto('search') }}" method="get">
17-
<input placeholder="{{ _('Quick search') }}" type="text" name="q" />
17+
<input placeholder="{{ _('Quick search') }}" aria-label="{{ _('Quick search') }}" type="text" name="q" />
1818
<input type="submit" value="{{ _('Go') }}" />
1919
<input type="hidden" name="check_keywords" value="yes" />
2020
<input type="hidden" name="area" value="default" />
2121
</form>
2222
</div>
23-
<script type="text/javascript">document.querySelector('.inline-search').style.display = 'block';</script>
2423
{%- endif %}
2524
{%- endmacro %}
2625

@@ -54,29 +53,28 @@
5453
{%- block body_tag %}
5554
<body>
5655
<nav class="mobile-nav">
57-
<input type="checkbox" class="toggler">
58-
<div class="hamburger">
59-
<div></div>
60-
</div>
61-
<div class="nav-content">
56+
<button class="toggler" aria-expanded="false" aria-label="{{ _('Menu') }}" aria-controls="navigation">
57+
<span class="hamburger">
58+
<span></span>
59+
</span>
60+
</button>
61+
<div class="nav-content" role="navigation">
6262
<img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt="Logo"/>
6363
{%- if switchers is defined %}
6464
<div class="version_switcher_placeholder">{{ release }}</div>
6565
{% endif -%}
6666
{%- if pagename != "search" and builder != "singlehtml" %}
67-
<div id="searchbox" style="display: none" role="search">
67+
<div id="searchbox" role="search">
6868
<form class="search" action="{{ pathto('search') }}" method="get">
69-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"
69+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
7070
class="search-icon">
7171
<path fill-rule="nonzero"
7272
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>
7373
</svg>
74-
<label id="mobilesearchlabel" for="searchbox">{{ _('Quick search') }}</label>
75-
<input type="text" name="q" aria-labelledby="searchlabel"/>
74+
<input type="text" name="q" aria-label="{{ _('Quick search') }}"/>
7675
<input type="submit" value="{{ _('Go') }}"/>
7776
</form>
7877
</div>
79-
<script>document.getElementById('searchbox').style.display='block';</script>
8078
{%- endif %}
8179
</div>
8280
</nav>

‎python_docs_theme/static/menu.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,33 @@ document.addEventListener('DOMContentLoaded', function () {
33
const toggler = document.querySelector('.toggler');
44
const sideMenu = document.querySelector('.menu-wrapper');
55
const doc = document.querySelector('.document');
6+
67
function closeMenu() {
78
sideMenu.classList.remove('open');
8-
toggler.checked = false;
9+
toggler.classList.remove('active');
10+
toggler.setAttribute("aria-expanded", 'false');
11+
}
12+
function isMenuOpen(){
13+
return (' ' + sideMenu.className + ' ').indexOf(' open ') > -1;
914
}
10-
toggler.addEventListener('change', function (e) {
11-
if (toggler.checked) {
15+
16+
sideMenu.addEventListener('click', function (event) {
17+
// Close menu only if a link on the sideMenu is clicked
18+
let target = event.target;
19+
if (target.tagName !== 'a') return;
20+
closeMenu();
21+
})
22+
toggler.addEventListener('click', function (e) {
23+
if (!isMenuOpen()) {
1224
sideMenu.classList.add('open');
25+
toggler.classList.add('active');
26+
toggler.setAttribute("aria-expanded", 'true');
1327
} else {
1428
closeMenu();
1529
}
1630
});
1731
doc.addEventListener('click', function () {
18-
if (toggler.checked) {
32+
if (isMenuOpen()) {
1933
closeMenu();
2034
}
2135
})

‎python_docs_theme/static/pydoctheme.css

Lines changed: 32 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
@import url("default.css");
22

3-
* {
4-
box-sizing: border-box;
5-
}
6-
73
body {
84
background-color: white;
95
margin-left: 1em;
@@ -233,7 +229,7 @@ dl > dt span ~ em {
233229
display: block;
234230
padding: 0 1rem;
235231
height: 40px;
236-
width: 100%;
232+
width: calc(100% - 2rem);
237233
position: fixed;
238234
top: 0;
239235
left: 0;
@@ -258,16 +254,14 @@ dl > dt span ~ em {
258254
height: 24px;
259255
}
260256
.nav-content #searchbox {
261-
flex: 5 1 auto;
257+
flex: 1 1 auto;
262258
}
263259
.nav-content .search {
264260
display: flex;
265-
flex-direction: row;
266261
align-items: center;
267-
box-sizing: border-box;
268262
padding: 0 0 0 2px;
269263
border: 1px solid #a9a9a9;
270-
height: 24px;
264+
height: 30px;
271265
}
272266
.nav-content .search:hover {
273267
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
@@ -278,24 +272,15 @@ dl > dt span ~ em {
278272
outline: 0;
279273
box-shadow: none;
280274
width: 40px;
281-
height: 100%;
275+
height: 28px;
282276
flex: 1 1 auto;
283277
}
284278
.nav-content .search input[type=submit] {
285279
height: 100%;
286280
border: 0;
287281
box-shadow: none;
288282
outline: 1px solid #999;
289-
}
290-
.nav-content .search label {
291-
border: 0;
292-
clip: rect(0 0 0 0);
293-
height: 1px;
294-
margin: -1px;
295-
overflow: hidden;
296-
padding: 0;
297-
position: absolute !important;
298-
width: 1px;
283+
cursor: pointer;
299284
}
300285
.nav-content .search svg {
301286
flex: 0 0 20px;
@@ -309,51 +294,61 @@ dl > dt span ~ em {
309294
cursor: pointer;
310295
top: 0;
311296
left: 0;
312-
opacity: 0;
313297
z-index: 5;
298+
background-color: transparent;
299+
border: 1px solid white;
300+
box-shadow:none
301+
}
302+
.toggler:focus {
303+
background-color: #eee;
304+
border: 1px solid #ededed;
305+
box-shadow: rgba(0, 0, 0, 0.25) 1px 0 2px 0;
314306
}
315307
.hamburger {
308+
box-sizing: border-box;
316309
position: absolute;
317-
top: 0;
318-
left: 0;
319-
width: 56px;
320-
height: 40px;
321-
padding: 0.5rem 1rem;
310+
top: -1px;
311+
left: -1px;
322312
display: flex;
323313
align-items: center;
324314
justify-content: center;
315+
width: 40px;
316+
height: 40px;
317+
padding: 0 8px;
325318
}
326-
.hamburger > div {
319+
.hamburger > span {
327320
position: relative;
328321
flex: none;
329322
height: 2px;
330323
width: 100%;
331324
background: black;
332325
transition: all 400ms ease;
333326
}
334-
.hamburger > div::before,
335-
.hamburger > div::after {
327+
.hamburger > span::before,
328+
.hamburger > span::after {
336329
content: '';
337330
height: 2px;
338331
width: 100%;
339332
background: inherit;
340333
position: absolute;
341-
top: -7px;
334+
left:0;
335+
top: -8px;
342336
}
343-
.hamburger > div::after {
344-
top: 7px;
337+
.hamburger > span::after {
338+
top: 8px;
345339
}
346-
.toggler:checked ~ .hamburger div {
340+
341+
.toggler.active > .hamburger span {
347342
transform: rotate(135deg);
348343
}
349-
.toggler:checked ~ .hamburger div::before {
344+
.toggler.active > .hamburger span::before {
350345
transform: rotate(90deg);
351346
}
352-
.toggler:checked ~ .hamburger div::before,
353-
.toggler:checked ~ .hamburger div::after {
347+
.toggler.active > .hamburger span::before,
348+
.toggler.active > .hamburger span::after {
354349
top: 0;
355350
}
356-
.toggler:checked:hover ~ .hamburger div {
351+
.toggler.active:hover > .hamburger span {
357352
transform: rotate(315deg);
358353
}
359354

‎python_docs_theme/theme.conf

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ stylesheet = pydoctheme.css
44
pygments_style = sphinx
55

66
[options]
7-
bodyfont = 'SourceSansProRegular','Lucida Grande', Arial, sans-serif
8-
headfont = 'SourceSansProRegular','Lucida Grande', Arial, sans-serif
7+
bodyfont = 'Lucida Grande', Arial, sans-serif
8+
headfont = 'Lucida Grande', Arial, sans-serif
99
footerbgcolor = white
1010
footertextcolor = #555555
1111
relbarbgcolor = white

0 commit comments

Comments
 (0)