diff options
| author | Yong He <yonghe@outlook.com> | 2021-04-26 11:03:20 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-26 11:03:20 -0700 |
| commit | b5b2cdab8743fd12f95b4ea1054aff2c9235c6c1 (patch) | |
| tree | 89ca3faca7a9751410689bae2505d2f5e65923b1 /docs/_layouts | |
| parent | 11b4459876917d3ed505ea3823eefae5d80e397e (diff) | |
Improve user guide layout for narrow viewports (#1820)
Diffstat (limited to 'docs/_layouts')
| -rw-r--r-- | docs/_layouts/user-guide.html | 53 |
1 files changed, 52 insertions, 1 deletions
diff --git a/docs/_layouts/user-guide.html b/docs/_layouts/user-guide.html index b3eba9404..33f987140 100644 --- a/docs/_layouts/user-guide.html +++ b/docs/_layouts/user-guide.html @@ -23,6 +23,7 @@ overflow-y: auto; box-sizing: border-box; max-height: 100vh; + display: block; } #tocInner { @@ -74,11 +75,52 @@ { color: #303080 } + #btnToggleTOC { + display: none; + width: fit-content; + margin-left: 10px; + margin-top: 10px; + padding: 10px; + border-style: solid; + border-color: #808080; + border-width: 1px; + } + @media screen and (max-width: 850px) { + #tocColumn { + width: 300px; + display: block; + } + #centeringDiv { + padding-left: 300px; + } + } + + @media screen and (max-width: 700px) { + #tocColumn { + width: 100%; + position: static; + display: none; + } + #tocInner { + padding: 10px; + } + #rightColumn { + padding-left: 10px; + padding-right: 10px; + } + #centeringDiv { + padding-left: 0px; + } + #btnToggleTOC { + display: block; + } + } </style> {% seo %} </head> <body> + <button id="btnToggleTOC" onclick="toggleTOC()">Table of Contents</button> <div id="tocColumn"> <div id="tocInner"> {% include_relative user-guide-toc.html %} @@ -105,6 +147,8 @@ function updatePosition() { tocColumn.style.left = (rightColumn.getBoundingClientRect().x - tocColumn.getBoundingClientRect().width) + "px"; + if (window.innerWidth > 700) + tocColumn.style.display = ""; } window.addEventListener("resize", updatePosition); updatePosition(); @@ -113,7 +157,14 @@ <script> var tocItemsArray = []; var selectedItem = null; - + function toggleTOC() { + var tocColumn = document.getElementById("tocColumn"); + if (tocColumn.style.display == "block") + tocColumn.style.display = "none"; + else + tocColumn.style.display = "block"; + event.stopPropagation(); + } function expandItem(e) { if (e == selectedItem) e.style["font-weight"] = "bold"; |