rtd basic desktop version

efdevcon · Mar 12, 2024 · b16720b · b16720b
1 parent 6f09c54
commit b16720b
Show file tree

Hide file tree

Showing 4 changed files with 376 additions and 239 deletions.
diff --git a/devcon/src/components/common/page-hero/PageHero.tsx b/devcon/src/components/common/page-hero/PageHero.tsx
@@ -14,6 +14,7 @@ import SwipeToScroll from 'components/common/swipe-to-scroll'
 
 type NavigationLink = {
   to?: string
+  key?: string
   title: string | any
 }
 
@@ -225,7 +226,11 @@ export const PageHero = (props: PageHeroProps) => {
                         </Link>
                       )
                     } else {
-                      return <div className="font-xs bold text-uppercase">{link.title}</div>
+                      return (
+                        <div className="font-xs bold text-uppercase" key={link.key}>
+                          {link.title}
+                        </div>
+                      )
                     }
                   })}
                 {/* </div> */}

diff --git a/devcon/src/components/common/swipe-to-scroll/SwipeToScroll.tsx b/devcon/src/components/common/swipe-to-scroll/SwipeToScroll.tsx
@@ -23,6 +23,7 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
   const [scrollIndicatorClass, setScrollIndicatorClass] = React.useState('')
   const lastX = React.useRef(0)
   const maxScrollRef = React.useRef<number>(0)
+  const onXChangeCallback = React.useRef<any>(null)
 
   maxScrollRef.current = maxScroll
 
@@ -87,6 +88,7 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
     if (el.current) {
       const scrollContainer = el.current
       lastX.current = 0
+      if (onXChangeCallback.current) onXChangeCallback.current(lastX.current)
       scrollContainer.style.transform = `translateX(0px)`
       syncScrollIndicators(scrollContainer)
     }
@@ -121,18 +123,28 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
   }, [reset])
 
   if (props.slideControls) {
+    // eslint-disable-next-line
     useImperativeHandle(
       props.slideControls,
       () => {
         return {
           lastX,
+          maxScrollRef,
           setX: (x: any) => {
             const scrollContainer = el.current!
 
             lastX.current = Math.min(Math.max(x, 0), maxScrollRef.current)
-            console.log(lastX.current, 'next x')
             scrollContainer.style.transform = `translateX(-${lastX.current}px)`
-            scrollContainer.style.transition = `all 0.15s ease-out`
+            scrollContainer.style.transition = `all 0.25s ease-out`
+
+            setTimeout(() => {
+              scrollContainer.style.transition = `none`
+            }, 500)
+
+            if (onXChangeCallback.current) onXChangeCallback.current(lastX.current)
+          },
+          subscribeX: (callback: any) => {
+            onXChangeCallback.current = callback
           },
         }
       },
@@ -144,6 +156,7 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
     const scrollContainer = el.current!
 
     lastX.current = Math.min(Math.max(0, lastX.current - delta[0]), maxScroll)
+    if (onXChangeCallback.current) onXChangeCallback.current(lastX.current)
     scrollContainer.style.transform = `translateX(-${lastX.current}px)`
 
     if (down) {

diff --git a/devcon/src/pages/road-to-devcon.module.scss b/devcon/src/pages/road-to-devcon.module.scss
@@ -1,5 +1,5 @@
 .position-container {
-    background: linear-gradient(to right, #3E318A, #377AB9, #F794F3); 
+    background: linear-gradient(to right, #3E318A, #377AB9, #f88ff5); 
 
     [data-type="swipe-to-scroll-container"] {
         height: 100% !important;
@@ -8,12 +8,19 @@
 
 .page-hero {
     color: white;
+    --color-icon: white;
     overflow: hidden;
+    // background: linear-gradient(to right, #3E318A, #377AB9, #f88ff5); 
 
     [data-type="page-hero-content"] {
         pointer-events: none;
         height: 600px !important;
-        max-height: none !important;
+        max-height: 75vh !important;
+
+        @media (max-height: 400px) {
+            height: auto !important;
+            max-height: none !important;
+        }
     }
 }
 
@@ -24,4 +31,70 @@
 
 .content {
     --custom-fade-color: rgb(202, 202, 255);
-}
+}
+
+.drag-to-continue {
+    text-transform: uppercase;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 500px) {
+      bottom: 0px;
+      width: 100%;
+      border-bottom: none;
+    }
+
+    > p {
+      margin-right: 4px;
+
+      > span {
+        &:nth-child(1) {
+          display: inline-block;
+
+          @media (hover: none) {
+            display: none;
+          }
+        }
+
+        &:nth-child(2) {
+          display: none;
+
+          @media (hover: none) {
+            display: inline-block;
+          }
+        }
+      }
+    }
+
+    --text-color: white; // rgb(228, 86, 102);
+    --color-icon: white; // rgb(228, 86, 102);;
+
+    // .circle-arrow-right-icon {
+    //   --text-color: rgb(228, 86, 102);
+    // }
+
+    > svg {
+      &:not(.circle-arrow-right-icon) {
+        @media (hover: none) {
+          display: none;
+        }
+      }
+
+      font-size: 1.1rem;
+      margin-right: 8px;
+      &:last-child {
+        margin-right: 0px;
+      }
+    }
+  }
+
+  .mask-image {
+    @media (max-width: 1000px) {
+        position: absolute;
+        max-width: 500px;
+        bottom: 0;
+        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
+        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
+    }
+  }