Merge pull request #43 from Clubs-Council-IIITH/responsiveness

Add responsiveness to the datagrid tables and other UI changes
Clubs-Council-IIITH · Apr 2, 2024 · 6ea638b · 6ea638b
2 parents 246e3e4 + c8186d5
commit 6ea638b
Show file tree

Hide file tree

Showing 9 changed files with 420 additions and 261 deletions.
diff --git a/src/app/manage/clubs/page.jsx b/src/app/manage/clubs/page.jsx
@@ -34,7 +34,7 @@ export default async function ManageClubs() {
           variant="contained"
           startIcon={<Icon variant="add" />}
         >
-          New Club
+          New Club/Body
         </Button>
       </Stack>
 

diff --git a/src/app/manage/members/[id]/page.jsx b/src/app/manage/members/[id]/page.jsx
@@ -44,7 +44,11 @@ export default async function ManageMember({ params }) {
         <MemberActionsList member={member} user={user} />
         <Grid container spacing={2} mt={4}>
           <Grid item xs={12}>
-            <Stack direction="row" alignItems="center" spacing={4}>
+            <Stack
+              direction={{ xs: "column", lg: "row" }}
+              alignItems="center"
+              spacing={4}
+            >
               <UserImage
                 image={userMeta.img}
                 name={userProfile.firstName}
@@ -85,7 +89,7 @@ export default async function ManageMember({ params }) {
                 textTransform="uppercase"
                 gutterBottom
               >
-                Club
+                Club/Body
               </Typography>
               <ClubButton clubid={id?.split(encodeURIComponent(":"))[0]} />
             </Grid>

diff --git a/src/components/clubs/ClubsTable.jsx b/src/components/clubs/ClubsTable.jsx
@@ -2,77 +2,118 @@
 
 import { useRouter } from "next/navigation";
 
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { DataGrid, GridLogicOperator } from "@mui/x-data-grid";
 
 import Tag from "components/Tag";
 import QuickSearchToolbar from "components/QuickSearchToolbar";
 
 import ClubLogo from "components/clubs/ClubLogo";
 
-const columns = [
-  {
-    field: "img",
-    headerName: "",
-    flex: 1,
-    valueGetter: ({ row }) => ({ name: row.name, logo: row.logo }),
-    renderCell: ({ value }) => (
-      <ClubLogo name={value.name} logo={value.logo} width={32} height={32} />
-    ),
-  },
-  {
-    field: "code",
-    headerName: "Code",
-    flex: 3,
-  },
-  {
-    field: "name",
-    headerName: "Name",
-    flex: 6,
-  },
-  {
-    field: "email",
-    headerName: "Email",
-    flex: 6,
-    renderCell: ({ value }) => (
-      <Box textTransform="lowercase" fontSize="0.9em" fontFamily="monospace">
-        {value}
-      </Box>
-    ),
-  },
-  {
-    field: "category",
-    headerName: "Category",
-    flex: 2,
-    valueGetter: ({ row }) => ({
-      category: row.category,
-      studentBody: row.studentBody,
-    }),
-    renderCell: ({ value }) => (
-      <Box textTransform="capitalize">
-        {value.studentBody ? "Student Body" : value.category}
-      </Box>
-    ),
-  },
-  {
-    field: "state",
-    headerName: "State",
-    align: "center",
-    headerAlign: "center",
-    flex: 2,
-    renderCell: ({ value }) => (
-      <Tag label={value} color={value === "active" ? "success" : "error"} />
-    ),
-  },
-];
-
 export default function ClubsTable({ clubs }) {
   const router = useRouter();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const columns = [
+    {
+      field: "img",
+      headerName: "",
+      flex: 1,
+      valueGetter: ({ row }) => ({ name: row.name, logo: row.logo }),
+      renderCell: ({ value }) => (
+        <ClubLogo name={value.name} logo={value.logo} width={32} height={32} />
+      ),
+    },
+    ...(isMobile
+      ? []
+      : [
+          {
+            field: "code",
+            headerName: "Code",
+            flex: 3,
+          },
+        ]),
+    {
+      field: "name",
+      headerName: "Name",
+      flex: isMobile ? null : 6,
+      renderCell: (p) =>
+        p.value ? (
+          <Typography
+            variant="body2"
+            style={{
+              overflowWrap: "break-word",
+              wordWrap: "break-word",
+              msWordBreak: "break-all",
+              wordBreak: "break-all",
+              msHyphens: "auto",
+              MozHyphens: "auto",
+              WebkitHyphens: "auto",
+              hyphens: "auto",
+            }}
+          >
+            {p.value}
+          </Typography>
+        ) : (
+          p.value
+        ),
+    },
+    ...(isMobile
+      ? []
+      : [
+          {
+            field: "email",
+            headerName: "Email",
+            flex: 6,
+            renderCell: ({ value }) => (
+              <Box
+                textTransform="lowercase"
+                fontSize="0.9em"
+                fontFamily="monospace"
+              >
+                {value}
+              </Box>
+            ),
+          },
+        ]),
+    {
+      field: "category",
+      headerName: "Category",
+      flex: isMobile ? null : 2,
+      valueGetter: ({ row }) => ({
+        category: row.category,
+        studentBody: row.studentBody,
+      }),
+      renderCell: ({ value }) => (
+        <Box textTransform="capitalize">
+          {value.studentBody ? "Student Body" : value.category}
+        </Box>
+      ),
+    },
+    {
+      field: "state",
+      headerName: "State",
+      align: "center",
+      headerAlign: "center",
+      flex: isMobile ? null : 2,
+      renderCell: ({ value }) => (
+        <Tag
+          label={value}
+          color={value === "active" ? "success" : "error"}
+          sx={{ my: 2 }}
+        />
+      ),
+    },
+  ];
 
   if (!clubs) return null;
   return (
     <DataGrid
       autoHeight
+      getRowHeight={() => (isMobile ? "auto" : "none")}
       rows={clubs}
       columns={columns}
       getRowId={(r) => r.cid}

diff --git a/src/components/events/EventForm.jsx b/src/components/events/EventForm.jsx
@@ -222,12 +222,12 @@ export default function EventForm({
       typeof formData.poster === "string"
         ? formData.poster
         : Array.isArray(formData.poster) && formData.poster.length > 0
-          ? await uploadFile(formData.poster[0], "image")
-          : null;
+        ? await uploadFile(formData.poster[0], "image")
+        : null;
 
     // convert dates to ISO strings
     data.datetimeperiod = formData.datetimeperiod.map((d) =>
-      new Date(d).toISOString(),
+      new Date(d).toISOString()
     );
 
     // convert budget to array of objects with only required attributes
@@ -488,7 +488,7 @@ export default function EventForm({
                   fullWidth
                   onClick={() =>
                     handleSubmit((data) =>
-                      onSubmit(data, { shouldSubmit: true }),
+                      onSubmit(data, { shouldSubmit: true })
                     )()
                   }
                   disabled={budgetEditing}
@@ -735,6 +735,7 @@ function EventAudienceSelect({ control }) {
         {...field}
         color="primary"
         onChange={(u, v) => handleChange(u, v)}
+        sx={{ display: "flex", flexWrap: "wrap" }}
       >
         {Object.keys(audienceMap).map((key) => (
           <ToggleButton disableRipple key={key} value={key}>