feat: overview mobile breakpoint

solana-labs · Jul 18, 2019 · d410fbf · d410fbf
1 parent fcb9828
commit d410fbf
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx b/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
@@ -57,7 +57,7 @@ const StatCards = () => {
     value: string | (() => React$Node),
     changes?: string,
   }) => (
-    <Grid key={title} item xs={3} zeroMinWidth>
+    <Grid key={title} item xs={12} sm={6} lg={3} zeroMinWidth>
       <Card title={title} value={value} changes={changes} />
     </Grid>
   );

diff --git a/src/v2/components/Dashboard/NetworkOverview/index.jsx b/src/v2/components/Dashboard/NetworkOverview/index.jsx
@@ -39,10 +39,10 @@ const NetworkOverview = () => {
       <div className={classes.root}>
         <SectionHeader title="Network Overview" />
         <Grid container spacing={2} className={classes.row}>
-          <Grid item xs={6}>
+          <Grid item xs={12} md={6}>
             <TPS />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} md={6}>
             <NodesMap />
           </Grid>
         </Grid>

diff --git a/src/v2/components/Dashboard/NetworkOverview/styles.js b/src/v2/components/Dashboard/NetworkOverview/styles.js
@@ -1,11 +1,14 @@
 import {makeStyles} from '@material-ui/core';
 
-export default makeStyles({
+export default makeStyles(theme => ({
   root: {
     padding: '40px 0',
     position: 'relative',
+    [theme.breakpoints.down('sm')]: {
+      paddingTop: 60,
+    },
   },
   row: {
     marginBottom: 8,
   },
-});
+}));
diff --git a/src/v2/components/Dashboard/ViewAll/index.jsx b/src/v2/components/Dashboard/ViewAll/index.jsx
@@ -1,5 +1,6 @@
 // @flow
-import {Container, Grid} from '@material-ui/core';
+import {Container, Grid, useTheme} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import React from 'react';
 import Button from 'v2/components/UI/Button';
 import SectionHeader from 'v2/components/UI/SectionHeader';
@@ -8,22 +9,24 @@ import useStyles from './styles';
 
 const ViewAll = () => {
   const classes = useStyles();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   return (
     <Container>
       <div className={classes.root}>
         <SectionHeader title="View All" />
-        <Grid container spacing={8}>
-          <Grid item xs={4}>
+        <Grid container spacing={isMobile ? 2 : 8}>
+          <Grid item xs={12} sm={4}>
             <Button variant="contained" size="large" fullWidth color="primary">
               View all transactions
             </Button>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={4}>
             <Button variant="contained" size="large" fullWidth color="primary">
               View all applications
             </Button>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={4}>
             <Button variant="contained" size="large" fullWidth color="primary">
               View all blocks
             </Button>