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 {
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 (<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}/>
<Collapse isOpen={!this.state.collapsed} navbar>
<NavLinks/>
<div className='ms-auto me-0'>
<div className="ms-auto me-0">
<LoginLogoutButtons/>
</div>
</Collapse>
@ -60,14 +68,14 @@ class InvisibleLoginLogoutButtons extends React.Component {
if (isSignedIn) {
return (<ButtonGroup className="nav-item">
<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)}
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>);
} else {
return (<ButtonGroup className="nav-item">
<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>);
}
}

2
pages/tournament.js
View File

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

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

@ -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;
}
}