rtd progress

efdevcon · Mar 17, 2024 · b92e8f4 · b92e8f4
1 parent 88a28c6
commit b92e8f4
Show file tree

Hide file tree

Showing 4 changed files with 296 additions and 119 deletions.
diff --git a/devcon/src/components/common/page-hero/PageHero.tsx b/devcon/src/components/common/page-hero/PageHero.tsx
@@ -51,6 +51,7 @@ type PageHeroProps = {
   cta?: Array<CTALink>
   renderCustom?(props?: any): JSX.Element
   renderCustomBackground?(props?: any): JSX.Element
+  renderCustomNavigation?(props?: any): JSX.Element
   renderNavigationRight?(props?: any): JSX.Element
   navigation?: Array<NavigationLink>
   children?: React.ReactNode
@@ -206,6 +207,8 @@ export const PageHero = (props: PageHeroProps) => {
         </div>
       </div>
 
+      {props.renderCustomNavigation && props.renderCustomNavigation()}
+
       {props.navigation && (
         <div className={`${css['page-navigation-container']} section`}>
           <div className="expand-right">

diff --git a/devcon/src/components/common/swipe-to-scroll/SwipeToScroll.tsx b/devcon/src/components/common/swipe-to-scroll/SwipeToScroll.tsx
@@ -23,9 +23,11 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
   const [scrollIndicatorClass, setScrollIndicatorClass] = React.useState('')
   const lastX = React.useRef(0)
   const maxScrollRef = React.useRef<number>(0)
+  const isNativeScrollRef = React.useRef<any>(false)
   const onXChangeCallback = React.useRef<any>(null)
 
   maxScrollRef.current = maxScroll
+  isNativeScrollRef.current = isNativeScroll
 
   // Whether or not to display a scroll indicator
   const syncScrollIndicators = React.useCallback(
@@ -88,7 +90,7 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
     if (el.current) {
       const scrollContainer = el.current
       lastX.current = 0
-      if (onXChangeCallback.current) onXChangeCallback.current(lastX.current)
+      if (onXChangeCallback.current && !isNativeScrollRef.current) onXChangeCallback.current(lastX.current)
       scrollContainer.style.transform = `translateX(0px)`
       syncScrollIndicators(scrollContainer)
     }
@@ -133,15 +135,25 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
           setX: (x: any) => {
             const scrollContainer = el.current!
 
+            if (isNativeScrollRef.current) {
+              scrollContainer.scrollTo({
+                left: x,
+                top: 0,
+                behavior: 'smooth', // This enables smooth scrolling
+              })
+
+              return
+            }
+
             lastX.current = Math.min(Math.max(x, 0), maxScrollRef.current)
             scrollContainer.style.transform = `translateX(-${lastX.current}px)`
             scrollContainer.style.transition = `all 0.25s ease-out`
 
             setTimeout(() => {
               scrollContainer.style.transition = `none`
-            }, 500)
+            }, 250)
 
-            if (onXChangeCallback.current) onXChangeCallback.current(lastX.current)
+            if (onXChangeCallback.current && !isNativeScrollRef.current) onXChangeCallback.current(lastX.current)
           },
           subscribeX: (callback: any) => {
             onXChangeCallback.current = callback
@@ -156,7 +168,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)
+    if (onXChangeCallback.current && !isNativeScrollRef.current) onXChangeCallback.current(lastX.current)
     scrollContainer.style.transform = `translateX(-${lastX.current}px)`
 
     if (down) {
@@ -187,6 +199,9 @@ const SwipeToScroll = (props: SwipeToScrollProps) => {
         onMouseDown={e => {
           e.preventDefault()
         }}
+        onScroll={(e: any) => {
+          if (onXChangeCallback.current) onXChangeCallback.current(e.target.scrollLeft)
+        }}
       >
         {props.children}
       </div>

diff --git a/devcon/src/pages/road-to-devcon.module.scss b/devcon/src/pages/road-to-devcon.module.scss
@@ -1,6 +1,10 @@
 .position-container {
     background: linear-gradient(to right, #3E318A, #377AB9, #f88ff5); 
 
+    @media (max-width: 800px) {
+      background: linear-gradient(to right, #3E318A, #377AB9); 
+    }
+
     [data-type="swipe-to-scroll-container"] {
         height: 100% !important;
     }
@@ -17,6 +21,10 @@
         height: 600px !important;
         max-height: 75vh !important;
 
+        @media (max-width: 600px) {
+          max-height: 65vh !important;
+        }
+
         @media (max-height: 400px) {
             height: auto !important;
             max-height: none !important;
@@ -41,7 +49,6 @@
 
     @media (max-width: 500px) {
       bottom: 0px;
-      width: 100%;
       border-bottom: none;
     }
 
@@ -89,12 +96,46 @@
     }
   }
 
+  .image {
+    @media (max-width: 1024px) {
+        left: -60%;
+    }
+  }
+
+
   .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%);
+    @media (max-width: 1024px) {
+        // mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 100%);
+        mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 100%);
+        opacity: 0.3;
+        left: -60%;
+    }
+  }
+
+  .mobile-navigation {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+
+    @media (max-width: 500px) {
+      display: flex;
+    }
+
+    > p {
+      color: #9098a1;
+      white-space: nowrap;
+      margin-right: 32px;
+    }
+
+    > div {
+      width: 64px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      color: black;
+      border-left: 1px solid rgba(0, 0, 0, 0.1);
     }
   }