Skip to content

Fix #1177: Usability problem with sidebar on mobile devices #1182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+24 −6
Open

Fix #1177: Usability problem with sidebar on mobile devices #1182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
56fe085
Mobile Menu - Added close btn & made 100% width
nienn Aug 3, 2021
6296159
Add compiled css files
nienn Aug 3, 2021
282d970
Adds aria-label and extra btn padding
nienn Aug 3, 2021
268a893
Fix build
nienn Aug 3, 2021
16f6569
Adds aria-label to the hamburger btn too
nienn Aug 3, 2021
7dc4522
Update sphinx_rtd_theme/layout.html
nienn Aug 4, 2021
e344c58
Added translations to aria labels
nienn Aug 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion sphinx_rtd_theme/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,12 @@

{%- block navigation %}
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="{{ _('Main') }}">

{#- MOBILE NAV, TRIGGLES SIDE NAV ON TOGGLE #}
<div class="wy-close-top">
<i aria-label="{{ _('Close side navigation') }}" data-toggle="wy-nav-top" class="fa fa-close"></i>
</div>

{%- block menu %}
{%- set toctree = toctree(maxdepth=theme_navigation_depth|int,
collapse=theme_collapse_navigation|tobool,
Expand All @@ -192,7 +198,7 @@
{#- MOBILE NAV, TRIGGLES SIDE NAV ON TOGGLE #}
<nav class="wy-nav-top" aria-label="{{ _('Top') }}" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
{%- block mobile_nav %}
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<i aria-label="{{ _('Open side navigation') }}" data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="{{ pathto(master_doc) }}">{{ project }}</a>
{%- endblock %}
</nav>
Expand Down
2 changes: 1 addition & 1 deletion sphinx_rtd_theme/static/css/badge_only.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion sphinx_rtd_theme/static/css/theme.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/sass/_theme_badge.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@

+media($tablet)
.rst-versions
width: 85%
width: 100%
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100% width on the menu and content is way better 👍

display: none
&.shift
display: block
16 changes: 14 additions & 2 deletions src/sass/_theme_layout.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,18 @@ html
cursor: pointer
padding-top: inherit

.wy-close-top
display: none
margin: (-($gutter / 2)) 0 (-($base-line-height / 2))
text-align: right
i
font-size: 25px
line-height: 1
padding: $gutter / 2 20px 4px 8px
cursor: pointer
&:hover
color: #fff

.wy-nav-content-wrap
margin-left: $nav-desktop-width
background: $section-background-color
Expand Down Expand Up @@ -384,15 +396,15 @@ footer
+media($tablet)
.wy-body-for-nav
background: $section-background-color
.wy-nav-top
.wy-nav-top, .wy-close-top
display: block
.wy-nav-side
@if $nav-desktop-position == left
left: -$nav-desktop-width
@else
right: -$nav-desktop-width
&.shift
width: 85%
width: 100%
left: 0
.wy-side-scroll
width: auto
Expand Down