selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 12:49:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: meeting selection responsive

Browse Source
This commit is contained in:
Mathieu Virbel
2025-09-12 17:00:55 -06:00
parent e983606ba6
commit 3673d9f106
1 changed files with 96 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
www/app/[roomName]/MeetingSelection.tsx
View File

@@ -182,10 +182,10 @@ export default function MeetingSelection({
w="full" w="full"
maxW="800px" maxW="800px"
mx="auto" mx="auto"
px={6} px={{ base: 4, md: 6 }}
py={8} py={{ base: 4, md: 8 }}
flex="1" flex="1"
gap={6} gap={{ base: 4, md: 6 }}
> >
{/* Current Ongoing Meetings - BIG DISPLAY */} {/* Current Ongoing Meetings - BIG DISPLAY */}
{currentMeetings.length > 0 ? ( {currentMeetings.length > 0 ? (
@@ -196,17 +196,26 @@ export default function MeetingSelection({
width="100%" width="100%"
bg="gray.50" bg="gray.50"
borderRadius="xl" borderRadius="xl"
p={8} p={{ base: 4, md: 8 }}
> >
<HStack justify="space-between" align="start"> <Flex
<VStack align="start" gap={4} flex={1}> direction={{ base: "column", md: "row" }}
justify="space-between"
align={{ base: "stretch", md: "start" }}
gap={{ base: 4, md: 6 }}
>
<VStack align="start" gap={{ base: 3, md: 4 }} flex={1}>
<HStack> <HStack>
<Icon <Icon
as={FaCalendarAlt} as={FaCalendarAlt}
color="blue.600" color="blue.600"
boxSize="24px" boxSize="24px"
/> />
<Text fontSize="2xl" fontWeight="bold" color="blue.800"> <Text
fontSize={{ base: "xl", md: "2xl" }}
fontWeight="bold"
color="blue.800"
>
{(meeting.calendar_metadata as any)?.title || {(meeting.calendar_metadata as any)?.title ||
"Live Meeting"} "Live Meeting"}
</Text> </Text>
@@ -214,26 +223,40 @@ export default function MeetingSelection({
{isOwner && {isOwner &&
(meeting.calendar_metadata as any)?.description && ( (meeting.calendar_metadata as any)?.description && (
<Text fontSize="lg" color="gray.700"> <Text
fontSize={{ base: "md", md: "lg" }}
color="gray.700"
>
{(meeting.calendar_metadata as any).description} {(meeting.calendar_metadata as any).description}
</Text> </Text>
)} )}
<HStack gap={8} fontSize="md" color="gray.600"> <Flex
gap={{ base: 4, md: 8 }}
fontSize={{ base: "sm", md: "md" }}
color="gray.600"
flexWrap="wrap"
>
<HStack> <HStack>
<Icon as={FaUsers} boxSize="20px" /> <Icon
as={FaUsers}
boxSize={{ base: "16px", md: "20px" }}
/>
<Text fontWeight="medium"> <Text fontWeight="medium">
{meeting.num_clients} participants {meeting.num_clients || 0} participant
{meeting.num_clients !== 1 ? "s" : ""}
</Text> </Text>
</HStack> </HStack>
<HStack> <HStack>
<Icon as={FaClock} boxSize="20px" /> <Icon
as={FaClock}
boxSize={{ base: "16px", md: "20px" }}
/>
<Text> <Text>
Started{" "}
{formatStartedAgo(new Date(meeting.start_date))} {formatStartedAgo(new Date(meeting.start_date))}
</Text> </Text>
</HStack> </HStack>
</HStack> </Flex>
{isOwner && {isOwner &&
(meeting.calendar_metadata as any)?.attendees && ( (meeting.calendar_metadata as any)?.attendees && (
@@ -269,16 +292,21 @@ export default function MeetingSelection({
)} )}
</VStack> </VStack>
<VStack gap={3}> <VStack gap={3} width={{ base: "full", md: "auto" }}>
<Button <Button
colorScheme="blue" colorScheme="blue"
size="xl" size={{ base: "lg", md: "xl" }}
fontSize="lg" fontSize={{ base: "md", md: "lg" }}
px={8} px={{ base: 6, md: 8 }}
py={6} py={{ base: 4, md: 6 }}
width={{ base: "full", md: "auto" }}
onClick={() => handleJoinDirect(meeting)} onClick={() => handleJoinDirect(meeting)}
> >
<Icon as={FaUsers} boxSize="20px" me={2} /> <Icon
as={FaUsers}
boxSize={{ base: "18px", md: "20px" }}
me={2}
/>
Join Now Join Now
</Button> </Button>
{isOwner && ( {isOwner && (
@@ -294,7 +322,7 @@ export default function MeetingSelection({
</Button> </Button>
)} )}
</VStack> </VStack>
</HStack> </Flex>
</Box> </Box>
))} ))}
</VStack> </VStack>
@@ -317,12 +345,17 @@ export default function MeetingSelection({
width="100%" width="100%"
bg="orange.50" bg="orange.50"
borderRadius="xl" borderRadius="xl"
p={8} p={{ base: 4, md: 8 }}
border="2px solid" border="2px solid"
borderColor="orange.200" borderColor="orange.200"
> >
<HStack justify="space-between" align="start"> <Flex
<VStack align="start" gap={4} flex={1}> direction={{ base: "column", md: "row" }}
justify="space-between"
align={{ base: "stretch", md: "start" }}
gap={{ base: 4, md: 6 }}
>
<VStack align="start" gap={{ base: 3, md: 4 }} flex={1}>
<HStack> <HStack>
<Icon <Icon
as={FaCalendarAlt} as={FaCalendarAlt}
@@ -330,7 +363,7 @@ export default function MeetingSelection({
boxSize="24px" boxSize="24px"
/> />
<Text <Text
fontSize="2xl" fontSize={{ base: "xl", md: "2xl" }}
fontWeight="bold" fontWeight="bold"
color="orange.800" color="orange.800"
> >
@@ -341,20 +374,34 @@ export default function MeetingSelection({
{isOwner && {isOwner &&
(meeting.calendar_metadata as any)?.description && ( (meeting.calendar_metadata as any)?.description && (
<Text fontSize="lg" color="gray.700"> <Text
fontSize={{ base: "md", md: "lg" }}
color="gray.700"
>
{(meeting.calendar_metadata as any).description} {(meeting.calendar_metadata as any).description}
</Text> </Text>
)} )}
<HStack gap={8} fontSize="md" color="gray.600"> <Flex
<Badge colorScheme="orange" fontSize="md" px={3} py={1}> gap={{ base: 2, md: 8 }}
fontSize={{ base: "sm", md: "md" }}
color="gray.600"
flexWrap="wrap"
align="center"
>
<Badge
colorScheme="orange"
fontSize={{ base: "sm", md: "md" }}
px={3}
py={1}
>
Starts in {minutesUntilStart} minute Starts in {minutesUntilStart} minute
{minutesUntilStart !== 1 ? "s" : ""} {minutesUntilStart !== 1 ? "s" : ""}
</Badge> </Badge>
<Text> <Text>
{formatDateTime(new Date(meeting.start_date))} {formatDateTime(new Date(meeting.start_date))}
</Text> </Text>
</HStack> </Flex>
{isOwner && {isOwner &&
(meeting.calendar_metadata as any)?.attendees && ( (meeting.calendar_metadata as any)?.attendees && (
@@ -390,16 +437,21 @@ export default function MeetingSelection({
)} )}
</VStack> </VStack>
<VStack gap={3}> <VStack gap={3} width={{ base: "full", md: "auto" }}>
<Button <Button
colorScheme="orange" colorScheme="orange"
size="xl" size={{ base: "lg", md: "xl" }}
fontSize="lg" fontSize={{ base: "md", md: "lg" }}
px={8} px={{ base: 6, md: 8 }}
py={6} py={{ base: 4, md: 6 }}
width={{ base: "full", md: "auto" }}
onClick={() => handleJoinUpcoming(meeting)} onClick={() => handleJoinUpcoming(meeting)}
> >
<Icon as={FaClock} boxSize="20px" me={2} /> <Icon
as={FaClock}
boxSize={{ base: "18px", md: "20px" }}
me={2}
/>
Join Early Join Early
</Button> </Button>
{isOwner && ( {isOwner && (
@@ -415,7 +467,7 @@ export default function MeetingSelection({
</Button> </Button>
)} )}
</VStack> </VStack>
</HStack> </Flex>
</Box> </Box>
); );
})} })}
@@ -428,7 +480,11 @@ export default function MeetingSelection({
<Text fontSize="lg" fontWeight="semibold" color="gray.700"> <Text fontSize="lg" fontWeight="semibold" color="gray.700">
Starting Soon Starting Soon
</Text> </Text>
<HStack gap={4} flexWrap="wrap"> <Flex
gap={4}
flexWrap="wrap"
direction={{ base: "column", sm: "row" }}
>
{upcomingMeetings.map((meeting) => { {upcomingMeetings.map((meeting) => {
const now = new Date(); const now = new Date();
const startTime = new Date(meeting.start_date); const startTime = new Date(meeting.start_date);
@@ -444,8 +500,8 @@ export default function MeetingSelection({
borderColor="orange.200" borderColor="orange.200"
borderRadius="lg" borderRadius="lg"
p={4} p={4}
minW="300px" minW={{ base: "100%", sm: "300px" }}
maxW="400px" maxW={{ base: "100%", sm: "400px" }}
_hover={{ borderColor: "orange.300", bg: "orange.50" }} _hover={{ borderColor: "orange.300", bg: "orange.50" }}
transition="all 0.2s" transition="all 0.2s"
> >
@@ -479,7 +535,7 @@ export default function MeetingSelection({
</Box> </Box>
); );
})} })}
</HStack> </Flex>
</VStack> </VStack>
)} )}