PapaTutuWawa/Lateinicus
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: The login overflows because of the wrong container height

Browse Source
This commit is contained in:
Alexander Polynomdivision 2018-10-12 12:14:24 +02:00
parent aba3626b7d
commit 45dc47f3b9
2 changed files with 46 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/index.css
View File

@ -21,6 +21,15 @@ body {
}
.login-center {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
/* 64px is the height of the App bar */
height: calc(100vh - 64px);
}
.paper {
padding: 12px;
}

82
frontend/src/pages/login.tsx
View File

@ -82,52 +82,44 @@ const LoginPageWithRouter = withRouter(
}
};
return <div className="content">
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}>
<Grid item xs={12}>
<Paper className="paper">
<Typography variant="title">Login</Typography>
<Grid container direction="column" spacing={8}>
<Grid item>
<TextField
label="Username"
onKeyPress={onEnter}
inputRef={node => this.usernameRef = node} />
</Grid>
<Grid item>
<TextField
label="Passwort"
type="password"
onKeyPress={onEnter}
inputRef={node => this.passwordRef = node} />
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
className="login-btn"
onClick={() => this.performLogin()}>
Login
</Button>
<Link to="/register">
Registrieren
</Link>
{
this.props.loading ? (
<LinearProgress />
) : undefined
}
</Grid>
return <div>
<div className="login-center">
<Paper className="paper">
<Typography variant="title">Login</Typography>
<Grid container direction="column" spacing={8}>
<Grid item>
<TextField
label="Username"
onKeyPress={onEnter}
inputRef={node => this.usernameRef = node} />
</Grid>
</Paper>
</Grid>
</Grid>
<Grid item>
<TextField
label="Passwort"
type="password"
onKeyPress={onEnter}
inputRef={node => this.passwordRef = node} />
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
className="login-btn"
onClick={() => this.performLogin()}>
Login
</Button>
<Link to="/register">
Registrieren
</Link>
{
this.props.loading ? (
<LinearProgress />
) : undefined
}
</Grid>
</Grid>
</Paper>
</div>
<Snackbar
open={this.props.snackOpen}
onClose={() => this.props.setSnackbar(false, "")}