Make the theme responsive - #46
Conversation
septatrix
left a comment
There was a problem hiding this comment.
Overall a great idea and I would also really like a responsive theme though there seem to be some unrelated changes and implementation details which should be discussed
| document.addEventListener('DOMContentLoaded', function () { | ||
| const toggler = document.querySelector('.toggler'); | ||
| const sideMenu = document.querySelector('.menu-wrapper'); | ||
| const doc = document.querySelector('.document'); | ||
| function closeMenu() { | ||
| sideMenu.classList.remove('open'); | ||
| toggler.checked = false; | ||
| } | ||
| toggler.addEventListener('change', function (e) { | ||
| if (toggler.checked) { | ||
| sideMenu.classList.add('open'); | ||
| } else { | ||
| closeMenu(); | ||
| } | ||
| }); | ||
| doc.addEventListener('click', function () { | ||
| if (toggler.checked) { | ||
| closeMenu(); | ||
| } | ||
| }) | ||
| }) No newline at end of file |
There was a problem hiding this comment.
By moving the checkbox up in the dom tree it may be possible to implement this using only javascript and make it more accessible for people without javascript
There was a problem hiding this comment.
I replaced the checkbox with a button. Is this better for people without javascript?
There was a problem hiding this comment.
What I would have done is move the input as a checkbox directly next to the sidebar, reference it in the label via id and apply the styles based on whether the checkbox is checked or not. I may have time tomorrow to create a PR on your fork repo if you want to.
There was a problem hiding this comment.
I have done it like this at first (checkbox input and applying styles based on :checked property). Then I was checking for accessibility and found this article which shows that a button as menu opener has some advantages regarding accessibility: namely, it is easier to set up keyboard handling. On the other hand, I just realized that people probably don't use keyboard for navigation on mobile, and it is more important to set up No-script solution than keyboard navigation on mobile.
Also, I looked at other documentation sites: readthedocs theme and VueJS docs, and their hamburger menu doesn't work without javascript.
There was a problem hiding this comment.
In addition if you follow this guide you also get a working css only solution with added accesibility using javascript
|
Thank you for your review, @septatrix ! I would also like to have your feedback on the content for the mobile version. For example, the top navbar on mobile: Do you think logo, version switcher and searchbox are what should be there, or do we need to add/ remove something? Also, the relbar is completely removed, but I thought that it might be a good idea to add it at the bottom, without the searchbox, though. |
- 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
I have been reading on my phone a lot lately, and was disappointed by the fact that I couldn't read python docs: the fonts are too small, and, if I try to zoom in, the text doesn't fit on the page, so I have to swipe to see the whole line.
This is my attempt to add responsiveness to python docs theme, fixing #30.
On screen widths smaller than 900 px, it:
adds a mobile navigation bar with a 'hamburger' menu button, Python version switcher and a search box.
adds a sliding menu that opens when 'hamburger' menu button is clicked. Menu contains language switching input and contents.
removes the
relatedbarsremoves the sidebar.
Screenshot with menu closed:
Screenshot with menu open:
Problems that need to be solved:
Normally, the mobile navigation bar should be placed in the
headerblock of the layout, but python.org layout completely overrides it, so I added it in the body_tag block. To solve this, I would need to add changes to that code.I placed the switchers and other items on the menus as seemed logical to me, but feedback from the community is essential on this.
I added a javascript file to open/close sidebar in a separate file. I could also add it into the layout file, but ideally all js files should be combined and minified.