From b5b2cdab8743fd12f95b4ea1054aff2c9235c6c1 Mon Sep 17 00:00:00 2001 From: Yong He Date: Mon, 26 Apr 2021 11:03:20 -0700 Subject: Improve user guide layout for narrow viewports (#1820) --- docs/_layouts/user-guide.html | 53 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) (limited to 'docs/_layouts') 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; + } + } {% seo %} +

{% 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 @@