fix: The login overflows because of the wrong container height
This commit is contained in:
parent
aba3626b7d
commit
45dc47f3b9
@ -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 {
|
.paper {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
@ -82,52 +82,44 @@ const LoginPageWithRouter = withRouter(
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return <div className="content">
|
return <div>
|
||||||
<Grid
|
<div className="login-center">
|
||||||
container
|
<Paper className="paper">
|
||||||
spacing={0}
|
<Typography variant="title">Login</Typography>
|
||||||
direction="column"
|
<Grid container direction="column" spacing={8}>
|
||||||
alignItems="center"
|
<Grid item>
|
||||||
justify="center"
|
<TextField
|
||||||
style={{ minHeight: '100vh' }}>
|
label="Username"
|
||||||
<Grid item xs={12}>
|
onKeyPress={onEnter}
|
||||||
<Paper className="paper">
|
inputRef={node => this.usernameRef = node} />
|
||||||
<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>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</Paper>
|
<Grid item>
|
||||||
</Grid>
|
<TextField
|
||||||
</Grid>
|
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
|
<Snackbar
|
||||||
open={this.props.snackOpen}
|
open={this.props.snackOpen}
|
||||||
onClose={() => this.props.setSnackbar(false, "")}
|
onClose={() => this.props.setSnackbar(false, "")}
|
||||||
|
Reference in New Issue
Block a user