FIXED CARD GROW

on search page, cards now grow to fill vertical when one card in row is taller than standard
swat-sccs · Apr 21, 2024 · b280c25 · b280c25
1 parent b5adb27
commit b280c25
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);