Merge pull request #5 from innFactory/feature/responsive

Feature/responsive

Author: spoeck

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)))));

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
     }
 });

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%'
     },
 });
 

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,
   },
 });
 

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: 50,
+    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))));

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);
+}