matthew/enhanced-discord.py
1
0
Fork 0
Code Issues 4 Pull Requests 21 Projects Releases Wiki Activity

Rewrite the DOM to use CSS grids

Browse Source 
This also rewrites the CSS to use CSS variables. Currently this isn't
done to codeblocks however.
This commit is contained in:
Rapptz
2020-05-27 23:27:15 -04:00
parent 0a8b87cae7
commit 4e9fdc6e4f
3 changed files with 519 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/_static/custom.js vendored
View File

@@ -4,6 +4,8 @@ let activeModal = null;
let activeLink = null; let activeLink = null;
let bottomHeightThreshold, sections; let bottomHeightThreshold, sections;
let settingsModal; let settingsModal;
let hamburgerToggle;
let sidebar;
function closeModal(modal) { function closeModal(modal) {
activeModal = null; activeModal = null;
@@ -41,7 +43,35 @@ document.addEventListener('DOMContentLoaded', () => {
bottomHeightThreshold = document.documentElement.scrollHeight - 30; bottomHeightThreshold = document.documentElement.scrollHeight - 30;
sections = document.querySelectorAll('div.section'); sections = document.querySelectorAll('div.section');
settingsModal = document.querySelector('div#settings.modal') settingsModal = document.querySelector('div#settings.modal');
hamburgerToggle = document.getElementById("hamburger-toggle");
sidebar = document.getElementById("sidebar");
sidebar.addEventListener("click", (e) => {
// If we click a navigation, close the hamburger menu
if (e.target.tagName == "A" && sidebar.classList.contains("sidebar-toggle")) {
sidebar.classList.remove("sidebar-toggle");
let button = hamburgerToggle.firstElementChild;
button.classList.remove("fa-times");
button.classList.add("fa-bars");
// Scroll a little up to actually see the header
// Note: this is generally around ~55px
// A proper solution is getComputedStyle but it can be slow
// Instead let's just rely on this quirk and call it a day
// This has to be done after the browser actually processes
// the section movement
setTimeout(() => window.scrollBy(0, -100), 75);
}
})
hamburgerToggle.addEventListener("click", (e) => {
sidebar.classList.toggle("sidebar-toggle");
let button = hamburgerToggle.firstElementChild;
const isHamburger = button.classList.contains("fa-bars");
button.classList.toggle("fa-bars", !isHamburger);
button.classList.toggle("fa-times", isHamburger);
});
const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]'); const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]');
tables.forEach(table => { tables.forEach(table => {

745
docs/_static/style.css vendored
View File

File diff suppressed because it is too large Load Diff

166
docs/_templates/layout.html vendored
View File

@@ -1,59 +1,118 @@
{%- extends "basic/layout.html" %} <!DOCTYPE html>
<html>
{% set show_source = False %} <head>
{% set style = 'style.css' %} <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- block extrahead %} <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
{{ super() }} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="{{ pathto('_static/style.css', 1)|e }}" type="text/css" />
{% endblock %} <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}" type="text/css" />
{%- block css %}
{%- block relbar2 %}{% endblock %} {%- for css in css_files %}
{%- if css|attr("filename") %}
{%- block rootrellink %} {{ css_tag(css) }}
{# Perhaps override the relbar() macro to place this on the right side of the link list? #} {%- else %}
<li class="right"{% if not rellinks %} style="margin-right: 10px"{% endif %}> <link rel="stylesheet" href="{{ pathto(css, 1)|e }}" type="text/css" />
<a title="settings" accesskey="S" onclick="openModal(settingsModal);">settings</a>{{ reldelim2 }}</li> {%- endif %}
{{ super() }} {%- endfor %}
{% endblock %} {%- endblock %}
{%- block scripts %}
{% block header %} <script id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script>
{{ super() }} {%- for js in script_files %}
{% if pagename == 'index' %} {{ js_tag(js) }}
<div class="indexwrapper"> {%- endfor %}
{% endif %} {%- endblock %}
{% endblock %} {%- if pageurl %}
<link rel="canonical" href="{{ pageurl|e }}" />
{%- block content %} {%- endif %}
<div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settingsModal); }"> {%- if favicon %}
<div class="modal-content"> <link rel="shortcut icon" href="{{ pathto('_static/' + favicon, 1)|e }}"/>
<span class="close" onclick="closeModal(settingsModal);" title="Close">&times;</span> {%- endif %}
<h1>Settings</h1> {%- block linktags %}
{%- if hasdoc('about') %}
<div class='setting'> <link rel="author" title="{{ _('About these documents') }}" href="{{ pathto('about') }}" />
<h3>Use a sans-serif font: {%- endif %}
<label class="toggle" title="Use a sans serif font? Your system font will be used, falling back to `sans-serif`."> {%- if hasdoc('genindex') %}
<input type="checkbox" name="useSansFont" onclick="updateSetting(this);"> <link rel="index" title="{{ _('Index') }}" href="{{ pathto('genindex') }}" />
<span class="toggle-slider"></span> {%- endif %}
</label> {%- if hasdoc('search') %}
</h3> <link rel="search" title="{{ _('Search') }}" href="{{ pathto('search') }}" />
{%- endif %}
{%- if hasdoc('copyright') %}
<link rel="copyright" title="{{ _('Copyright') }}" href="{{ pathto('copyright') }}" />
{%- endif %}
{%- if next %}
<link rel="next" title="{{ next.title|striptags|e }}" href="{{ next.link|e }}" />
{%- endif %}
{%- if prev %}
<link rel="prev" title="{{ prev.title|striptags|e }}" href="{{ prev.link|e }}" />
{%- endif %}
{%- endblock %}
{%- block extrahead %} {% endblock %}
</head>
<body>
{%- block header %}{% endblock %}
<div class="main-grid">
{#- The relative links component #}
<header class="grid-item">
<nav>
{%- for rellink in rellinks %}
<a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
{{ accesskey(rellink[2]) }}>{{ rellink[3] }}</a> |
{%- endfor %}
<a title="settings" accesskey="S" onclick="openModal(settingsModal);">settings</a>
{#- No breadcrumbs. But if they're gonna appear they'll be here #}
</nav>
</header>
{#- The sidebar component #}
<aside class="grid-item">
<div id="hamburger-toggle">
<i class="fa fa-bars"></i>
</div> </div>
<div id="sidebar">
{#- This is manually unrolled from the original layout #}
{%- include "localtoc.html" %}
{%- include "searchbox.html" %}
</div>
</aside>
{#- The actual body of the contents #}
<main class="grid-item">
<div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settingsModal); }">
<div class="modal-content">
<span class="close" onclick="closeModal(settingsModal);" title="Close">&times;</span>
<h1>Settings</h1>
</div> <div class='setting'>
</div> <h3>Use a sans-serif font:
{{ super() }} <label class="toggle" title="Use a sans serif font? Your system font will be used, falling back to `sans-serif`.">
{% endblock %} <input type="checkbox" name="useSansFont" onclick="updateSetting(this);">
<span class="toggle-slider"></span>
</label>
</h3>
</div>
</div>
</div>
{% block body %} {% endblock %}
</main>
{%- block footer %} {%- block footer %}
<div class="footer"> <footer class="grid-item">
&copy; Copyright {{ copyright }}. {%- if show_copyright %}
{% trans sphinx_version=sphinx_version|e %}Created using <a href="http://sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %} {%- if hasdoc('copyright') %}
{% trans path=pathto('copyright'), copyright=copyright|e %}&#169; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
{%- else %}
{% trans copyright=copyright|e %}&#169; Copyright {{ copyright }}.{% endtrans %}
{%- endif %}
{%- endif %}
{%- if last_updated %}
{% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}
{%- endif %}
{%- if show_sphinx %}
{% trans sphinx_version=sphinx_version|e %}Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}
{%- endif %}
</footer>
{%- endblock %}
</div> </div>
{% if pagename == 'index' %}
</div>
{% endif %}
{%- if READTHEDOCS %} {%- if READTHEDOCS %}
<script> <script>
if (typeof READTHEDOCS_DATA !== 'undefined') { if (typeof READTHEDOCS_DATA !== 'undefined') {
@@ -62,6 +121,7 @@
} }
READTHEDOCS_DATA.features.docsearch_disabled = true; READTHEDOCS_DATA.features.docsearch_disabled = true;
} }
</script> </script>
{%- endif %} {%- endif %}
{%- endblock %} </body>
</html>