update media queries

sitek94 · Dec 14, 2020 · b99ae70 · b99ae70
1 parent 1c17d6b
commit b99ae70
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 37 deletions.
diff --git a/src/components/habit-list.js b/src/components/habit-list.js
@@ -55,31 +55,49 @@ function HabitListItem({ habit }) {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.only('xs'));
 
+  // Name and description
+  const text = <ListItemText primary={name} secondary={description} />;
+
+  // Frequency
+  const frequencyChips = (
+    <Box
+      sx={{
+        mr: 1,
+      }}
+    >
+      {weekdays.map((day, i) => (
+        <Chip
+          size={isXs ? 'small' : 'medium'}
+          key={day}
+          label={day.slice(0, 1)}
+          color={frequency.includes(i) ? 'primary' : 'default'}
+        />
+      ))}
+    </Box>
+  );
+
   return (
     <ListItem button>
       {/* TODO: Let user choose icon */}
       {/* <ListItemIcon>
         <FolderIcon />
       </ListItemIcon> */}
 
-      {/* Name and description */}
-      <ListItemText primary={name} secondary={description} />
-
-      {/* Frequency */}
-      <Box
-        sx={{
-          mr: 1,
-        }}
-      >
-        {weekdays.map((day, i) => (
-          <Chip
-            size={isXs ? 'small' : 'medium'}
-            key={day}
-            label={day.slice(0, 1)}
-            color={frequency.includes(i) ? 'primary' : 'default'}
-          />
-        ))}
-      </Box>
+      {/* On small screens display frequency below the text */}
+      {isXs && (
+        <Box sx={{ flex: 1 }}>
+          {text}
+          {frequencyChips}
+        </Box>
+      )}
+
+      {/* Small screens and up display frequency next to the text */}
+      {!isXs && (
+        <>
+          {text}
+          {frequencyChips}
+        </>
+      )}
 
       {/* Edit link */}
       <Tooltip title={t('editHabit')}>

diff --git a/src/components/habits-table.js b/src/components/habits-table.js
@@ -112,7 +112,7 @@ function HabitsTable({ habits, checkmarks, dates }) {
             {datesCells.map(({ date, label }) => (
               <TableCell key={date} align="center">
                 {isToday(date) ? (
-                  <Typography color="primary">{label}</Typography>
+                  <Typography color="primary" noWrap>{label}</Typography>
                 ) : (
                   label
                 )}

diff --git a/src/screens/dashboard.js b/src/screens/dashboard.js
@@ -65,11 +65,12 @@ function DashboardScreen() {
 
   /**
    * Temporary fix
-   * 
+   *
    * Cancelled query is throwing `CancelledError`. In V3 cancellation will not throw an error anymore.
    * https://github.com/tannerlinsley/react-query/discussions/1179
    */
-  const isCancelledError = checkmarksError && checkmarksError.hasOwnProperty('silent');
+  const isCancelledError =
+    checkmarksError && checkmarksError.hasOwnProperty('silent');
 
   // Ignore cancelled errors
   if (error && !isCancelledError) {
@@ -124,25 +125,27 @@ function DashboardScreen() {
   return (
     <Box sx={{ height: '100%' }} clone>
       <Container disableGutters>
-        {/* Mobile screens */}
+        {/* extra small screens */}
         <Hidden smUp>
-          <Grid container spacing={1}>
-            <Grid item xs={12}>
-              {weekPicker}
-            </Grid>
-            <Grid item xs={12}>
-              {habitsTable}
-            </Grid>
-            <Grid item xs={12}>
-              {performancePanel}
-            </Grid>
-            <Grid item xs={12}>
-              {barChart}
+          <Box sx={{ overflow: 'hidden' }}>
+            <Grid container spacing={1}>
+              <Grid item xs={12}>
+                {weekPicker}
+              </Grid>
+              <Grid item xs={12}>
+                {habitsTable}
+              </Grid>
+              <Grid item xs={12}>
+                {performancePanel}
+              </Grid>
+              <Grid item xs={12}>
+                {barChart}
+              </Grid>
             </Grid>
-          </Grid>
+          </Box>
         </Hidden>
 
-        {/* Small screens */}
+        {/* small screens */}
         <Hidden smDown mdUp>
           <Box sx={{ p: 1 }}>
             <Grid container spacing={1}>
@@ -162,7 +165,7 @@ function DashboardScreen() {
           </Box>
         </Hidden>
 
-        {/* Large screens up */}
+        {/* medium screens and up */}
         <Hidden mdDown>
           <Box sx={{ p: 2 }}>
             <Grid container spacing={2}>