Add ability to hide/show docs

browserslist · Sep 26, 2023 · 1e86df8 · 1e86df8
1 parent f27206d
commit 1e86df8
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 0 deletions.
diff --git a/client/index.html b/client/index.html
@@ -93,6 +93,9 @@ <h2 class="Interactive_title">Audience coverage: <span data-id="form_total"></sp
           <p class="Versions_item">
             Can I Use <a class="Versions_link" target="_blank" href="https://www.npmjs.com/package/caniuse-lite" data-id="versions_caniuse"></a>
           </p>
+          <p class="Versions_item is-extra">
+            <button class="Versions_link" href="?results" data-id="versions_docs">Hide docs</button>
+          </p>
         </div>
       </div>
     </div>

diff --git a/client/view/Docs/Docs.css b/client/view/Docs/Docs.css
@@ -8,6 +8,10 @@
   @media (width > 740px) {
     padding-top: 0;
   }
+
+  :is(body.without-docs) & {
+    display: none;
+  }
 }
 
 .Docs section {

diff --git a/client/view/Footer/Footer.css b/client/view/Footer/Footer.css
@@ -3,4 +3,8 @@
   width: var(--block-width);
   padding: var(--block-padding);
   padding-top: 0;
+
+  :is(body.without-docs) & {
+    display: none;
+  }
 }
diff --git a/client/view/Interactive/Interactive.css b/client/view/Interactive/Interactive.css
@@ -11,10 +11,15 @@
   @media (width > 740px) {
     position: fixed;
     top: 0;
+
     /* Hide scrollbar */
     right: calc(-1 * (100vw - 100%));
     height: 100vh;
     overflow-y: scroll;
+
+    :is(body.without-docs) & {
+      right: calc(50% - var(--block-width) / 2);
+    }
   }
 }
 

diff --git a/client/view/Intro/Intro.css b/client/view/Intro/Intro.css
@@ -4,6 +4,10 @@
   flex-grow: 1;
   width: var(--block-width);
   padding: var(--block-padding);
+
+  :is(body.without-docs) & {
+    display: none;
+  }
 }
 
 .Intro_header {

diff --git a/client/view/Versions/Versions.css b/client/view/Versions/Versions.css
@@ -12,10 +12,17 @@
   margin: 0;
   font-size: 14px;
   line-height: 20px;
+
+  &.is-extra {
+    margin-left: auto;
+  }
 }
 
 .Versions_link {
   color: currentcolor;
+  text-decoration: underline;
+  background: none;
+  border: none;
 
   &:hover,
   &:focus {

diff --git a/client/view/Versions/Versions.js b/client/view/Versions/Versions.js
@@ -1,6 +1,7 @@
 let updated = document.querySelector('[data-id=versions_updated]')
 let browserslist = document.querySelector('[data-id=versions_browserslist]')
 let caniuse = document.querySelector('[data-id=versions_caniuse]')
+let docs = document.querySelector('[data-id=versions_docs]')
 
 export function updateVersions(browserslistVersion, caniuseVersion, updatedMs) {
   updated.innerText = new Date(updatedMs).toLocaleDateString('en-UK', {
@@ -11,3 +12,24 @@ export function updateVersions(browserslistVersion, caniuseVersion, updatedMs) {
   browserslist.innerText = browserslistVersion
   caniuse.innerText = caniuseVersion
 }
+
+let hideResults = docs.innerText
+
+function parseUrl() {
+  if (location.search.includes('?results')) {
+    docs.innerText = 'Show docs'
+    document.body.classList.add('without-docs')
+  } else {
+    docs.innerText = hideResults
+    document.body.classList.remove('without-docs')
+  }
+}
+
+docs.addEventListener('click', () => {
+  let search = location.search.includes('?results') ? '' : '?results'
+  history.pushState(null, null, '/' + search + location.hash)
+  parseUrl()
+})
+
+window.addEventListener('popstate', parseUrl)
+parseUrl()