X-Git-Url: http://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Ftournament%2FDetail.js;h=1afcc29f10611a1e434c13f3a035dcfad3da9cee;hb=33cc4da565ffb07ee4f8d9cbafb248629b85e65a;hp=c966ca5250685da8c6a582302dfe6d8bd84ccdb7;hpb=eebc6384e56336b66ec250fc2aea3be6171d53ff;p=alttp.git

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index c966ca5..1afcc29 100644
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -8,11 +8,11 @@ import Protocol from '../protocol/Protocol';
 import Rounds from '../rounds/List';
 import Box from '../users/Box';
 import {
+	isRunner,
 	mayAddRounds,
 	mayViewProtocol,
 } from '../../helpers/permissions';
 import {
-	getRunners,
 	getTournamentAdmins,
 	hasRunners,
 	hasTournamentAdmins,
@@ -20,11 +20,24 @@ import {
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
+const getClassName = (tournament, user) => {
+	const classNames = ['tournament'];
+	if (tournament.locked) {
+		classNames.push('is-locked');
+	} else {
+		classNames.push('is-active');
+	}
+	if (isRunner(user, tournament)) {
+		classNames.push('is-runner');
+	}
+	return classNames.join(' ');
+};
+
 const Detail = ({
 	addRound,
 	tournament,
 	user,
-}) => <Container fluid>
+}) => <Container className={getClassName(tournament, user)} fluid>
 	<Row>
 		<Col lg={8} xl={9}>
 			<div className="d-flex align-items-center justify-content-between">
@@ -36,20 +49,7 @@ const Detail = ({
 		</Col>
 	</Row>
 	<Row>
-		<Col lg={8} xl={9}>
-			<div className="d-flex align-items-center justify-content-between">
-				<h2>{i18n.t('rounds.heading')}</h2>
-				{addRound && mayAddRounds(user, tournament) ?
-					<Button onClick={addRound}>
-						{i18n.t('rounds.new')}
-					</Button>
-				: null}
-			</div>
-			{tournament.rounds ?
-				<Rounds rounds={tournament.rounds} tournament={tournament} />
-			: null}
-		</Col>
-		<Col lg={4} xl={3}>
+		<Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
 			<div className="d-flex align-items-center justify-content-between">
 				<h2>{i18n.t('tournaments.scoreboard')}</h2>
 			</div>
@@ -67,6 +67,19 @@ const Detail = ({
 				</>
 			: null}
 		</Col>
+		<Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
+			<div className="d-flex align-items-center justify-content-between">
+				<h2>{i18n.t('rounds.heading')}</h2>
+				{addRound && mayAddRounds(user, tournament) ?
+					<Button onClick={addRound}>
+						{i18n.t('rounds.new')}
+					</Button>
+				: null}
+			</div>
+			{tournament.rounds ?
+				<Rounds rounds={tournament.rounds} tournament={tournament} />
+			: null}
+		</Col>
 	</Row>
 </Container>;