From b280c25c01032d218474042a24f8ad8f80b38cce Mon Sep 17 00:00:00 2001 From: Adrian <aadr19@sccs.swarthmore.edu> Date: Sun, 21 Apr 2024 19:41:16 -0400 Subject: [PATCH] FIXED CARD GROW on search page, cards now grow to fill vertical when one card in row is taller than standard --- app/globals.css | 3 --- components/card.tsx | 2 +- components/cardbody.tsx | 4 ++-- components/pagebody.tsx | 4 ++-- 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/globals.css b/app/globals.css index 388f669..e5598cc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -130,9 +130,6 @@ select { } /* cardbody.tsx, card.tsx, userimage.tsx */ -.margin-cardbody { - margin-bottom: 20px; -} .rounded-lg { border-radius: 16px; } diff --git a/components/card.tsx b/components/card.tsx index f0b88bb..858a7e1 100644 --- a/components/card.tsx +++ b/components/card.tsx @@ -7,7 +7,7 @@ export default function Card(props: StudentInfo | any) { //probably can just use props -abhi if (props.id && props.showProfile) { return ( - <div className="align-items-center bg-white rounded-lg pt-3 pb-2 cont shadow-sm"> + <div className="align-items-center bg-white rounded-lg pt-3 pb-2 cont shadow-sm flex-fill flex-grow-1 h-100"> <UserImage photo_path={props.showPicture ? props.photo_path : "/placeholder.jpg"} //NEWPHOTO = {NEWPHOTO} diff --git a/components/cardbody.tsx b/components/cardbody.tsx index 49d2899..968e6ab 100644 --- a/components/cardbody.tsx +++ b/components/cardbody.tsx @@ -11,10 +11,10 @@ export default function CardBody(props: CardBodyProps) { if (filteredData) { return ( <div className="container"> - <div className="row"> + <div className="row flex"> { use(filteredData).map((item, index) => ( - <div className="col-6 col-md-4 col-lg-3 gy-4"> + <div className="col-6 col-md-4 col-lg-3 gy-4 flex-fill flex-grow-1 h-100"> <Card key={index} {...item} /> </div> )) diff --git a/components/pagebody.tsx b/components/pagebody.tsx index 4549ae8..36fe014 100644 --- a/components/pagebody.tsx +++ b/components/pagebody.tsx @@ -43,7 +43,7 @@ async function filterData(searchParams: { query?: string; filters?: string }) { '%${filter}%' OR DORM_ROOM LIKE '%${filter}%' OR USER_ID LIKE \ '%${filter}%'`; }) - .join(" OR ") + .join(") AND (") : ""; if (filters[0]) { @@ -53,7 +53,7 @@ async function filterData(searchParams: { query?: string; filters?: string }) { return `GRAD_YEAR LIKE '%${filter}%' OR DORM LIKE \ '%${filter}%' OR DORM_ROOM LIKE '%${filter}%'`; }) - .join(" OR "); + .join(") AND ("); } console.log(filterString);