fix(clayui.com): Data Provider Network Status link should scroll to c…

…orrect spot fix(clayui.com): Data Provider Advance link should scoll to correct spot. Renames tab id advanced to advanceTab and advancedTab to advancedTabs fix(clayui.com): Navigation covers text when navigating to HTML fragment id feat(clayui.com): Adds smooth-scroll for modern browsers when navigating to HTML fragment id fixes #2815
liferay · Jan 23, 2020 · 6ab2e30 · 6ab2e30
1 parent c57d995
commit 6ab2e30
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/clayui.com/content/docs/components/data-provider.mdx b/clayui.com/content/docs/components/data-provider.mdx
@@ -22,7 +22,7 @@ import {
     -   [useResource hook](#useresource-hook)
 -   [Features](#features)
     -   [Retry](#retry)
-    -   [Network Status](#network-Status)
+    -   [Network Status](#network-status)
     -   [Variables change](#variables-change)
     -   [Caching data](#caching-data)
 -   [Advanced](#advanced)

diff --git a/clayui.com/src/styles/site/_content-site.scss b/clayui.com/src/styles/site/_content-site.scss
@@ -20,6 +20,16 @@
 				margin-bottom: $base-size;
 				margin-top: $base-size;
 			}
+
+			&[id] {
+				margin-top: calc(-81px + #{$base-size});
+				padding-top: 81px;
+
+				@media (min-width: $grid-float-breakpoint) {
+					margin-top: calc(-66px + #{$base-size});
+					padding-top: 66px;
+				}
+			}
 		}
 	}
 

diff --git a/clayui.com/src/styles/site/_site.scss b/clayui.com/src/styles/site/_site.scss
@@ -1,3 +1,7 @@
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	background-color: $bg-color;
 	font-size: 1rem;

diff --git a/clayui.com/src/templates/docs.js b/clayui.com/src/templates/docs.js
@@ -109,8 +109,8 @@ export default props => {
 															aria-expanded="true"
 															className="active nav-link"
 															data-toggle="tab"
-															href="#advanced"
-															id="advancedTab"
+															href="#advancedTab"
+															id="advancedTabs"
 															role="tab"
 														>
 															{'React Component'}
@@ -140,9 +140,9 @@ export default props => {
 									<div className="col-12">
 										<div className="tab-content">
 											<div
-												aria-labelledby="advancedTab"
+												aria-labelledby="advancedTabs"
 												className="active fade show tab-pane"
-												id="advanced"
+												id="advancedTab"
 												role="tabpanel"
 											>
 												{fields &&