z1glr/golunteer
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fixed styling of events modal

Browse Source
This commit is contained in:
z1glr
2025-02-07 10:33:21 +00:00
parent 46c4d2beaf
commit f0e8e927fa
5 changed files with 38 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/MyEvents.tsx
View File

@@ -28,15 +28,13 @@ export default function MyEvents() {
}, },
}); });
console.debug(events);
return ( return (
<div> <div>
<h1 className="mb-4 text-center text-4xl">My Events</h1> <h1 className="mb-4 text-center text-4xl">My Events</h1>
{events.isLoading ? ( {events.isLoading ? (
<Loading /> <Loading />
) : events.items.length > 0 ? ( ) : events.items.length > 0 ? (
<div className="flex justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
{events.items.map((e) => ( {events.items.map((e) => (
<Event key={e.eventID} event={e}> <Event key={e.eventID} event={e}>
<AssignmentTable <AssignmentTable

2
client/src/app/PendingEvents.tsx
View File

@@ -36,7 +36,7 @@ export default function PendingEvents() {
{events.isLoading ? ( {events.isLoading ? (
<Loading /> <Loading />
) : events.items.length > 0 ? ( ) : events.items.length > 0 ? (
<div className="flex justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
{events.items.map((e) => ( {events.items.map((e) => (
<Event key={e.eventID} event={e}> <Event key={e.eventID} event={e}>
<AvailabilitySelector event={e} className="mt-auto" /> <AvailabilitySelector event={e} className="mt-auto" />

2
client/src/app/events/page.tsx
View File

@@ -67,7 +67,7 @@ export default function Events() {
<Tab key="assigned" title="Assigned" /> <Tab key="assigned" title="Assigned" />
</Tabs> </Tabs>
<div className="flex flex-wrap justify-center gap-4"> <div className="mx-auto flex flex-wrap gap-4">
{events.items.filter(showEvent).map((e) => ( {events.items.filter(showEvent).map((e) => (
<Event key={e.eventID} event={e}> <Event key={e.eventID} event={e}>
<AssignmentTable <AssignmentTable

2
client/src/app/page.tsx
View File

@@ -3,7 +3,7 @@ import PendingEvents from "./PendingEvents";
export default function Overview() { export default function Overview() {
return ( return (
<div className="relative mx-auto flex-1 grid-cols-2 gap-8 lg:grid lg:max-w-screen-lg"> <div className="relative mx-auto flex-1 grid-cols-2 gap-8 lg:grid lg:max-w-screen-xl">
<MyEvents /> <MyEvents />
<PendingEvents /> <PendingEvents />
</div> </div>

5
client/src/components/Event/AvailabilitySelector.tsx
View File

@@ -1,6 +1,6 @@
import { Select, Selection, SelectItem } from "@heroui/react"; import { Select, Selection, SelectItem } from "@heroui/react";
import AvailabilityChip from "../AvailabilityChip"; import AvailabilityChip from "../AvailabilityChip";
import { apiCall, getAvailabilities } from "@/lib"; import { apiCall, classNames, getAvailabilities } from "@/lib";
import { useAsyncList } from "@react-stately/data"; import { useAsyncList } from "@react-stately/data";
import { EventAvailability } from "@/Zustand"; import { EventAvailability } from "@/Zustand";
import { useState } from "react"; import { useState } from "react";
@@ -47,11 +47,11 @@ export default function AvailabilitySelector({
} }
return ( return (
<div className={classNames(className, "w-full")}>
<Select <Select
items={availabilities.items} items={availabilities.items}
label={<h4>Availability</h4>} label={<h4>Availability</h4>}
variant="bordered" variant="bordered"
className={className}
classNames={{ label: "text-base", trigger: "py-4" }} classNames={{ label: "text-base", trigger: "py-4" }}
labelPlacement="outside" labelPlacement="outside"
placeholder="Set availability" placeholder="Set availability"
@@ -79,5 +79,6 @@ export default function AvailabilitySelector({
</SelectItem> </SelectItem>
)} )}
</Select> </Select>
</div>
); );
} }