From d3913d17c38ec6126d501afe5fa97c68838984fb Mon Sep 17 00:00:00 2001 From: Malaber Date: Wed, 19 Mar 2025 20:56:19 +0100 Subject: [PATCH] Add timer to navbar --- js/components/Navigation.js | 20 ++++++++++++++------ pages/tournament.js | 2 +- public/static/css/tournament.css | 12 ++++++++++++ 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/js/components/Navigation.js b/js/components/Navigation.js index e8f6c5a..71bf4e2 100644 --- a/js/components/Navigation.js +++ b/js/components/Navigation.js @@ -1,11 +1,12 @@ import { - Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink + Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarText, NavbarToggler, NavItem, NavLink } from 'reactstrap'; import {connect} from 'react-redux'; import React from 'react'; import {logout} from '../api'; import {notify} from 'react-notify-toast'; +import {Timer} from './Timer'; export class TurniereNavigation extends React.Component { constructor(props) { @@ -19,12 +20,19 @@ export class TurniereNavigation extends React.Component { } render() { + const {tournament} = this.props; + return ( - turnie.re + turnie.re + {tournament && tournament.timerEnd && + + Spielzeit: + + } -
+
@@ -60,14 +68,14 @@ class InvisibleLoginLogoutButtons extends React.Component { if (isSignedIn) { return ( + className="navbar-btn my-2 my-sm-0 px-5">{username} + className="navbar-btn my-2 my-sm-0 px-5">Logout ); } else { return ( + className="navbar-btn my-2 my-sm-0 px-5">Login ); } } diff --git a/pages/tournament.js b/pages/tournament.js index 40ca320..6c26051 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -120,7 +120,7 @@ class Main extends React.Component { {tournamentName}: turnie.re - +
); diff --git a/public/static/css/tournament.css b/public/static/css/tournament.css index 71dc0dc..7428667 100644 --- a/public/static/css/tournament.css +++ b/public/static/css/tournament.css @@ -95,3 +95,15 @@ min-width: 20%; text-align: left; } + +@media (max-width: 340px) { + .hide-below-340-w { + display: none; + } +} + +@media (max-width: 260px) { + .hide-below-260-w { + display: none; + } +}