Dashboard Touch ups for ultra small screen (#1936)

* push marginx * update margins to sides for mobile & make ultra small screen size(300 px) responsive * add higher fontsize for ultra small * remove comments * refactor to reduce cognitive complexity * update
bcgov · Aug 1, 2023 · fd91a5b · fd91a5b
1 parent a9984bf
commit fd91a5b
Showing 1 changed file with 45 additions and 7 deletions.
diff --git a/met-web/src/components/publicDashboard/SubmissionTrend/SubmissionTrend.tsx b/met-web/src/components/publicDashboard/SubmissionTrend/SubmissionTrend.tsx
@@ -35,6 +35,7 @@ export const dashboardCustomStyles = {
 
 const SubmissionTrend = ({ engagement, engagementIsLoading }: SubmissionTrendProps) => {
     const isTablet = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+    const isExtraSmall = useMediaQuery('(max-width:299px)');
     const isBetweenMdAndLg = useMediaQuery((theme: Theme) => theme.breakpoints.between('lg', 'xl'));
     const HEIGHT = isTablet ? 200 : 250;
     const [data, setData] = useState(createDefaultByMonthData());
@@ -43,6 +44,12 @@ const SubmissionTrend = ({ engagement, engagementIsLoading }: SubmissionTrendPro
     const [chartBy, setChartBy] = React.useState('monthly');
     const [fromDate, setFromDate] = React.useState<Dayjs | null>(null);
     const [toDate, setToDate] = React.useState<Dayjs | null>(null);
+    const marginXStyling = { marginX: isTablet ? 1 : 0 };
+    const extraSmallStyling = {
+        fontSize: isExtraSmall ? '12px' : 'inherit',
+        width: isExtraSmall ? '40%' : 'auto',
+    };
+
     const fetchData = async () => {
         setIsLoading(true);
         try {
@@ -137,10 +144,23 @@ const SubmissionTrend = ({ engagement, engagementIsLoading }: SubmissionTrendPro
                             rowSpacing={isTablet ? 1 : 0}
                             md={isBetweenMdAndLg ? 3 : 4}
                         >
-                            <Grid container item alignItems={'center'} justifyContent={'center'} xs={12} sx={{ mb: 1 }}>
+                            <Grid
+                                container
+                                item
+                                alignItems={'center'}
+                                justifyContent={'center'}
+                                xs={12}
+                                sx={{ ...marginXStyling, mb: 1 }}
+                            >
                                 <MetLabel>Select Date Range </MetLabel>
                             </Grid>
-                            <Grid container item sx={{ mb: 1 }} direction="column" alignItems="center">
+                            <Grid
+                                container
+                                item
+                                sx={{ mb: 1, ...marginXStyling }}
+                                direction="column"
+                                alignItems="center"
+                            >
                                 <Stack flexDirection={'column'} alignItems={'flex-start'}>
                                     <MetLabel>From: </MetLabel>
                                     <DatePicker
@@ -160,7 +180,13 @@ const SubmissionTrend = ({ engagement, engagementIsLoading }: SubmissionTrendPro
                                     />
                                 </Stack>
                             </Grid>
-                            <Grid container item sx={{ mb: 1 }} direction="column" alignItems="center">
+                            <Grid
+                                container
+                                item
+                                sx={{ mb: 1, ...marginXStyling }}
+                                direction="column"
+                                alignItems="center"
+                            >
                                 <Stack flexDirection={'column'} alignItems={'flex-start'}>
                                     <MetLabel>To: </MetLabel>
                                     <DatePicker
@@ -182,7 +208,11 @@ const SubmissionTrend = ({ engagement, engagementIsLoading }: SubmissionTrendPro
                             </Grid>
                             <Grid container item justifyContent="center" alignItems="center">
                                 <SecondaryButton
-                                    sx={{ ...dashboardCustomStyles.primaryButton, width: 'auto' }}
+                                    sx={{
+                                        ...dashboardCustomStyles.primaryButton,
+                                        ...extraSmallStyling,
+                                        width: isExtraSmall ? '80%' : '100%',
+                                    }}
                                     onClick={clearDates}
                                 >
                                     Reset All Filters
@@ -201,16 +231,24 @@ const SubmissionTrend = ({ engagement, engagementIsLoading }: SubmissionTrendPro
                                 width="100%"
                                 justifyContent="flex-end"
                                 alignItems={'flex-end'}
+                                mb={1}
                             >
                                 <ToggleButtonGroup
                                     value={chartBy}
                                     exclusive
                                     onChange={handleToggleChange}
                                     size={isTablet ? 'small' : 'medium'}
-                                    sx={dashboardCustomStyles.toggleGroup}
+                                    sx={{
+                                        ...dashboardCustomStyles.toggleGroup,
+                                        ...marginXStyling,
+                                    }}
                                 >
-                                    <MetToggleButton value="weekly">Weekly</MetToggleButton>
-                                    <MetToggleButton value="monthly">Monthly</MetToggleButton>
+                                    <MetToggleButton value="weekly" sx={extraSmallStyling}>
+                                        Weekly
+                                    </MetToggleButton>
+                                    <MetToggleButton value="monthly" sx={extraSmallStyling}>
+                                        Monthly
+                                    </MetToggleButton>
                                 </ToggleButtonGroup>
                             </Stack>
                             <If condition={!isLoading}>