Skip to content

Make the theme responsive #46

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

Merged
merged 24 commits into from
May 7, 2021
Merged

Make the theme responsive #46

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
7aba474
Make theme responsive
obulat May 19, 2020
203b40a
Address code review issues
obulat Jun 19, 2020
10f4349
Use css for opening/closing menu
obulat Jul 9, 2020
ff61d60
Adjust font and selects
obulat Dec 21, 2020
7640739
Add language and version switcher placeholders
obulat Dec 25, 2020
ecf73cf
Remove duplicate rootrellink declaration
obulat Mar 9, 2021
43da2b4
Remove dublicate relbaritems block
obulat Apr 13, 2021
51a0c7a
Update select styles
obulat Apr 13, 2021
efd1ec2
Add missing select styles
obulat Apr 13, 2021
7953f1b
Change the search icon color
obulat Apr 13, 2021
6daa876
Change caret color
obulat Apr 13, 2021
250dbf6
Change hamburger color
obulat Apr 13, 2021
5ffa114
Add an svg icon
obulat Apr 13, 2021
e1ee8bd
Add svg logo to layout
obulat Apr 13, 2021
1e182f3
Merge remote-tracking branch 'upstream/master'
obulat May 2, 2021
611a1dc
Add switchers to desktop view
obulat May 2, 2021
783b19a
Fix toggler accessibility and select paddings
obulat May 2, 2021
d31371e
Fix html formatting
obulat May 2, 2021
190931b
Add link to homepage in mobile version
obulat May 5, 2021
b6fc448
Add smaller padding to toctree
obulat May 5, 2021
cd92c8c
Add a different link to the logo
obulat May 5, 2021
ed7b948
Make logo in mobile version link to 'http://0.0.0.0:8000/3.9/'
obulat May 5, 2021
d96713e
Make logo in mobile version link to 'http://0.0.0.0:8000/3.9/'
obulat May 5, 2021
bd1d802
Make logo in mobile version link to theme root
obulat May 5, 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
122 changes: 99 additions & 23 deletions python_docs_theme/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,122 @@
{% extends "classic/layout.html" %}

{% block rootrellink %}
<li><img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt=""
style="vertical-align: middle; margin-top: -1px"/></li>
<li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
{% if theme_root_include_title %}
<a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
{% endif %}
{% endblock %}
{%- macro relbar() %}
{# modified from sphinx/themes/basic/layout.html #}
<div class="related" role="navigation" aria-label="related navigation">
<h3>{{ _('Navigation') }}</h3>
<ul>
{%- for rellink in rellinks %}
<li class="right" {% if loop.first %}style="margin-right: 10px"{% endif %}>
<a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
{{ accesskey(rellink[2]) }}>{{ rellink[3] }}
</a>
{%- if not loop.first %}{{ reldelim2 }}{% endif %}
</li>
{%- endfor %}
{%- block rootrellink %}
<li><img src="{{ pathto('_static/py.svg', 1) }}" alt="python logo" style="vertical-align: middle; margin-top: -1px"/></li>
<li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
<li class="switchers">
<div class="language_switcher_placeholder"></div>
<div class="version_switcher_placeholder"></div>
</li>
<li>
{% if theme_root_include_title %}
<a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
{% endif %}
</li>
{%- endblock %}
{%- for parent in parents %}
<li class="nav-item nav-item-{{ loop.index }}"><a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a>{{ reldelim1 }}</li>
{%- endfor %}
<li class="nav-item nav-item-this"><a href="{{ link|e }}">{{ title }}</a></li>
{% block relbaritems %}
{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
<li class="right">
{{ searchbox() }}
{{ reldelim2 }}
</li>
{%- endif %}
{% endblock %}
</ul>
</div>
{%- endmacro %}

{%- macro searchbox() %}
{# modified from sphinx/themes/basic/searchbox.html #}
{%- if builder != "htmlhelp" %}
<div class="inline-search" style="display: none" role="search">
<div class="inline-search" role="search">
<form class="inline-search" action="{{ pathto('search') }}" method="get">
<input placeholder="{{ _('Quick search') }}" type="text" name="q" />
<input placeholder="{{ _('Quick search') }}" aria-label="{{ _('Quick search') }}" type="text" name="q" />
<input type="submit" value="{{ _('Go') }}" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
<script type="text/javascript">$('.inline-search').show(0);</script>
{%- endif %}
{%- endmacro %}

{% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
{% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
{% block relbaritems %}
{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
<li class="right">
{{ searchbox() }}
{{ reldelim2 }}
</li>
{%- endif %}
{% endblock %}

{% block extrahead %}

{%- block extrahead -%}
<link rel="shortcut icon" type="image/png" href="{{ pathto('_static/' + theme_root_icon, 1) }}" />
{% if builder != "htmlhelp" %}
{% if not embedded %}<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>{% endif %}
{% endif %}
{%- if builder != "htmlhelp" %}
{%- if not embedded %}
<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
<script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
{%- endif -%}
{%- endif -%}
{{ super() }}
{%- endblock -%}

{%- block css -%}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ super() }}
{%- endblock -%}

{%- block body_tag %}
{{ super() }}
<div class="mobile-nav">
<input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"
aria-pressed="false" aria-expanded="false" role="button" aria-label="{{ _('Menu')}}" />
<label for="menuToggler" class="toggler__label">
<span></span>
</label>
<nav class="nav-content" role="navigation">
<a href="{{ pathto('index') }}">
Copy link
Member

Choose a reason for hiding this comment

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

pathto(master_doc) would be more appropriate here?

Copy link
Member

Choose a reason for hiding this comment

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

Or does CPython documentation use contents for the toctree?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you for such a quick review! :) I know what I added doesn't work for sure. Let me try pathto(master_doc).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I need help!
I don't know how to add the correct link to the docs.python.org/3.9/.
In line 88 in layout.html I added <a href="{{ pathto(theme_root_url) }}" , and it creates file:///.../doc-html(3)/3.9/https://www.python.org/.html

Copy link
Member

Choose a reason for hiding this comment

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

Don't wrap it in pathto, just {{ theme_root_url }} is enough.

That should fix it. :)

Copy link
Member

@pradyunsg pradyunsg May 5, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

In other words, that is behaviour I'd expect and I thought that's what you wanted?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I guess I was confusing the two kind of links (to the docs home and the language/framework home). On the sites I used a lot lately (eg Vue.js) the style of the framework home page and the style of the documentation homepage are the same. And it feels like I just go to the documentation home, not the general home, when I click on the logo.

But you are right, now we have the correct behavior, linking to python.org.

We still don't have a way of going to the documentation homepage, docs.python.org/3 from other pages on mobile. Is it necessary to add it, and add it in this PR specifically?

Copy link
Member

@pradyunsg pradyunsg May 5, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

If you want to have a link to the documentation homepage, that'd be {{ pathto(master_doc) }} or {{ pathto("index") }}. No need for a |e on either of them.

Copy link
Member

@pradyunsg pradyunsg May 5, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Honestly, this feels like something we can do in a follow up PR.

I'd really like to push for getting this landed soon, so that we can start moving other things forward without needing to come back and update this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Please, let me know if I need to change anything? I would be happy to get this landed soon, too!

<img src="{{ pathto('_static/' + 'py.svg', 1) }}" alt="Logo"/>
{{ shorttitle }}
</a>
<div class="version_switcher_placeholder"></div>
{%- if pagename != "search" and builder != "singlehtml" %}
<form id="searchbox" role="search" class="search" action="{{ pathto('search') }}" method="get">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
<path fill-rule="nonzero"
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>
</svg>
<input type="text" name="q" aria-label="{{ _('Quick search') }}"/>
<input type="submit" value="{{ _('Go') }}"/>
</form>
{%- endif %}
</nav>
<div class="menu-wrapper">
<nav class="menu" role="navigation" aria-label="main navigation">
<div class="language_switcher_placeholder"></div>
{%- if logo %}
<p class="logo">
<a href="{{ pathto(master_doc)|e }}">
<img class="logo" src="{{ pathto('_static/' + logo, 1)|e }}" alt="Logo"/>
</a>
</p>
{%- endif %}
{%- for sidebartemplate in sidebars %}
{%- include sidebartemplate %}
{%- endfor %}
</nav>
</div>
</div>
{% endblock %}

{% block footer %}
Expand Down
1 change: 1 addition & 0 deletions python_docs_theme/static/caret-down.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions python_docs_theme/static/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
document.addEventListener('DOMContentLoaded', function () {

// Make tables responsive by wrapping them in a div and making them scrollable
const tables = document.querySelectorAll('table.docutils');
tables.forEach(function(table){
table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + '</div>'
});

const togglerInput = document.querySelector('.toggler__input');
const togglerLabel = document.querySelector('.toggler__label');
const sideMenu = document.querySelector('.menu-wrapper');
const menuItems = document.querySelectorAll('.menu')
const doc = document.querySelector('.document');
const body = document.querySelector('body');

function closeMenu() {
togglerInput.checked = false;
sideMenu.setAttribute("aria-expanded", 'false');
sideMenu.setAttribute('aria-hidden', 'true');
togglerLabel.setAttribute('aria-pressed', 'false');
body.style.overflow = 'visible';
}
function openMenu() {
togglerInput.checked = true;
sideMenu.setAttribute("aria-expanded", 'true');
sideMenu.setAttribute('aria-hidden', 'false');
togglerLabel.setAttribute('aria-pressed', 'true');
body.style.overflow = 'hidden';
}

// Close menu when link on the sideMenu is clicked
sideMenu.addEventListener('click', function (event) {
let target = event.target;
if (target.tagName.toLowerCase() !== 'a') return;
closeMenu();
})
// Add accessibility data when sideMenu is opened/closed
togglerInput.addEventListener('change', function (e) {
togglerInput.checked ? openMenu() : closeMenu();
});
// Make sideMenu links tabbable only when visible
for(let menuItem of menuItems) {
if(togglerInput.checked) {
menuItem.setAttribute('tabindex', '0');
} else {
menuItem.setAttribute('tabindex', '-1');
}
}
// Close sideMenu when document body is clicked
doc.addEventListener('click', function () {
if (togglerInput.checked) {
closeMenu();
}
})
})
14 changes: 14 additions & 0 deletions python_docs_theme/static/py.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading