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 { .paper {
padding: 12px; padding: 12px;
} }

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

@ -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, "")}