Tweak styles for mobile

aqualinkorg · Nov 29, 2024 · 2d6aa60 · 2d6aa60
1 parent 1870a94
commit 2d6aa60
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyDetails.tsx b/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyDetails.tsx
@@ -71,12 +71,14 @@ const ReefCheckSurveyDetailsComponent = ({
   classes,
 }: ReefCheckSurveyDetailsProps) => {
   const { survey, loading, error } = useSelector(reefCheckSurveySelector);
+  const date = survey?.date ? new Date(survey.date).toLocaleDateString() : '';
 
   if (error) {
     return null;
   }
   return (
     <Paper className={classes.paper}>
+      <Typography className={classes.title}>{date} REEF CHECK SURVEY DATA</Typography>
       <Box className={classes.container}>
         {surveyFields.map(({ field, label, formatter }) => (
           <Grid key={field} container className={classes.item}>
@@ -105,16 +107,25 @@ const styles = (theme: Theme) =>
       padding: 16,
       color: theme.palette.text.secondary,
     },
+    title: {
+      borderBottom: '1px solid black',
+    },
     skeleton: {
       backgroundColor: '#E2E2E2',
     },
     container: {
       display: 'inline-block',
-      columnCount: 3,
-      columnGap: 0,
       width: '100%',
       borderTop: '1px solid #E0E0E0',
       borderLeft: '1px solid #E0E0E0',
+      columnGap: 0,
+      columnCount: 3,
+      [theme.breakpoints.down('md')]: {
+        columnCount: 2,
+      },
+      [theme.breakpoints.down('sm')]: {
+        columnCount: 1,
+      },
     },
     item: {
       display: 'flex',

diff --git a/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveySummary.tsx b/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveySummary.tsx
@@ -121,6 +121,7 @@ const styles = (theme: Theme) =>
       padding: 12,
       color: theme.palette.text.secondary,
       display: 'flex',
+      flexWrap: 'wrap',
       gap: 32,
     },
     skeleton: {
@@ -130,15 +131,18 @@ const styles = (theme: Theme) =>
       padding: 12,
       borderRadius: 8,
       border: '1px solid #E0E0E0',
+      [theme.breakpoints.down('xs')]: {
+        width: '100%',
+      },
     },
     note: {
+      flex: '1 1 300px',
       padding: 12,
       borderRadius: 8,
       backgroundColor: '#F5F6F6',
     },
     observationBox: {
       gap: 32,
-      flexShrink: 0,
     },
     columnSpaceBetween: {
       display: 'flex',

diff --git a/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/index.tsx b/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/index.tsx
@@ -44,7 +44,7 @@ export const ReefCheckSurveyViewPage = () => {
       <NavBar searchLocation />
 
       <Box bgcolor="#F5F6F6" paddingX={4}>
-        <Box>
+        <Box marginY={2}>
           <Button
             color="primary"
             startIcon={<ArrowBack />}
@@ -57,29 +57,29 @@ export const ReefCheckSurveyViewPage = () => {
           </Button>
         </Box>
         <Grid container direction="column" spacing={2}>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveySummary />
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveyDetails />
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveyOrganismsTable
               title="Fish"
               description="Fish data is collected along four 5 meter wide by 20 meter long segments (100m²) of a 100 meter transect line for a total survey area of 400 square meters. Fish seen up to 5 meters above the line are included."
               columns={fishColumns}
               filter={(row) => row.type === 'Fish'}
             />
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveyOrganismsTable
               title="Invertebrate"
               description="Invertebrate data is collected along four 5 meter wide by 20 meter long segments (100m²) of a 100 meter transect line for a total survey area of 400 square meters."
               columns={invertebratesColumns}
               filter={(row) => row.type === 'Invertebrate'}
             />
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveyOrganismsTable
               title="Impact"
               description="0-3 scale. 0 = none, 1 = low (1 piece), 2 = medium (2-4 pieces) and 3 = high (5+ pieces)"
@@ -89,7 +89,7 @@ export const ReefCheckSurveyViewPage = () => {
               }
             />
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveyOrganismsTable
               title="Bleaching and Coral Diseases"
               description="Black band, white band, White Plague, and Aspergillosis are coral diseases."
@@ -99,14 +99,14 @@ export const ReefCheckSurveyViewPage = () => {
               }
             />
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveyOrganismsTable
               title="Rare Animal"
               columns={rareAnimalsColumns}
               filter={(row) => row.type === 'Rare Animal'}
             />
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <ReefCheckSurveySubstrates
               title="Reef Structure and Composition"
               columns={reefStructureColumns}