aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2018-09-05 15:52:02 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2018-09-05 15:52:02 +1200
commit8df444bc17f84236613719f5cdc04b89b2f61f23 (patch)
tree7a74a92fc65787797410b50a93a05505e4deebd6 /modern
parent411376bc7774b79076cf179c559865fb56801e79 (diff)
downloadetbsa-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.js4
-rw-r--r--modern/src/MainPage.js23
-rw-r--r--modern/src/MainToolbar.js32
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);