sticky sidebar

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index cfea60d2bcd8100bb164282bd89017880e15f0da..b6afe902c5b3acc5fb0210424728e3a099602ab9 100644 (file)
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -52,32 +52,34 @@ const Detail = ({
        </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}
-                       {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}
                </Col>
                <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
                        <div className="d-flex align-items-center justify-content-between">

diff --git a/resources/sass/tournaments.scss b/resources/sass/tournaments.scss
index 617125f0e05c9ca291714b3618e2784339aad172..d142193cacfa2076efde609c487bdcfe2df8a12f 100644 (file)
--- a/resources/sass/tournaments.scss
+++ b/resources/sass/tournaments.scss
@@ -1,3 +1,8 @@
+.tournament-sidebar {
+       position: sticky;
+       top: 1rem;
+}
+
 .scoreboard {
        .score {
                &.is-self {