fix: fix padding judges using react-tooltip, need to fix arrow

ucsddesignco · Apr 6, 2024 · c784f75 · c784f75
1 parent e526e5b
commit c784f75
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 73 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,32 @@
       name="author"
       content="Aaron Chan, Brian Liu, Edward New, Sahil Gathe, Victor Hsiao"
     />
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://df24.ucsddesign.co/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Design Frontiers 2024" />
+    <meta
+      property="og:description"
+      content="Design Frontiers is Design Co's very own long day sprint, where student teams of all backgrounds come together to create innovative solutions for real-world problems."
+    />
+    <meta
+      property="og:image"
+      content="https://df24.ucsddesign.co/images/df24-preview.webp"
+    />
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="df24.ucsddesign.co" />
+    <meta property="twitter:url" content="https://df24.ucsddesign.co/" />
+    <meta name="twitter:title" content="Design Frontiers 2024" />
+    <meta
+      name="twitter:description"
+      content="Design Frontiers is Design Co's very own long day sprint, where student teams of all backgrounds come together to create innovative solutions for real-world problems."
+    />
+    <meta
+      name="twitter:image"
+      content="https://df24.ucsddesign.co/images/df24-preview.webp"
+    />
     <title>Design Frontiers 2024: UCSD Design Co</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -13,13 +13,14 @@
     "lint-check": "eslint . && prettier . --check"
   },
   "dependencies": {
-    "framer-motion": "^11.0.24",
     "@gsap/react": "^2.1.0",
+    "framer-motion": "^11.0.24",
     "gsap": "^3.12.5",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-tooltip": "^5.26.3",
     "sass": "^1.72.0"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/images/df24-preview.webp b/public/images/df24-preview.webp
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import Judges from './pages/Judges/Judges';
 import { useRef, useState } from 'react';
 import LogoAndRegister from './components/LogoAndRegister/LogoAndRegister';
 import Asteroid from './components/Asteroid/Asteroid';
+import JudgeFunFacts from './components/JudgeFunFacts/JudgeFunFacts';
 
 function Rotate() {
   const scrollContainerRef = useRef<HTMLElement>(null);
@@ -69,6 +70,7 @@ function Rotate() {
       <FAQ scroll2Ref={scroll2Ref} mobileFAQRef={mobileFAQRef} />
       <Timeline scroll3Ref={scroll3Ref} />
       <Judges scroll4Ref={scroll4Ref} mobileJudgesRef={mobileJudgesRef} />
+      <JudgeFunFacts />
     </main>
   );
 }

diff --git a/src/components/JudgeCard/JudgeCard.scss b/src/components/JudgeCard/JudgeCard.scss
@@ -56,62 +56,60 @@
       }
     }
 
-    .fun-fact-container {
-      .trigger {
-        cursor: $cursor-pointer;
-        display: inline;
-        border-bottom: 1.5px solid $primary-orange;
-        padding-bottom: 1px;
-      }
+    .trigger {
+      cursor: $cursor-pointer;
+      display: inline;
+      border-bottom: 1.5px solid $primary-orange;
+      padding-bottom: 1px;
+    }
 
-      .desc {
+    .desc {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+      margin-top: 1rem;
+      max-width: 50ch;
+      transition: opacity 0.3s;
+      margin-inline: auto;
+      color: rgb(9, 9, 33);
+      background-color: rgba(255, 255, 255, 0.8);
+      border: 1px solid rgba(255, 255, 255, 1);
+      backdrop-filter: blur(5px);
+      padding: 1rem;
+      color: $primary-blue;
+      z-index: 1;
+      // 15 ch is about the length of fun fact trigger text
+      transform: translateX(calc((-15ch / 2 + 50%) * -1));
+
+      &:after {
+        content: '▲';
+        $triangle-size: 20px;
+        font-size: $triangle-size;
+        line-height: 0.65;
         position: absolute;
-        opacity: 0;
-        pointer-events: none;
-        margin-top: 1rem;
-        max-width: 50ch;
-        transition: opacity 0.3s;
+        color: rgba(255, 255, 255, 0.9);
+        top: calc($triangle-size * -0.65);
+        left: 0;
+        right: 0;
         margin-inline: auto;
-        color: rgb(9, 9, 33);
-        background-color: rgba(255, 255, 255, 0.8);
-        border: 1px solid rgba(255, 255, 255, 1);
-        backdrop-filter: blur(5px);
-        padding: 1rem;
-        color: $primary-blue;
-        z-index: 1;
-        // 15 ch is about the length of fun fact trigger text
-        transform: translateX(calc((-15ch / 2 + 50%) * -1));
-
-        &:after {
-          content: '▲';
-          $triangle-size: 20px;
-          font-size: $triangle-size;
-          line-height: 0.65;
-          position: absolute;
-          color: rgba(255, 255, 255, 0.9);
-          top: calc($triangle-size * -0.65);
-          left: 0;
-          right: 0;
-          margin-inline: auto;
-          width: $triangle-size;
-          height: $triangle-size;
-
-          @media (max-width: $mobile-breakpoint) {
-            color: rgba(9, 9, 33, 0.8);
-          }
-        }
+        width: $triangle-size;
+        height: $triangle-size;
 
         @media (max-width: $mobile-breakpoint) {
-          background-color: rgba(9, 9, 33, 0.8);
-          border: 1px solid rgba(9, 9, 33, 1);
-          color: $primary-white;
-          width: fit-content;
-          max-width: calc(100% - 2rem);
-          transform: translateX(0);
-          left: 0;
-          right: 0;
+          color: rgba(9, 9, 33, 0.8);
         }
       }
+
+      @media (max-width: $mobile-breakpoint) {
+        background-color: rgba(9, 9, 33, 0.8);
+        border: 1px solid rgba(9, 9, 33, 1);
+        color: $primary-white;
+        width: fit-content;
+        max-width: calc(100% - 2rem);
+        transform: translateX(0);
+        left: 0;
+        right: 0;
+      }
     }
   }
 }
diff --git a/src/components/JudgeCard/JudgeCard.tsx b/src/components/JudgeCard/JudgeCard.tsx
@@ -1,6 +1,4 @@
-import { useRef } from 'react';
 import './JudgeCard.scss';
-
 interface JudgeProps {
   name: string;
   pronouns: string;
@@ -18,7 +16,6 @@ const JudgeCard = ({
   imgLink,
   linkedin
 }: JudgeProps) => {
-  const funFactRef = useRef<HTMLParagraphElement>(null);
   return (
     //prettier-ignore
     <div className="judge-card">
@@ -35,29 +32,16 @@ const JudgeCard = ({
           {name} <span>({pronouns})</span>
         </h3>
         <p>{position}</p>
-        <div className="fun-fact-container">
           <p
+            data-tooltip-id={`${name}-tooltip`}
+            data-tooltip-content={funFact}
+            data-tooltip-place="bottom"
             className="trigger"
-            onMouseEnter={() => {
-              if (funFactRef.current) {
-                funFactRef.current.style.opacity = '1';
-                funFactRef.current.style.pointerEvents = 'auto';
-              }
-            }}
-            onMouseLeave={() => {
-              if (funFactRef.current) {
-                funFactRef.current.style.opacity = '0';
-                funFactRef.current.style.pointerEvents = 'none';
-              }
-            }}
           >
             See my fun fact!
           </p>
-          <p className="desc" ref={funFactRef}>
-            {funFact}
-          </p>
-        </div>
       </div>
+
     </div>
   );
 };

diff --git a/src/components/JudgeFunFacts/JudgeFunFacts.scss b/src/components/JudgeFunFacts/JudgeFunFacts.scss
@@ -0,0 +1,21 @@
+.judge-fun-facts {
+  .tooltip {
+    font-family: $p-font;
+    font-size: $p-size;
+    color: rgb(9, 9, 33);
+    background-color: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(255, 255, 255, 1);
+    backdrop-filter: blur(5px);
+    padding: 1rem;
+    color: $primary-blue;
+    z-index: 99;
+    max-width: 50ch;
+    width: fit-content;
+    border-radius: 0;
+  }
+}
+
+[class*='react-tooltip__place-bottom'] {
+  > .arrow {
+  }
+}
diff --git a/src/components/JudgeFunFacts/JudgeFunFacts.tsx b/src/components/JudgeFunFacts/JudgeFunFacts.tsx
@@ -0,0 +1,17 @@
+import { JudgeInfo } from '../../pages/Judges/JudgeInfo';
+import { Tooltip } from 'react-tooltip';
+import './JudgeFunFacts.scss';
+
+export default function JudgeFunFacts() {
+  return (
+    <div className="judge-fun-facts">
+      {JudgeInfo.map(item => (
+        <Tooltip
+          key={`${item.name}-tooltip`}
+          id={`${item.name}-tooltip`}
+          className="tooltip"
+        />
+      ))}
+    </div>
+  );
+}