checkpoint progress

efdevcon · Nov 8, 2024 · 1459149 · 1459149
1 parent 94da493
commit 1459149
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/devcon-app/src/assets/css/global/general.scss b/devcon-app/src/assets/css/global/general.scss
@@ -34,7 +34,7 @@
   justify-content: space-between;
 }
 
-$border: 1px solid $colors-monochrome-5;
+$border: 1px solid rgb(228 230 235);
 
 .border-top {
   border-top: $border;

diff --git a/devcon-app/src/components/domain/app/dc7/sessions/index.tsx b/devcon-app/src/components/domain/app/dc7/sessions/index.tsx
@@ -147,11 +147,21 @@ const useSessionFilter = (sessions: SessionType[], event: any) => {
       track: [...new Set(sessions.map(session => session.track)), 'CLS']
         .filter(Boolean)
         .filter(track => !track.startsWith('[CLS]')),
-      room: [...new Set(sessions.map(session => session.slot_room?.name))].filter(Boolean).sort((a, b) => {
+      room: [...new Set(sessions.map(session => session.slot_room?.name))].filter(Boolean).sort((a: any, b: any) => {
         if (a === 'Main Stage') return -1
         if (b === 'Main Stage') return 1
-        return (a || '').localeCompare(b || '')
-      }),
+
+        if (a.toLowerCase().startsWith('stage')) {
+          if (b.toLowerCase().startsWith('stage')) {
+            return a.localeCompare(b)
+          }
+          return -1
+        }
+
+          if (b.toLowerCase().startsWith('stage')) return 1
+
+          return a.localeCompare(b)
+        }),
       other: ['Attending', 'Interested In', 'Upcoming', 'Past'],
     }
   }, [sessions, timelineView])
@@ -1176,6 +1186,8 @@ export const SessionList = ({
     }, {} as Record<string, SessionType[]>)
   }, [visibleSessions])
 
+  const isNativeScroll = typeof window !== 'undefined' && !window.matchMedia('not all and (hover: none)').matches
+
   return (
     <div data-type="session-list" className={cn(cardClass)}>
       <SessionFilter filterOptions={filterOptions} />
@@ -1194,13 +1206,13 @@ export const SessionList = ({
         </>
       )}
       <div className="flex flex-row justify-between items-center gap-3 px-4 mb-1">
-        <div className="font-semibold">{isPersonalizedSchedule ? 'Schedule Snapshot' : 'Sessions'}</div>
+        <div className="font-semibold">{isPersonalizedSchedule ? 'Schedule Snapshot' : 'Sessions'}{timelineView && isNativeScroll ? '' : ' (Hold and drag to scroll)'}</div>
         <div className="flex justify-evenly bg-[#EFEBFF] gap-1.5 rounded-lg p-1 mt-2 shrink-0 mb-2 self-center text-sm">
           <div
             className={cn(
               'flex justify-center items-center self-center grow rounded-md gap-2 px-2 text-[#A897FF] hover:bg-white hover:shadow-md cursor-pointer p-0.5 transition-all duration-300 select-none',
               {
-                'bg-white shadow-md text-[#7D52F4]': !timelineView,
+                'bg-white shadow-md !text-[#7D52F4]': !timelineView,
               }
             )}
             onClick={() => setTimelineView(false)}
@@ -1215,7 +1227,7 @@ export const SessionList = ({
             className={cn(
               'flex justify-center items-center rounded-md gap-2 text-[#A897FF] px-2 hover:bg-white hover:shadow-md cursor-pointer p-0.5 transition-all duration-300 select-none',
               {
-                'bg-white shadow-md text-[#7D52F4]': timelineView,
+                'bg-white shadow-md !text-[#7D52F4]': timelineView,
               }
             )}
             onClick={() => {
@@ -1688,7 +1700,7 @@ export const SessionLayout = ({ sessions, event }: { sessions: SessionType[] | n
 
   return (
     <div
-      data-type="speaker-layout"
+      data-type="session-layout"
       className={cn('flex flex-row lg:gap-3 relative')}
       // initial={{ opacity: 0 }}
       // animate={{ opacity: 1 }}

diff --git a/devcon-app/src/components/domain/app/dc7/sessions/timeline.tsx b/devcon-app/src/components/domain/app/dc7/sessions/timeline.tsx
@@ -60,7 +60,7 @@ const DayGrid = ({
       </div>
       <div className="flex flex-col relative">
         <div
-          className="grid shrink-0 sticky top-0"
+          className="grid shrink-0 sticky top-[100px] lg:top-[106px] z-[2] glass"
           style={{ gridTemplateColumns: `repeat(${timeSlots.length}, minmax(80px, 1fr))` }}
         >
           {timeSlots.map((time, index) => (
@@ -74,11 +74,13 @@ const DayGrid = ({
                 className="flex flex-col justify-center items-center"
               >
                 <p>{time.format('h:mm A')}</p>
-                <p className="text-[8px] leading-[6px] text-gray-500">Nov 12</p>
+                <p className="text-[8px] leading-[6px] text-gray-500">{time.format('MMM DD')}</p>
               </div>
             </div>
           ))}
         </div>
+        <SwipeToScroll noScrollReset>
+          <div className='flex'>
         <div
           className="grid relative shrink-0"
           style={{ gridTemplateColumns: `repeat(${timeSlots.length}, minmax(80px, 1fr))` }}
@@ -132,7 +134,7 @@ const DayGrid = ({
                         className={``}
                         style={{ width: `${match.columns * 100}px`, marginLeft: `${match.columnIndent * 100}px` }}
                       >
-                        <SessionCard session={match.session} tiny />
+                        <SessionCard session={match.session} tiny className="z-[1] hover:z-[2]" />
                       </div>
                     </div>
                   )
@@ -141,6 +143,8 @@ const DayGrid = ({
             )
           })}
         </div>
+        </div>
+        </SwipeToScroll>
       </div>
     </div>
   )
@@ -188,9 +192,9 @@ const Timeline = ({ sessions, event, days }: { sessions: SessionType[]; event: E
   }) as string[]
 
   return (
-    <div className="flex flex-nowrap overflow-hidden">
+    <div className="flex flex-nowrap" style={{ contain: 'paint' }}>
       <RoomGrid rooms={rooms} />
-      <SwipeToScroll noScrollReset>
+      {/* <SwipeToScroll noScrollReset> */}
         <div className="flex flex-nowrap gap-[120px]">
           {days.map(day => {
             const sessionsForDay = sessions.filter(session => moment(session.slot_start).format('MMM DD') === day)
@@ -229,7 +233,7 @@ const Timeline = ({ sessions, event, days }: { sessions: SessionType[]; event: E
             return <DayGrid day={day} rooms={rooms} key={day} sessionsByRoom={sessionsByRoom} timeSlots={timeSlots} />
           })}
         </div>
-      </SwipeToScroll>
+      {/* </SwipeToScroll> */}
     </div>
   )
 }

diff --git a/lib/components/event-schedule/swipe-to-scroll/sts.module.scss b/lib/components/event-schedule/swipe-to-scroll/sts.module.scss
@@ -72,6 +72,7 @@ $gradient-size: max(5%, 32px);
 
   &.is-native-scroll {
     overflow-x: auto;
+    // contain: paint;
     transform: translateX(0px) !important;
   }
 }