fix: fix scrollintoview action

datahub-project · Aug 2, 2024 · aadf03a · aadf03a
1 parent d27b819
commit aadf03a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/docs-website/adoptionStoriesIndexes.json b/docs-website/adoptionStoriesIndexes.json
@@ -37,7 +37,7 @@
       "name": "Pinterest",
       "slug": "pinterest",
       "imageUrl": "/img/logos/companies/pinterest.png",
-      "imageSize": "default",
+      "imageSize": "small",
       "link": "https://www.youtube.com/watch?v=YoxTg8tQSwg&feature=youtu.be",
       "linkType": "blog",
       "tagline": "DataHub Project @ Pinterest",

diff --git a/docs-website/src/pages/adoption-stories/_components/LearnItemCard/index.jsx b/docs-website/src/pages/adoption-stories/_components/LearnItemCard/index.jsx
@@ -3,10 +3,10 @@ import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import styles from "./styles.module.scss";
 
-export default function LearnItemCard({ company }) {
+const LearnItemCard = React.forwardRef(({ company, isSelected }, ref) => {
   return (
-    <div className={clsx("col col--4", styles.featureCol)}>
-      <div className={clsx("card", styles.card)} id={company.slug}>
+    <div className={clsx("col col--4", styles.featureCol)} id={company.slug} ref={ref}>
+      <div className={clsx("card", styles.card, { [styles.selected]: isSelected })}>
         <div className={styles.card_image}>
           <img src={`/img/adoption-stories/adoption-stories-${company.slug}.png`} alt={company.name} />
         </div>
@@ -20,4 +20,6 @@ export default function LearnItemCard({ company }) {
       </div>
     </div>
   );
-}
+});
+
+export default LearnItemCard;
diff --git a/docs-website/src/pages/adoption-stories/_components/LearnItemCard/styles.module.scss b/docs-website/src/pages/adoption-stories/_components/LearnItemCard/styles.module.scss
@@ -28,8 +28,16 @@
   align-self: stretch;
   flex-grow: 1;
   &:hover {
+    opacity: 0.9;
+  }
+
+  &.selected {
     border-color: var(--ifm-color-primary);
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
+    scroll-margin-top: 100px; 
   }
+
+
   hr {
     margin: 0;
   }

diff --git a/docs-website/src/pages/adoption-stories/index.jsx b/docs-website/src/pages/adoption-stories/index.jsx
@@ -1,6 +1,4 @@
-import React, { useState } from "react";
-import clsx from "clsx";
-import { HtmlClassNameProvider, ThemeClassNames } from "@docusaurus/theme-common";
+import React, { useState, useEffect, useRef } from "react";
 import Layout from "@theme/Layout";
 import LearnItemCard from "./_components/LearnItemCard";
 import styles from "./styles.module.scss";
@@ -11,6 +9,7 @@ function AdoptionStoriesListPageContent() {
   const companies = (customerStoriesIndexes?.companies || []).filter((company) => company.link);
   const [activeFilters, setActiveFilters] = useState([]);
   const categories = ["B2B & B2C", "E-Commerce", "Financial & Fintech", "And More"];
+  const selectedCardRef = useRef(null);
 
   const filteredItems = activeFilters.length
     ? companies.filter((company) => activeFilters.includes(company.category))
@@ -24,6 +23,14 @@ function AdoptionStoriesListPageContent() {
     }
   };
 
+  const selectedSlug = window.location.hash.substring(1);
+
+  useEffect(() => {
+    if (selectedCardRef.current) {
+      selectedCardRef.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
+    }
+  }, [selectedSlug]);
+
   return (
     <Layout>
       <header className={"hero"}>
@@ -54,7 +61,12 @@ function AdoptionStoriesListPageContent() {
       <div className="container">
         <div className="row">
           {filteredItems.map((company) => (
-            <LearnItemCard key={company.name} company={company} />
+            <LearnItemCard
+              key={company.name}
+              company={company}
+              isSelected={company.slug === selectedSlug}
+              ref={company.slug === selectedSlug ? selectedCardRef : null}
+            />
           ))}
         </div>
       </div>
@@ -63,7 +75,5 @@ function AdoptionStoriesListPageContent() {
 }
 
 export default function AdoptionStoriesListPage() {
-  return (
-      <AdoptionStoriesListPageContent />
-  );
+  return <AdoptionStoriesListPageContent />;
 }