diff options
| author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2018-02-18 08:05:15 +0100 |
|---|---|---|
| committer | Michael Bryan <michaelfbryan@gmail.com> | 2018-02-18 15:05:15 +0800 |
| commit | 8a00a004d85b6e126162dabf005a759317c22208 (patch) | |
| tree | 4afe9e1bd49dc29ac76510fbadf735712dbf4e47 | |
| parent | 6af77a7792d669d34369b8abd1385d2a56c63fe1 (diff) | |
Handle some cases when JavaScript is disabled (#614)
* feat(theme/index): Assume the sidebar is initially visible
In case the inline script does not execute, the fallback is to show the sidebar.
* feat(theme/index): Hide sidebar toggle and theme selector buttons when JavaScript is disabled
Makes no sense to show them in this case since they do not work.
| -rw-r--r-- | src/theme/index.hbs | 16 |
1 files changed, 13 insertions, 3 deletions
diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 04fae848..64e1898f 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -1,5 +1,5 @@ <!DOCTYPE HTML> -<html lang="{{ language }}"> +<html lang="{{ language }}" class="sidebar-visible"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> @@ -41,6 +41,14 @@ } </script> + <noscript> + <style type="text/css"> + .javascript-only { + display: none; + } + </style> + </noscript> + </head> <body class="light"> <!-- Work around some values being stored in localStorage wrapped in quotes --> @@ -70,12 +78,14 @@ <!-- Hide / unhide sidebar before it is displayed --> <script type="text/javascript"> + var html = document.querySelector('html'); var sidebar = 'hidden'; if (document.body.clientWidth >= 1080) { try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { } sidebar = sidebar || 'visible'; } - document.querySelector('html').classList.add("sidebar-" + sidebar); + html.classList.remove('sidebar-visible'); + html.classList.add("sidebar-" + sidebar); </script> <nav id="sidebar" class="sidebar" aria-label="Table of contents"> @@ -88,7 +98,7 @@ {{> header}} <div id="menu-bar" class="menu-bar"> <div id="menu-bar-sticky-container"> - <div class="left-buttons"> + <div class="left-buttons javascript-only"> <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar"> <i class="fa fa-bars"></i> </button> |