Use css for opening/closing menu

obulat · obulat · commit 10f43495dc8b · 2020-07-13T00:02:22.000+03:00
- Menu is opened/closed using only css (invisible checkbox), works without js enabled
- Accessibility added using javascript
diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html
@@ -34,35 +34,33 @@
     {%- 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 %}
+    {%- 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 %}
+        {%- endif -%}
+    {%- endif -%}
     {{ super() }}
-{% endblock %}
+{%- endblock -%}
 
-{%- block css %}
+{%- block css -%}
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {{ super() }}
-{%- endblock %}
+{%- endblock -%}
 
 {%- block body_tag %}
-    <body>
-    <nav class="mobile-nav">
-        <button class="toggler" aria-expanded="false" aria-label="{{ _('Menu') }}" aria-controls="navigation">
-            <span class="hamburger">
-                <span></span>
-            </span>
-        </button>
-        <div class="nav-content" role="navigation">
+    {{ super() }}
+    <div class="mobile-nav">
+        <input type="checkbox" id="menuToggler" class="toggler__input"
+                aria-controls="navigation" aria-pressed="false" aria-expanded="false" />
+        <label for="menuToggler" class="toggler__label" role="button" aria-label="{{ _('Menu')}}">
+            <span></span>
+        </label>
+        <nav class="nav-content" role="navigation">
             <img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt="Logo"/>
-            {%- if switchers is defined %}
             <div class="version_switcher_placeholder">{{ release }}</div>
-            {% endif -%}
             {%- if pagename != "search" and builder != "singlehtml" %}
                 <div id="searchbox" role="search">
                     <form class="search" action="{{ pathto('search') }}" method="get">
@@ -76,28 +74,20 @@
                     </form>
                 </div>
             {%- endif %}
-        </div>
-    </nav>
-{% endblock %}
-
-{% block sidebar1 %}
-    <div class="menu-wrapper">
-        <nav class="menu" role="navigation" aria-label="main navigation">
-            {%- if switchers is defined %}
-            <div class="language_switcher_placeholder">{{ language or 'en' }}</div>
-            {% endif -%}
-            {%- block sidebarlogo %}
+        </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 %}
-            {%- endblock %}
-            {#- new style sidebar: explicitly include/exclude templates #}
-            {%- for sidebartemplate in sidebars %}
-                {%- include sidebartemplate %}
-            {%- endfor %}
-        </nav>
+                {%- for sidebartemplate in sidebars %}
+                    {%- include sidebartemplate %}
+                {%- endfor %}
+            </nav>
+        </div>
     </div>
 {% endblock %}
 
diff --git a/python_docs_theme/static/menu.js b/python_docs_theme/static/menu.js
@@ -1,35 +1,54 @@
-
 document.addEventListener('DOMContentLoaded', function () {
-    const toggler = document.querySelector('.toggler');
+
+    // 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() {
-        sideMenu.classList.remove('open');
-        toggler.classList.remove('active');
-        toggler.setAttribute("aria-expanded", 'false');
+        togglerInput.checked = false;
+        sideMenu.setAttribute("aria-expanded", 'false');
+        sideMenu.setAttribute('aria-hidden', 'true');
+        togglerLabel.setAttribute('aria-pressed', 'false');
+        body.style.overflow = 'visible';
     }
-    function isMenuOpen(){
-        return (' ' + sideMenu.className + ' ').indexOf(' open ') > -1;
+    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) {
-        // Close menu only if a link on the sideMenu is clicked
         let target = event.target;
-        if (target.tagName !== 'a') return;
+        if (target.tagName.toLowerCase() !== 'a') return;
         closeMenu();
     })
-    toggler.addEventListener('click', function (e) {
-        if (!isMenuOpen()) {
-            sideMenu.classList.add('open');
-            toggler.classList.add('active');
-            toggler.setAttribute("aria-expanded", 'true');
+    // 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 {
-            closeMenu();
+          menuItem.setAttribute('tabindex', '-1');
         }
-    });
+    }
+    // Close sideMenu when document body is clicked
     doc.addEventListener('click', function () {
-        if (isMenuOpen()) {
+        if (togglerInput.checked) {
             closeMenu();
         }
     })
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
@@ -14,17 +14,17 @@ body {
 div.related {
     margin-bottom: 1.2em;
     padding: 0.5em 0;
-    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
     margin-top: 0.5em;
 }
 
 div.related a:hover {
     color: #0095C4;
 }
 
-div.related:first-of-type {
-    border-top: 0;
-    border-bottom: 1px solid #ccc;
+div.related ~ div.related {
+    border-top: 1px solid #ccc;
+    border-bottom: none;
 }
 
 .inline-search {
@@ -197,7 +197,7 @@ dl > dt span ~ em {
     font-family: monospace, sans-serif;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1023px) {
     /* Body layout */
     div.body {
         min-width: 100%;
@@ -224,30 +224,44 @@ dl > dt span ~ em {
     div.related, .sphinxsidebar {
         display: none;
     }
+    /* Anchorlinks are not hidden by fixed-positioned navbar when scrolled to */
+    html {
+        scroll-padding-top: 40px;
+    }
+
     /* Top navigation bar */
     .mobile-nav {
         display: block;
-        padding: 0 1rem;
         height: 40px;
-        width: calc(100% - 2rem);
+        width: 100%;
         position: fixed;
         top: 0;
         left: 0;
         background-color: white;
         box-shadow: rgba(0, 0, 0, 0.25) 0 0 2px 0;
-        z-index: 5;
+        z-index: 1;
+    }
+    .mobile-nav * {
+        box-sizing: border-box;
     }
     .nav-content {
-        padding-left: 40px;
+        position: absolute;
+        z-index: 2;
+        left: 0;
+        top: 0;
         height: 40px;
+        width: 100%;
+        padding: 0 1rem 0 50px;
         display: flex;
         align-items: center;
+        background-color: white;
     }
     .nav-content img {
         flex: 0 0 auto;
         margin-right: 0.7rem;
     }
     .version_switcher_placeholder {
+        flex: 0 1 0;
         margin-right: 1rem;
     }
     .version_switcher_placeholder select {
@@ -286,46 +300,52 @@ dl > dt span ~ em {
         flex: 0 0 20px;
         fill: #333;
     }
-    .toggler {
+    .toggler__input {
+        width: 40px;
+        height: 40px;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        z-index: 3;
+        margin: 0;
+    }
+    .toggler__label {
         width: 40px;
         height: 40px;
         margin: 0;
         position: absolute;
         cursor: pointer;
         top: 0;
         left: 0;
-        z-index: 5;
         background-color: transparent;
         border: 1px solid white;
-        box-shadow:none
+        box-shadow:none;
+        z-index: 3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 8px;
     }
-    .toggler:focus {
+    .toggler__label:focus {
         background-color: #eee;
         border: 1px solid #ededed;
         box-shadow: rgba(0, 0, 0, 0.25) 1px 0 2px 0;
     }
-    .hamburger {
-        box-sizing: border-box;
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        padding: 0 8px;
+    .toggler__label:hover {
+        background-color: #eee;
+        border: 1px solid #ededed;
+        box-shadow: rgba(0, 0, 0, 0.25) 1px 0 2px 0;
     }
-    .hamburger > span {
+    .toggler__label > span {
         position: relative;
         flex: none;
         height: 2px;
         width: 100%;
         background: black;
         transition: all 400ms ease;
     }
-    .hamburger > span::before,
-    .hamburger > span::after {
+    .toggler__label > span::before,
+    .toggler__label > span::after {
         content: '';
         height: 2px;
         width: 100%;
@@ -334,34 +354,36 @@ dl > dt span ~ em {
         left:0;
         top: -8px;
     }
-    .hamburger > span::after {
+    .toggler__label > span::after {
         top: 8px;
     }
-
-    .toggler.active > .hamburger span {
+    .toggler__input:checked ~ .toggler__label span {
         transform: rotate(135deg);
     }
-    .toggler.active > .hamburger span::before {
+    .toggler__input:checked ~ .toggler__label span::before {
         transform: rotate(90deg);
     }
-    .toggler.active > .hamburger span::before,
-    .toggler.active > .hamburger span::after {
+    .toggler__input:checked ~ .toggler__label span::before,
+    .toggler__input:checked ~ .toggler__label span::after {
         top: 0;
     }
-    .toggler.active:hover > .hamburger span {
+    .toggler__input:checked:hover ~ .toggler__label span {
         transform: rotate(315deg);
     }
+    .toggler__input:checked ~ .menu-wrapper {
+        visibility: visible;
+        left:0;
+    }
 
     /* Sliding side menu */
     .menu-wrapper {
         display: block;
         position: fixed;
         top: 0;
-        z-index: 1;
+        transition: left 400ms ease;
         left: -310px;
         width: 300px;
         height: 100%;
-        transition: all 400ms ease;
         background-color: #eee;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
         overflow-y: auto;
@@ -419,4 +441,9 @@ dl > dt span ~ em {
         position: relative;
         z-index: 0;
     }
+    /*Responsive tables*/
+    .responsive-table__container {
+        width: 100%;
+        overflow-x: auto;
+    }
 }
