# EDIT - responsive main page

morishjs · May 19, 2019 · 78a6b92 · 78a6b92
1 parent 0d7cf70
commit 78a6b92
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 19 deletions.
diff --git a/support-station-web/public/index.html b/support-station-web/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <style type="text/css"> html, body { height:100%; } </style>
+    <style type="text/css"> html, body { height:100%; background: white; } </style>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

diff --git a/support-station-web/src/components/Main/Main.js b/support-station-web/src/components/Main/Main.js
@@ -6,12 +6,6 @@ import TopContent from './TopContent';
 import MainContent from './MainContent';
 
 const styles = theme => ({
-  root: {
-    height: '100%',
-    minHeight: '1000px',
-    backgroundColor: '#ffffff',
-    boxShadow: '1px 0 10px 0 rgba(0, 0, 0, 0.03)',
-  },
   content: {
     padding: theme.spacing.unit * 4,
   },
@@ -22,11 +16,9 @@ function Main(props) {
   const { classes } = props;
 
   return (
-    <Grid container spacing={0} direction="column" className={classes.root}>
-      <Grid container direction="column" className={classes.content}>
-        <TopContent />
-        <MainContent />
-      </Grid>
+    <Grid container wrap="nowrap" direction="column" className={classes.content}>
+      <TopContent />
+      <MainContent />
     </Grid>
   );
 }

diff --git a/support-station-web/src/components/Main/MainContent.js b/support-station-web/src/components/Main/MainContent.js
@@ -106,7 +106,7 @@ class MainContent extends Component {
           {petitions.length === 0 ? <CircularProgress /> : ''}
           {
             petitions.map(petition => (
-              <Grid item xs={4} key={petition.id}>
+              <Grid item xs={12} sm={4} key={petition.id}>
                 <PetitionCard
                   id={petition.id}
                   title={petition.title}

diff --git a/support-station-web/src/components/Main/TopContent.js b/support-station-web/src/components/Main/TopContent.js
@@ -56,7 +56,7 @@ class TopContent extends Component {
           {petitions.length === 0 ? <CircularProgress /> : ''}
           {
             petitions.map(petition => (
-              <Grid item xs={4} key={petition.id}>
+              <Grid item xs={12} sm={4} key={petition.id}>
                 <PetitionCard
                   id={petition.id}
                   title={petition.title}

diff --git a/support-station-web/src/components/Menu/Menu.js b/support-station-web/src/components/Menu/Menu.js
@@ -3,14 +3,16 @@ import { withStyles } from '@material-ui/core/styles';
 import { Grid } from '@material-ui/core';
 import { ViewQuilt, Timer, TimerOff } from '@material-ui/icons';
 
-const styles = () => ({
+const styles = theme => ({
   root: {
     height: '100%',
     backgroundColor: '#e8eef7',
     boxShadow: '1px 0 10px 0 rgba(0, 0, 0, 0.03)',
+    [theme.breakpoints.down('sm')]: {
+      height: 'auto',
+    },
   },
   logo: {
-    height: '10vh',
     textAlign: 'center',
     boxShadow: '1px 0 3px 0 rgba(0, 0, 0, 0.1)',
   },
@@ -21,6 +23,9 @@ const styles = () => ({
   subMenu: {
     textAlign: 'center',
     marginTop: '28px',
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
   },
   icon: {
     color: '#94979b',

diff --git a/support-station-web/src/pages/Home.js b/support-station-web/src/pages/Home.js
@@ -21,11 +21,11 @@ function Home(props) {
     );
   return (
     <Fragment>
-      <Grid container spacing={0}>
-        <Grid item xs>
+      <Grid container direction="row" spacing={0} style={{ height: '100vh' }}>
+        <Grid item xs={12} md={2}>
           <Menu />
         </Grid>
-        <Grid item xs={10}>
+        <Grid item xs={12} md>
           <Main />
         </Grid>
       </Grid>