diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2018-09-05 15:52:02 +1200 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2018-09-05 15:52:02 +1200 |
commit | 8df444bc17f84236613719f5cdc04b89b2f61f23 (patch) | |
tree | 7a74a92fc65787797410b50a93a05505e4deebd6 /modern | |
parent | 411376bc7774b79076cf179c559865fb56801e79 (diff) | |
download | etbsa-traccar-web-8df444bc17f84236613719f5cdc04b89b2f61f23.tar.gz etbsa-traccar-web-8df444bc17f84236613719f5cdc04b89b2f61f23.tar.bz2 etbsa-traccar-web-8df444bc17f84236613719f5cdc04b89b2f61f23.zip |
Fix some issues on main screen
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/LoginPage.js | 4 | ||||
-rw-r--r-- | modern/src/MainPage.js | 23 | ||||
-rw-r--r-- | modern/src/MainToolbar.js | 32 |
3 files changed, 33 insertions, 26 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 9934106..3ba6bac 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -8,7 +8,7 @@ import Paper from '@material-ui/core/Paper'; import withStyles from '@material-ui/core/styles/withStyles'; const styles = theme => ({ - layout: { + root: { width: 'auto', display: 'block', // Fix IE11 issue. marginLeft: theme.spacing.unit * 3, @@ -86,7 +86,7 @@ class LoginPage extends Component { const { classes } = this.props; const { failed, email, password } = this.state; return ( - <main className={classes.layout}> + <main className={classes.root}> <Paper className={classes.paper}> <img className={classes.logo} src="/logo.svg" alt="Traccar" /> diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 02d98dc..36181a9 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -2,6 +2,18 @@ import React, { Component } from 'react'; import ContainerDimensions from 'react-container-dimensions'; import MainToobar from './MainToolbar'; import MainMap from './MainMap'; +import withStyles from '@material-ui/core/styles/withStyles'; + +const styles = theme => ({ + root: { + height: "100vh", + display: "flex", + flexDirection: "column" + }, + mapContainer: { + flexGrow: 1 + } +}); class MainPage extends Component { constructor(props) { @@ -24,6 +36,7 @@ class MainPage extends Component { } render() { + const { classes } = this.props; const { loading } = this.state; if (loading) { return ( @@ -31,11 +44,9 @@ class MainPage extends Component { ); } else { return ( - <div style={{height: "100vh", display: "flex", flexDirection: "column"}}> - <div style={{flex: 0}}> - <MainToobar /> - </div> - <div style={{flex: 1}}> + <div className={classes.root}> + <MainToobar /> + <div className={classes.mapContainer}> <ContainerDimensions> <MainMap/> </ContainerDimensions> @@ -46,4 +57,4 @@ class MainPage extends Component { } } -export default MainPage; +export default withStyles(styles)(MainPage); diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index e8294ab..1420135 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -1,5 +1,4 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; @@ -9,22 +8,23 @@ import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; const styles = { - root: { - flexGrow: 1, - }, flex: { - flexGrow: 1, + flexGrow: 1 }, menuButton: { marginLeft: -12, - marginRight: 20, + marginRight: 20 }, }; -function MainToobar(props) { - const { classes } = props; - return ( - <div className={classes.root}> +class MainToobar extends Component { + constructor(props) { + super(props); + } + + render() { + const { classes } = this.props; + return ( <AppBar position="static"> <Toolbar> <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"> @@ -33,15 +33,11 @@ function MainToobar(props) { <Typography variant="title" color="inherit" className={classes.flex}> Traccar </Typography> - <Button color="inherit">Login</Button> + <Button color="inherit">Logout</Button> </Toolbar> </AppBar> - </div> - ); + ); + } } -MainToobar.propTypes = { - classes: PropTypes.object.isRequired, -}; - export default withStyles(styles)(MainToobar); |