From 1579439161a358da58fc3c937e76736179eb8d95 Mon Sep 17 00:00:00 2001
From: Alexander Hauenstein <alexander.hauenstein@gmx.net>
Date: Mon, 20 Aug 2018 10:09:04 +0200
Subject: [PATCH 1/2] make app responsive

---
 src/App.tsx                   | 10 +++++++---
 src/components/TodoDialog.tsx |  2 +-
 src/components/TodoTable.tsx  | 18 +++++++++---------
 src/pages/HomePage.tsx        |  2 ++
 src/pages/TodoPage.tsx        | 28 ++++++++++++++++++++--------
 src/responsive.ts             | 19 +++++++++++++++++++
 6 files changed, 58 insertions(+), 21 deletions(-)
 create mode 100644 src/responsive.ts

diff --git a/src/App.tsx b/src/App.tsx
index df0b229..a9b395a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { AppBar, Badge, createStyles, Divider, Drawer, Hidden, IconButton, List, ListItem, ListItemIcon, ListItemText, Theme, Toolbar, Typography, WithStyles, withStyles } from '@material-ui/core';
+import withWidth, { WithWidthProps } from '@material-ui/core/withWidth';
 import TodoIcon from '@material-ui/icons/FormatListNumbered';
 import HomeIcon from '@material-ui/icons/Home';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -10,10 +11,11 @@ import { Todo } from './model/model';
 import HomePage from './pages/HomePage';
 import TodoPage from './pages/TodoPage';
 import { RootState } from './reducers/index';
+import { isSmartphone } from './responsive';
 import withRoot from './withRoot';
 
 export namespace App {
-    export interface Props extends RouteComponentProps<void>, WithStyles<typeof styles> {
+    export interface Props extends RouteComponentProps<void>, WithStyles<typeof styles>, WithWidthProps {
         todoList: Todo[];
     }
 
@@ -40,6 +42,8 @@ class App extends React.Component<App.Props, App.State> {
 
     render() {
 
+        const { width } = this.props;
+
         let drawer = (
             <div>
                 <div className={this.props.classes.drawerHeader} />
@@ -79,7 +83,7 @@ class App extends React.Component<App.Props, App.State> {
                                 >
                                     <MenuIcon />
                                 </IconButton>
-                                <Typography variant="title" color="inherit" noWrap>
+                                <Typography variant="title" color="inherit" noWrap={!isSmartphone(width)}>
                                     Create-React-App with Material-UI, Typescritpt, Redux and Routing
                             </Typography>
                             </Toolbar>
@@ -190,4 +194,4 @@ function mapStateToProps(state: RootState) {
     };
 }
 
-export default (withRoot(withStyles(styles)<{}>(connect(mapStateToProps)(App))));
+export default (withRoot(withStyles(styles)<{}>(connect(mapStateToProps)(withWidth()(App)))));
diff --git a/src/components/TodoDialog.tsx b/src/components/TodoDialog.tsx
index de858fa..edf25df 100644
--- a/src/components/TodoDialog.tsx
+++ b/src/components/TodoDialog.tsx
@@ -63,7 +63,7 @@ class TodoDialog extends React.Component<TodoDialog.Props> {
 
 const styles = (theme: Theme) => createStyles({
     textField: {
-        width: 400,
+        width: '80%',
         margin: 20
     }
 });
diff --git a/src/components/TodoTable.tsx b/src/components/TodoTable.tsx
index 3bfe5b9..8f84c99 100644
--- a/src/components/TodoTable.tsx
+++ b/src/components/TodoTable.tsx
@@ -33,9 +33,9 @@ class TodoTable extends React.Component<TodoTable.Props> {
                 <Table className={classes.table}>
                     <TableHead>
                         <TableRow>
-                            <TableCell>Completed</TableCell>
-                            <TableCell>Text</TableCell>
-                            <TableCell>Delete</TableCell>
+                            <TableCell padding="dense">Completed</TableCell>
+                            <TableCell padding="dense">Text</TableCell>
+                            <TableCell padding="dense">Delete</TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>
@@ -46,11 +46,11 @@ class TodoTable extends React.Component<TodoTable.Props> {
                                     hover
                                     onClick={event => this.onRowClick(n)}
                                 >
-                                    <TableCell padding="checkbox">
+                                    <TableCell padding="dense">
                                         <Checkbox checked={n.completed} />
                                     </TableCell>
-                                    <TableCell>{n.text}</TableCell>
-                                    <TableCell padding="checkbox">
+                                    <TableCell padding="dense">{n.text}</TableCell>
+                                    <TableCell padding="dense">
                                         <IconButton
                                             aria-label="Delete"
                                             color="default"
@@ -71,12 +71,12 @@ class TodoTable extends React.Component<TodoTable.Props> {
 
 const styles = (theme: Theme) => createStyles({
     paper: {
-        maxWidth: 1000,
-        minWidth: 1000,
+        width: '100%',
+        minWidth: 260,
         display: 'inline-block'
     },
     table: {
-        maxWidth: 1000,
+        width: '100%'
     },
 });
 
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index bbb347b..615b7f0 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -28,6 +28,8 @@ const styles = (theme: Theme) => createStyles({
   root: {
     textAlign: 'center',
     paddingTop: theme.spacing.unit * 20,
+    paddingLeft: 15,
+    paddingRight: 15,
   },
 });
 
diff --git a/src/pages/TodoPage.tsx b/src/pages/TodoPage.tsx
index 557f13d..9ea2bd0 100644
--- a/src/pages/TodoPage.tsx
+++ b/src/pages/TodoPage.tsx
@@ -1,4 +1,5 @@
-import { Button, createStyles, Grid, Theme, Typography, WithStyles, withStyles } from '@material-ui/core';
+import { Button, createStyles, Grid, Theme, Typography, WithStyles, withStyles, withWidth } from '@material-ui/core';
+import { WithWidthProps } from '@material-ui/core/withWidth';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { RouteComponentProps } from 'react-router';
@@ -8,9 +9,10 @@ import TodoTable from '../components';
 import TodoDialog from '../components/TodoDialog';
 import { Todo } from '../model/model';
 import { RootState } from '../reducers/index';
+import { isSmartphone } from '../responsive';
 
 export namespace TodoPage {
-  export interface Props extends RouteComponentProps<void>, WithStyles<typeof styles> {
+  export interface Props extends RouteComponentProps<void>, WithStyles<typeof styles>, WithWidthProps {
     todoList: Todo[];
     actions: typeof TodoActions;
   }
@@ -26,12 +28,12 @@ class TodoPage extends React.Component<TodoPage.Props, TodoPage.State> {
   };
 
   render() {
-    const { classes, actions, todoList } = this.props;
+    const { classes, actions, todoList, width } = this.props;
 
     return (
       <Grid
         container
-        className={classes.root}
+        className={isSmartphone(width) ? classes.mobileRoot : classes.root}
         alignItems={'flex-start'}
         justify={'flex-start'}
       >
@@ -40,13 +42,13 @@ class TodoPage extends React.Component<TodoPage.Props, TodoPage.State> {
           open={this.state.open}
           onClose={() => this.setState({ open: false })}
         />
-        <Grid item xs={2}>
+        <Grid item xs={12}>
           <Typography variant="display1" gutterBottom>
             Todo List
         </Typography>
         </Grid>
-        <Grid item xs={2}>
-          <Button variant="raised" color="secondary" onClick={this.handleAddTodo}>
+        <Grid item xs={12}>
+          <Button className={classes.button} variant="raised" color="secondary" onClick={this.handleAddTodo}>
             Add Todo
         </Button>
         </Grid>
@@ -65,6 +67,16 @@ const styles = (theme: Theme) => createStyles({
   root: {
     padding: theme.spacing.unit * 10,
   },
+
+  mobileRoot: {
+    paddingTop: 30,
+    paddingLeft: 15,
+    paddingRight: 15,
+  },
+
+  button: {
+    marginBottom: 15,
+  },
 });
 
 function mapStateToProps(state: RootState) {
@@ -79,4 +91,4 @@ function mapDispatchToProps(dispatch: any) {
   };
 }
 
-export default (withStyles(styles)<{}>(connect(mapStateToProps, mapDispatchToProps)(TodoPage)));
+export default (withStyles(styles)<{}>(connect(mapStateToProps, mapDispatchToProps)(withWidth()(TodoPage))));
diff --git a/src/responsive.ts b/src/responsive.ts
new file mode 100644
index 0000000..224a4a3
--- /dev/null
+++ b/src/responsive.ts
@@ -0,0 +1,19 @@
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+import { isWidthDown, isWidthUp } from '@material-ui/core/withWidth';
+
+const allowMobile = true;
+export function isSmartphone(width: Breakpoint): boolean {
+    return allowMobile && isWidthDown('xs', width);
+}
+
+export function isTablet(width: Breakpoint): boolean {
+    return allowMobile && isWidthDown('sm', width);
+}
+
+export function isMobile(width: Breakpoint): boolean {
+    return allowMobile && isTablet(width);
+}
+
+export function isDesktop(width: Breakpoint): boolean {
+    return !allowMobile || isWidthUp('md', width);
+}
\ No newline at end of file

From 850093ae3052821a860471f416ef5a216dfc2c14 Mon Sep 17 00:00:00 2001
From: Alexander Hauenstein <alexander.hauenstein@gmx.net>
Date: Mon, 20 Aug 2018 10:11:14 +0200
Subject: [PATCH 2/2] resize

---
 src/pages/TodoPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/TodoPage.tsx b/src/pages/TodoPage.tsx
index 9ea2bd0..ba5bc36 100644
--- a/src/pages/TodoPage.tsx
+++ b/src/pages/TodoPage.tsx
@@ -69,7 +69,7 @@ const styles = (theme: Theme) => createStyles({
   },
 
   mobileRoot: {
-    paddingTop: 30,
+    paddingTop: 50,
     paddingLeft: 15,
     paddingRight: 15,
   },