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

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index 1afcc29..b20f208 100644
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Button, Col, Container, Row } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
+import ApplyButton from './ApplyButton';
 import Scoreboard from './Scoreboard';
 import Protocol from '../protocol/Protocol';
 import Rounds from '../rounds/List';
@@ -14,8 +15,10 @@ import {
 } from '../../helpers/permissions';
 import {
 	getTournamentAdmins,
+	getTournamentMonitors,
 	hasRunners,
 	hasTournamentAdmins,
+	hasTournamentMonitors,
 } from '../../helpers/Tournament';
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
@@ -42,30 +45,45 @@ const Detail = ({
 		<Col lg={8} xl={9}>
 			<div className="d-flex align-items-center justify-content-between">
 				<h1>{tournament.title}</h1>
-				{mayViewProtocol(user, tournament) ?
-					<Protocol id={tournament.id} />
-				: null}
+				<div className="button-bar">
+					<ApplyButton tournament={tournament} />
+					{mayViewProtocol(user, tournament) ?
+						<Protocol id={tournament.id} />
+					: null}
+				</div>
 			</div>
 		</Col>
 	</Row>
 	<Row>
 		<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 className="tournament-sidebar">
+				<div className="d-flex align-items-center justify-content-between">
+					<h2>{i18n.t('tournaments.scoreboard')}</h2>
+				</div>
+				{hasRunners(tournament) ?
+					<Scoreboard tournament={tournament} />
+				: null}
+				{hasTournamentAdmins(tournament) ?
+					<>
+						<div className="d-flex align-items-center justify-content-between">
+							<h2>{i18n.t('tournaments.admins')}</h2>
+						</div>
+						{getTournamentAdmins(tournament).map(p =>
+							<p key={p.id}><Box user={p.user} /></p>
+						)}
+					</>
+				: null}
+				{hasTournamentMonitors(tournament) ?
+					<>
+						<div className="d-flex align-items-center justify-content-between">
+							<h2>{i18n.t('tournaments.monitors')}</h2>
+						</div>
+						{getTournamentMonitors(tournament).map(p =>
+							<p key={p.id}><Box user={p.user} /></p>
+						)}
+					</>
+				: null}
 			</div>
-			{hasRunners(tournament) ?
-				<Scoreboard tournament={tournament} />
-			: null}
-			{hasTournamentAdmins(tournament) ?
-				<>
-					<div className="d-flex align-items-center justify-content-between">
-						<h2>{i18n.t('tournaments.admins')}</h2>
-					</div>
-					{getTournamentAdmins(tournament).map(p =>
-						<p key={p.id}><Box user={p.user} /></p>
-					)}
-				</>
-			: null}
 		</Col>
 		<Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
 			<div className="d-flex align-items-center justify-content-between">