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

Add background color based on page

This commit is contained in:
Thor77 2022-07-01 21:44:37 +02:00
parent 3dcfc3899e
commit 663b92c088
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages/tournament-fullscreen-groups.js
View File

@ -53,9 +53,11 @@ class Main extends React.Component {
this.groupsPerPage = 11; this.groupsPerPage = 11;
this.pages = 2; this.pages = 2;
this.page = 0; this.page = 0;
this.backgroundColors = ['#a8e6cf', '#dcedc1', '#ffd3b6'];
this.state = { this.state = {
groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0, showLogo: false groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0,
showLogo: false, backgroundColor: 'white'
}; };
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this); this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
this.onTournamentRequestError = this.onTournamentRequestError.bind(this); this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
@ -94,7 +96,8 @@ class Main extends React.Component {
this.setState({ this.setState({
loadingStatus: requestStatus, tournament: tournament, loadingStatus: requestStatus, tournament: tournament,
groups: groups.slice(start, end), loadedTournament: true, groups: groups.slice(start, end), loadedTournament: true,
page: this.page, showLogo: this.page == this.pages page: this.page, showLogo: this.page == this.pages,
backgroundColor: this.backgroundColors[this.page]
}); });
} }
@ -107,7 +110,7 @@ class Main extends React.Component {
} }
render() { render() {
const {groups, tournament, loadedTournament, loadingStatus, page, showLogo} = this.state; const {groups, tournament, loadedTournament, loadingStatus, page, showLogo, backgroundColor} = this.state;
if (!loadedTournament) { if (!loadedTournament) {
return (<div> return (<div>
<Head> <Head>
@ -128,6 +131,11 @@ class Main extends React.Component {
tournament={tournament} groups={groups} page={page} maxPage={this.pages} tournament={tournament} groups={groups} page={page} maxPage={this.pages}
showLogo={showLogo} showLogo={showLogo}
/> />
<style global jsx>{`
body {
background: ${backgroundColor};
}
`}</style>
</div>); </div>);
} else { } else {
return <ErrorPageComponent code={loadingStatus}/>; return <ErrorPageComponent code={loadingStatus}/>;