Bug Fix: Sidebar jumps to incorrect section with uri (google#1743)

* remove offset * fix sidebar with dynamic scroll top css * fixes white space on augmented reality examples
zstarpak · Dec 3, 2020 · 6e599da · 6e599da
1 parent 4252cfb
commit 6e599da
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 16 deletions.
diff --git a/packages/modelviewer.dev/docs/index.html b/packages/modelviewer.dev/docs/index.html
@@ -36,6 +36,13 @@
   <script async src='https://www.google-analytics.com/analytics.js'></script>
 </head>
 
+<style>
+  :root {
+    --scroll-top: 65px;
+    scroll-padding-top: var(--scroll-top);
+  }
+</style>
+
 <body>
   <div class="sidebar" id="sidenav"></div>
 
@@ -64,14 +71,6 @@
     (() => { init('docs'); })();
     (() => { initFooterLinks();})();
   </script>
-  <script>
-    function addMargin() {
-      if (window.location.hash.indexOf('-') !== -1) {
-        window.scrollBy(0, - 75);
-      }
-    }
-    window.addEventListener('hashchange', addMargin);
-  </script>
 
 </body>
 

diff --git a/packages/modelviewer.dev/examples/augmentedreality/index.html b/packages/modelviewer.dev/examples/augmentedreality/index.html
@@ -142,6 +142,7 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
 
   model-viewer {
     background-color: #eee;
+    overflow-x: hidden;
     --poster-color: #eee;
   }
 
@@ -357,7 +358,7 @@ <h4></h4>
           </example-snippet>
 
           <p>
-              Since this slot will only appear on an AR enabled device screenshots are provided below. They compare the &lt;model-viewer&gt; default button in the bottom right and a custom button ("👋 Activate AR") in the top right of the viewport, with a custom <code>style</code>.
+              Since this slot will only appear on an AR enabled device screenshots are provided below. They compare the &lt;model-viewer&gt; default button in the bottom right and a custom button ("👋 Activate AR") in the top right of the viewport, with a custom style.
           </p>
 
           <img class="eg-image" src="../../assets/eg-default-ar-button.jpg" alt="Image displaying the default <model-viewer> button of a box with slits cut out in the lower-right, next to the example astronaut model." />
@@ -376,7 +377,7 @@ <h4></h4>
             </div>
             <example-snippet stamp-to="transparentBackground" highlight-as="html">
               <template>
-<div class="background-demo" style="background: linear-gradient(#ffffff, #ada996);">
+<div class="background-demo" style="background: linear-gradient(#ffffff, #ada996); overflow-x: hidden;">
   <span style="position: absolute; text-align: center; font-size: 100px; top:50%;">Background</span>
   <model-viewer camera-controls src="../../shared-assets/models/glTF-Sample-Models/2.0/AlphaBlendModeTest/glTF-Binary/AlphaBlendModeTest.glb" alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
 </div>

diff --git a/packages/modelviewer.dev/src/docs-and-examples/create-html.ts b/packages/modelviewer.dev/src/docs-and-examples/create-html.ts
@@ -157,8 +157,8 @@ function createSidebar(category: Category) {
   const categoryContainer = `
 <div class="category" id=${lowerCaseTitle.concat('aboveHeader')}>
   <h3 id=${lowerCaseTitle.concat('-sidebar')}>
-    <a class="darken" href="#${lowerCaseTitle}" onclick="sidebarClick()">${
-      category.Title}</a>
+    <a class="darken" href="#${
+      lowerCaseTitle}" onclick="sidebarClick('title')">${category.Title}</a>
   </h3>
 </div>`;
 

diff --git a/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts b/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts
@@ -328,7 +328,17 @@ export function sidebarObserver(docsOrExample: string) {
   }
 }
 
-export function sidebarClick() {
+export function sidebarClick(titleName: string = '') {
+  // if a title was supplied on the docs page as being clicked on, we want to
+  // decrease the --scroll-top css so that the top of the title is flush
+  // with the top of the window
+  const root = document.documentElement;
+  if (titleName !== '') {
+    root.style.setProperty('--scroll-top', '0px');
+  } else {
+    root.style.setProperty('--scroll-top', '65px');
+  }
+
   isSideBarClick = true;
   // close sidebar if click in sidebar on mobile
   if (window.innerWidth <= 800) {

diff --git a/packages/modelviewer.dev/styles/examples.css b/packages/modelviewer.dev/styles/examples.css
@@ -695,7 +695,8 @@ paper-button {
 }
 
 .eg-image {
-    max-width: 40vw;
+    max-width: 20vw;
+    display: block;
 }
 
 @media only screen and (min-width: 1664px) {
@@ -712,6 +713,7 @@ paper-button {
   }
     .eg-image {
         max-width: 20vw;
+        display: block;
     }
 }
 
@@ -742,8 +744,8 @@ paper-button {
   }
 
   .examples-container {
-    margin-left: 20px;
-    margin-right: 20px;
+    margin-left: 0px;
+    margin-right: 0px;
   }
 
   .header {