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

Fix match background color

This commit is contained in:
Thor77 2022-06-14 20:25:50 +02:00
parent 41e4d3c37a
commit b29fc0c08e
No known key found for this signature in database
GPG Key ID: 5051E71B46AA669A
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/components/Match.js
View File

@ -5,6 +5,7 @@ import {notify} from 'react-notify-toast';
import {MatchModal} from './MatchModal'; import {MatchModal} from './MatchModal';
import {MatchTable} from './MatchTable'; import {MatchTable} from './MatchTable';
import styles from './Match.module.css';
export class Match extends React.Component { export class Match extends React.Component {
constructor(props) { constructor(props) {
@ -89,23 +90,23 @@ export class Match extends React.Component {
} }
render() { render() {
let cardClass; let cardClass = '';
let smallMessage; let smallMessage;
let borderClass; let borderClass = '';
// possible states: single_team not_ready not_started in_progress finished // possible states: single_team not_ready not_started in_progress finished
switch (this.state.match.state) { switch (this.state.match.state) {
case 'in_progress': case 'in_progress':
cardClass = 'table-warning'; cardClass = 'bg-warning';
borderClass = 'border-warning'; borderClass = 'border-warning';
smallMessage = 'Spiel läuft'; smallMessage = 'Spiel läuft';
break; break;
case 'finished': case 'finished':
cardClass = 'table-success'; cardClass = 'bg-success';
borderClass = 'border-success'; borderClass = 'border-success';
smallMessage = this.getMatchFinishedMessage(); smallMessage = this.getMatchFinishedMessage();
break; break;
case 'single_team': case 'single_team':
cardClass = 'table-success'; cardClass = 'bg-success';
borderClass = 'border-success'; borderClass = 'border-success';
smallMessage = 'kein Gegner, Team kommt weiter'; smallMessage = 'kein Gegner, Team kommt weiter';
break; break;
@ -117,8 +118,8 @@ export class Match extends React.Component {
break; break;
} }
return (<div className='mb-3'> return (<div className='mb-3'>
<Card className='shadow-sm match' onClick={this.toggleModal}> <Card className={'shadow-sm match '} onClick={this.toggleModal}>
<CardBody className={borderClass + ' border py-2 ' + cardClass}> <CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}>
<MatchTable match={this.state.match} borderColor={borderClass}/> <MatchTable match={this.state.match} borderColor={borderClass}/>
</CardBody> </CardBody>
</Card> </Card>
@ -128,4 +129,3 @@ export class Match extends React.Component {
</div>); </div>);
} }
} }

3
js/components/Match.module.css Normal file
View File

@ -0,0 +1,3 @@
.match_bg {
--bs-bg-opacity: .5;
}