sticky rooms

Author: igachmovmelon

src/components/molecules/EventDisplay/EventDisplay.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { format } from "date-fns";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBookmark as solidBookmark } from "@fortawesome/free-solid-svg-icons";
@@ -31,16 +32,21 @@ export const EventDisplay: React.FC<EventDisplayProps> = ({ event, venue }) => {
   });
 
   const starHour = formatHour(event.start_utc_seconds);
+  const oneHourBehind = format(
+    new Date().setHours(new Date().getHours() - 1),
+    "HH"
+  );
   const duration = Math.floor(event.duration_minutes / 60);
+  const beginnigToShow = Number(starHour) - Number(oneHourBehind);
 
   return (
     <div
       className={containerClasses}
       style={{
-        marginLeft: `${Number(starHour) * 200 + 280}px`,
+        marginLeft: `${beginnigToShow * 200 + 52}px`,
         width: `${
-          Number(starHour) * 200 + 100 + duration * 200 > 4800
-            ? 4800 - (Number(starHour) * 200 + 100)
+          beginnigToShow * 200 + 100 + duration * 200 > 4800
+            ? 4800 - (Number(beginnigToShow) * 200 + 100)
             : duration * 200
         }px`,
       }}

src/components/molecules/EventRoomDisplay/EventRoomDisplay.tsx

@@ -38,6 +38,10 @@ export const EventRoomDisplay: React.FC<EventRoomDisplayProps> = ({
     [events, venue]
   );
 
+  if (events?.length === 0) {
+    return <></>;
+  }
+
   return (
     <div
       className={"schedule-time-line"}

src/components/molecules/NavBar/NavBar.scss

@@ -319,6 +319,8 @@ $border-radius: 28px;
   }
 
   .partyinfo-container {
+    position: sticky;
+    left: 0;
     flex: 1;
     margin-right: 60px;
     padding: 0 40px 0;
@@ -363,15 +365,15 @@ $border-radius: 28px;
   .schedule-time-container {
     display: flex;
     flex-direction: row;
-    width: 4800px;
+    // width: 4800px;
     position: absolute;
-    height: 800px;
+    height: 100%;
   }
 
   .current-time-line {
     position: absolute;
     width: 1px;
-    height: 760px;
+    height: calc(100% - 40px);
     margin-top: 40px;
     background-color: $primary;
   }
@@ -380,26 +382,28 @@ $border-radius: 28px;
     flex: 2;
     .schedule-tabs {
       height: 50px;
-      padding: 0 40px 0;
     }
 
     .schedule-time-line {
       display: flex;
       position: relative;
       flex-direction: row;
-      width: 4800px;
+      // width: 4800px;
       padding: 0 20px 0;
     }
     .shcedule-time-line-room {
       display: flex;
       flex-direction: column;
-      width: 5%;
-      margin-top: 30px;
+      width: 15%;
+      padding-top: 30px;
       box-shadow: 10px 0 30px rgb(0 0 0 / 50%);
+      z-index: 5;
+      background-color: black;
+      position: sticky;
+      left: 30px;
     }
 
     .schedule-event-row {
-      width: 4800px;
       display: flex;
       flex-direction: row;
       position: relative;
@@ -409,7 +413,7 @@ $border-radius: 28px;
       display: flex;
       flex-direction: column;
       height: calc(100% - 70px);
-      width: 95%;
+      width: 85%;
       margin-left: 200px;
       padding-bottom: 40px;
       overflow-y: scroll;
@@ -562,7 +566,7 @@ $border-radius: 28px;
     box-shadow: 0 5px 10px rgb(0 0 0 / 65%);
 
     &:hover {
-      z-index: 1000;
+      z-index: 2;
     }
 
     &.schedule-event-container--live {

src/components/organisms/SchedulePageModal/SchedulePageModal.tsx

@@ -126,6 +126,18 @@ export const SchedulePageModal: FC<SchedulePageModalProps> = ({
       )),
     [date, orderedEvents, currentVenue]
   );
+
+  const roomsWithEvents = useMemo(() => {
+    let counter = 0;
+
+    orderedEvents[date]?.rooms.map((room, index) => {
+      if (room.events?.length !== 0) {
+        counter++;
+      }
+    });
+    return counter;
+  }, [date, orderedEvents]);
+
   const hasEvents = !!orderedEvents?.[date]?.events.length;
 
   // TODO: this was essentially used in the old logic, but the styles look
@@ -148,11 +160,11 @@ export const SchedulePageModal: FC<SchedulePageModalProps> = ({
   const descriptionText = hasParentVenue
     ? parentVenue?.config?.landingPageConfig.description
     : currentVenue?.config?.landingPageConfig.description;
-  const result = getMinutes(getCurrentTimeInUTCSeconds());
+  const currentMinutes = getMinutes(getCurrentTimeInUTCSeconds()) - 60;
 
   const hours = hoursOfTheDay(
     eachHourOfInterval({
-      start: startOfDay(new Date()),
+      start: new Date().setHours(new Date().getHours() - 1),
       end: endOfDay(new Date()),
     })
   );
@@ -179,27 +191,40 @@ export const SchedulePageModal: FC<SchedulePageModalProps> = ({
           <div className="partyinfo-desc">
             <p>{descriptionText}</p>
           </div>
+          <div className="schedule-container">
+            <ul className="schedule-tabs">{scheduleTabs}</ul>
+          </div>
         </div>
 
         <div className="schedule-container">
-          <ul className="schedule-tabs">{scheduleTabs}</ul>
+          {hasEvents && (
+            <div className="schedule-event-line">
+              <div className="schedule-time-line-container">
+                <div
+                  className="schedule-time-container"
+                  style={{
+                    height: `${roomsWithEvents * 160}px`,
+                  }}
+                >
+                  {dailyHours}
+                </div>
+                <div
+                  className="current-time-line"
+                  style={{
+                    left: `${currentMinutes * 0.3 + 390}px`,
+                    height: `${roomsWithEvents * 160 - 40}px`,
+                  }}
+                ></div>
+              </div>
+              {eventRooms}
+            </div>
+          )}
 
-          <div className="schedule-event-line">
+          {!hasEvents && (
             <div className="schedule-time-line-container">
-              <div className="schedule-time-container">{dailyHours}</div>
-              <div
-                className="current-time-line"
-                style={{
-                  left: `${result * 3.45 + 200}px`,
-                }}
-              ></div>
-              {!hasEvents && (
-                <div>There are no events scheduled for this day.</div>
-              )}
+              <div>There are no events scheduled for this day.</div>
             </div>
-            {eventRooms}
-          </div>
-
+          )}
           {/* <div className="schedule-time-line">
             <div className="shcedule-time-line-room">{eventRooms}</div>