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

Add timer to navbar

This commit is contained in:
Daniel Schädler 2025-03-19 20:56:19 +01:00
parent 113d42ab16
commit d3913d17c3
3 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/components/Navigation.js
View File

@ -1,11 +1,12 @@
import { import {
Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarText, NavbarToggler, NavItem, NavLink
} from 'reactstrap'; } from 'reactstrap';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import React from 'react'; import React from 'react';
import {logout} from '../api'; import {logout} from '../api';
import {notify} from 'react-notify-toast'; import {notify} from 'react-notify-toast';
import {Timer} from './Timer';
export class TurniereNavigation extends React.Component { export class TurniereNavigation extends React.Component {
constructor(props) { constructor(props) {
@ -19,12 +20,19 @@ export class TurniereNavigation extends React.Component {
} }
render() { render() {
const {tournament} = this.props;
return (<Navbar color="light" light expand="lg" sticky="top"> return (<Navbar color="light" light expand="lg" sticky="top">
<NavbarBrand href="/">turnie.re</NavbarBrand> <NavbarBrand className={'hide-below-260-w'} href="/">turnie.re</NavbarBrand>
{tournament && tournament.timerEnd &&
<NavbarText className={'m-auto'}>
<span className={'hide-below-340-w'}>Spielzeit: </span><Timer timerEnd={tournament.timerEnd} />
</NavbarText>
}
<NavbarToggler onClick={this.toggle}/> <NavbarToggler onClick={this.toggle}/>
<Collapse isOpen={!this.state.collapsed} navbar> <Collapse isOpen={!this.state.collapsed} navbar>
<NavLinks/> <NavLinks/>
<div className='ms-auto me-0'> <div className="ms-auto me-0">
<LoginLogoutButtons/> <LoginLogoutButtons/>
</div> </div>
</Collapse> </Collapse>
@ -60,14 +68,14 @@ class InvisibleLoginLogoutButtons extends React.Component {
if (isSignedIn) { if (isSignedIn) {
return (<ButtonGroup className="nav-item"> return (<ButtonGroup className="nav-item">
<Button outline color="success" href="/profile" <Button outline color="success" href="/profile"
className="navbar-btn my-2 my-sm-0 px-5">{username}</Button> className="navbar-btn my-2 my-sm-0 px-5">{username}</Button>
<Button outline color="success" onClick={this.logout.bind(this)} <Button outline color="success" onClick={this.logout.bind(this)}
className="navbar-btn my-2 my-sm-0 px-5">Logout</Button> className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
</ButtonGroup>); </ButtonGroup>);
} else { } else {
return (<ButtonGroup className="nav-item"> return (<ButtonGroup className="nav-item">
<Button outline color="success" href="/login" <Button outline color="success" href="/login"
className="navbar-btn my-2 my-sm-0 px-5">Login</Button> className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
</ButtonGroup>); </ButtonGroup>);
} }
} }

2
pages/tournament.js
View File

@ -120,7 +120,7 @@ class Main extends React.Component {
<Head> <Head>
<title>{tournamentName}: turnie.re</title> <title>{tournamentName}: turnie.re</title>
</Head> </Head>
<TurniereNavigation/> <TurniereNavigation tournament={tournament} />
<TournamentPage tournament={tournament}/> <TournamentPage tournament={tournament}/>
<Footer/> <Footer/>
</div>); </div>);

12
public/static/css/tournament.css
View File

@ -95,3 +95,15 @@
min-width: 20%; min-width: 20%;
text-align: left; text-align: left;
} }
@media (max-width: 340px) {
.hide-below-340-w {
display: none;
}
}
@media (max-width: 260px) {
.hide-below-260-w {
display: none;
}
}