turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Design static part of create-tournament page; generify the full page background design (previously login.css)

This commit is contained in:
Felix Hamme 2018-11-12 23:37:11 +01:00
parent 354e364e1d
commit 6207049fa1
5 changed files with 107 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
pages/create.js
View File

@ -1,10 +1,106 @@
import Head from 'next/head' import Head from 'next/head'
import '../static/everypage.css'
import {Footer, TurniereNavigation} from "../js/CommonComponents";
import React from "react";
import {
Button,
Card,
CardBody,
Container,
CustomInput, Fade,
Form,
FormGroup,
Input,
InputGroup,
InputGroupAddon,
Label
} from "reactstrap";
export default () => ( export default () => (
<div> <div className="main generic-fullpage-bg">
<Head> <Head>
<title>Turnie.re - Turniererstellung</title> <title>Turnier erstellen: turnie.re</title>
</Head> </Head>
<p>Turniererstellung</p> <TurniereNavigation/>
<div>
<CreateTournamentCard/>
</div>
<Footer/>
</div> </div>
) )
function CreateTournamentCard() {
return (
<Container className="py-5">
<Card className="shadow">
<CardBody>
<h1 className="custom-font">Turnier erstellen</h1>
<CreateTournamentForm/>
</CardBody>
</Card>
</Container>
);
}
class CreateTournamentForm extends React.Component {
constructor(props) {
super(props);
this.state = { fadeIn: false };
this.toggle = this.toggle.bind(this);
}
render() {
return (
<Form>
<FormGroup>
<Label for="name">Name des Turniers</Label>
<Input type="text" name="name" size="255" required/>
</FormGroup>
<FormGroup>
<Label for="description">Beschreibung (optional)</Label>
<Input type="text" name="description" size="255"/>
</FormGroup>
<FormGroup>
<CustomInput type="checkbox" id="public" label="Turnier öffentlich anzeigen (schreibgeschützt)"/>
<CustomInput type="checkbox" id="mix-teams" label="Teams mischen"/>
<CustomInput type="checkbox" id="group-phase" label="Gruppenphase" onClick={this.toggle}/>
</FormGroup>
<FormGroup>
<Label for="teams">Teams</Label>
<InputGroup>
<Input placeholder="Teamname" type="text" name="teams" size="255" required/>
<InputGroupAddon addonType="append">
<Button color="success">hinzufügen</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<TeamsContainer/>
<Fade in={this.state.fadeIn} tag="div" className="mt-3" baseClass="d-none" baseClassActive="d-block">
<FormGroup>
<Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
<Input type="number" name="teams-per-group" size="255"/>
</FormGroup>
<FormGroup>
<Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase weiterkommen?</Label>
<Input type="number" name="teams-group-to-playoff" size="255"/>
</FormGroup>
</Fade>
<Button color="success" size="lg" className="w-100 shadow-sm mt-3">Turnier erstellen</Button>
</Form>
);
}
toggle() {
this.setState({
fadeIn: !this.state.fadeIn
});
}
}
function TeamsContainer() {
return (
<div className="bg-light p-3 text-secondary text-center font-italic">
Noch keine Teams hinzugefügt!
</div>
);
}

3
pages/login.js
View File

@ -1,12 +1,11 @@
import Head from 'next/head' import Head from 'next/head'
import '../static/everypage.css' import '../static/everypage.css'
import '../static/css/login.css'
import {Footer, TurniereNavigation} from "../js/CommonComponents"; import {Footer, TurniereNavigation} from "../js/CommonComponents";
import React from "react"; import React from "react";
import {Button, Card, CardBody, Container, Form, FormGroup, Input, Label} from "reactstrap"; import {Button, Card, CardBody, Container, Form, FormGroup, Input, Label} from "reactstrap";
export default () => ( export default () => (
<div className="main stadium-bg"> <div className="main generic-fullpage-bg">
<Head> <Head>
<title>Login: turnie.re</title> <title>Login: turnie.re</title>
</Head> </Head>

3
pages/register.js
View File

@ -1,12 +1,11 @@
import Head from 'next/head' import Head from 'next/head'
import '../static/everypage.css' import '../static/everypage.css'
import '../static/css/login.css'
import {Footer, TurniereNavigation} from "../js/CommonComponents"; import {Footer, TurniereNavigation} from "../js/CommonComponents";
import React from "react"; import React from "react";
import {Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label} from "reactstrap"; import {Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label} from "reactstrap";
export default () => ( export default () => (
<div className="main stadium-bg"> <div className="main generic-fullpage-bg">
<Head> <Head>
<title>Registrieren: turnie.re</title> <title>Registrieren: turnie.re</title>
</Head> </Head>

5
static/css/login.css
View File

@ -1,5 +0,0 @@
.stadium-bg {
background: url("/static/images/tennis-blurred.jpg") no-repeat center;
background-size: cover;
min-height: 100vh;
}

6
static/everypage.css
View File

@ -61,4 +61,10 @@ footer {
.running-text h4 { .running-text h4 {
margin-top: 1em; margin-top: 1em;
}
.generic-fullpage-bg {
background: url("/static/images/tennis-blurred.jpg") no-repeat top;
background-size: cover;
min-height: 100vh;
} }