slightly improve layout

Author: lassejaco

lib/components/event-schedule-new/action-bar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import cn from "classnames";
-import { ListFilter, Search } from "lucide-react";
+import { Grid, List, ListFilter, Search } from "lucide-react";
 import { FilterSummary } from "./filter";
 import Export from "./export";
 
@@ -59,7 +59,7 @@ const ActionBar = ({
         {filterActive && <FilterSummary filter={filter} />}
       </div>
 
-      <div className="flex items-center gap-4 shrink-0 grow lg:grow-0">
+      <div className="flex items-center gap-4 shrink-0 grow lg:grow-0 hidden md:flex">
         {categories.map((category) => (
           <div
             key={category.label}
@@ -71,13 +71,24 @@ const ActionBar = ({
         ))}
       </div>
 
-      <div className="items-center justify-end grow gap-2 shrink-0 hidden lg:flex">
+      {/* <div className="flex items-center gap-2 shrink-0 grow justify-end">
+        <div className="text-sm font-medium flex items-center border border-solid border-[rgba(224,224,235,1)] cursor-pointer gap-1.5 p-1 px-2">
+          <List size={13} />
+          List
+        </div>
+        <div className="text-sm font-medium flex items-center border border-solid border-[rgba(224,224,235,1)] cursor-pointer gap-1.5 p-1 px-2">
+          <Grid size={13} />
+          Grid
+        </div>
+      </div> */}
+
+      <div className="items-center justify-end gap-2 shrink-0 hidden grow lg:flex">
         {/* <Export events={events} /> */}
         <div className="flex items-center gap-2 border border-[rgba(224,224,235,1)] border-solid p-3 py-2 max-w-[320px] grow">
           <Search size={15} color="rgba(124, 124, 153, 1)" />
           <input
             className="grow border-none outline-none bg-transparen ml-0.5"
-            placeholder="Search events or organizers"
+            placeholder="Search events"
             type="text"
             value={filter.name}
             onChange={(e: any) => setFilter("name", e.target.value)}

lib/components/event-schedule-new/event/event.tsx

@@ -460,7 +460,7 @@ const Event: React.FC<EventProps> = ({
                             fill
                             className="shrink-0  mt-3 self-start"
                           >
-                            Buy Tickets
+                            Get Tickets
                             <ArrowUpRight className="w-4 h-4 mb-0.5" />
                           </VoxelButton>
                         </Link>
@@ -577,15 +577,9 @@ const Event: React.FC<EventProps> = ({
                   className="w-[26px] object-contain"
                 />
               )}
-              {/* {isETHDay && (
-                <Image
-                  src={ethDayImage}
-                  alt="ETH Day"
-                  className="w-[26px] object-contain"
-                />
-              )} */}
+
               <div className="flex flex-col w-full">
-                {eventName}
+                <div className="md:line-clamp-none">{eventName}</div>
                 <div className="flex gap-4 justify-between w-full">
                   {timeOfDay.map((time, index) => (
                     <div key={index} className="text-xs text-gray-600">
@@ -597,7 +591,7 @@ const Event: React.FC<EventProps> = ({
             </div>
 
             {isETHDay && (
-              <div className="flex items-center justify-center mt-2">
+              <div className="hidden md:flex items-center justify-center mt-2">
                 <Image
                   src={ethDayImage}
                   alt="ETH Day"
@@ -610,10 +604,10 @@ const Event: React.FC<EventProps> = ({
               {event.organizer}
             </div>
 
-            <Separator className="my-1.5" />
+            <Separator className="my-1.5 hidden md:block" />
 
             <div
-              className={cn("flex gap-4 justify-end", {
+              className={cn("hidden md:flex gap-4 justify-end", {
                 "justify-between": !isCoworking || isMultiDay,
               })}
             >

lib/components/event-schedule-new/index.tsx

@@ -14,6 +14,7 @@ import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import DevconnectCubeLogo from "./images/cube-logo.png";
 import { eventShops } from "./zupass/event-shops-list";
+import { useIsMobile } from "lib/hooks/useIsMobile";
 
 export type ScheduleProps = {
   isCommunityCalendar?: boolean;
@@ -22,6 +23,7 @@ export type ScheduleProps = {
   setSelectedEvent: (event: EventType | null) => void;
   setSelectedDay: (day: string | null) => void;
   events: EventType[];
+  viewMode: "list" | "grid";
 };
 
 // Utility function for tracking placed nodes in the grid
@@ -53,7 +55,8 @@ const createPlacementTracker = () => {
 // Compute event placements in the grid
 const computeEventPlacements = (
   events: EventType[],
-  dateColumns: string[]
+  dateColumns: string[],
+  isMobile: boolean
 ): any[] => {
   const placementTracker = createPlacementTracker();
 
@@ -122,13 +125,15 @@ const computeEventPlacements = (
       row++;
     }
 
+    const spanRows = isMobile ? 1 : event.spanRows ? event.spanRows : 1;
+
     // Store event with its grid position
     eventPlacements.push({
       event,
       timeblock: earliestTimeblock, // Use earliest timeblock for time display
       gridPosition: {
         row,
-        rowSpan: event.spanRows ? event.spanRows : 1,
+        rowSpan: spanRows ? spanRows : 1,
         column: startColIndex + 1, // +1 because CSS grid is 1-indexed
         duration,
       },
@@ -137,11 +142,11 @@ const computeEventPlacements = (
     });
 
     // Add additional rows for special events
-    if (event.spanRows) {
-      for (let i = 0; i < event.spanRows; i++) {
+    if (spanRows > 1) {
+      for (let i = 0; i < spanRows; i++) {
         !placementTracker.placeItem(row + i, startColIndex + 1, duration);
       }
-      row += event.spanRows - 1;
+      row += spanRows - 1;
     }
   });
 
@@ -154,14 +159,18 @@ const NewScheduleIndexInner = ({
   setSelectedEvent,
   setSelectedDay,
   events,
+  viewMode,
 }: ScheduleProps) => {
   const searchParams = useSearchParams();
   // const { selectedEvent, selectedDay, setSelectedEvent, setSelectedDay } = useCalendarStore()
   const eventRange = computeCalendarRange(events);
   const [hoveredDate, setHoveredDate] = useState<string | null>(null);
+  const isMobile = useIsMobile(768);
 
   // Compute event placements for the unified grid
-  const eventPlacements = computeEventPlacements(events, eventRange);
+  const eventPlacements = computeEventPlacements(events, eventRange, isMobile);
+
+  console.log("eventPlacements", eventPlacements);
 
   // Format date for display
   const formatDateHeader = (dateStr: string) => {
@@ -174,7 +183,7 @@ const NewScheduleIndexInner = ({
 
   // Define shared column template for consistent alignment
   // const columnTemplate = `repeat(${eventRange.length}, minmax(175px, 1fr))`
-  const columnTemplate = `repeat(${eventRange.length}, minmax(auto, 230px))`;
+  const columnTemplate = `repeat(${eventRange.length}, minmax(auto, 240px))`;
 
   // Check if an event should be highlighted based on hovered date
   const isEventHighlighted = (placement: any) => {
@@ -249,7 +258,7 @@ const NewScheduleIndexInner = ({
           <div className="hidden touch-only:block w-4 md:w-0 h-[1px]"></div>
           <div className="w-full flex">
             <div
-              className="grid shrink-0"
+              className="grid shrink-0 min-w-full"
               style={{
                 gridTemplateColumns: columnTemplate,
                 gridTemplateRows: "auto 1fr",

lib/components/event-schedule-new/layout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import NewScheduleIndex, { ScheduleProps } from "./index";
 import ActionBar from "./action-bar";
 import { Filter, FilterSummary, useFilters } from "./filter";
@@ -13,6 +13,7 @@ type CalendarLayoutProps = ScheduleProps & {
 };
 
 const Layout = (props: CalendarLayoutProps) => {
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
   const {
     filterOpen,
     setFilterOpen,
@@ -106,6 +107,7 @@ const Layout = (props: CalendarLayoutProps) => {
             resetFilter={resetFilter}
             filter={filter}
             events={props.events}
+            setViewMode={setViewMode}
           />
         </div>
 
@@ -132,7 +134,11 @@ const Layout = (props: CalendarLayoutProps) => {
           <div className="grow relative">
             {/* white gradient to indicate more events on the right for mobile */}
             <div className="absolute top-0 right-0 w-4 h-full bg-gradient-to-l from-white via-white/60 to-transparent pointer-events-none z-10 mouse-only:hidden"></div>
-            <NewScheduleIndex {...props} events={filteredEvents} />
+            <NewScheduleIndex
+              {...props}
+              events={filteredEvents}
+              viewMode={viewMode}
+            />
           </div>
         </div>
       </div>