Merge branch 'master' into favorites

# Conflicts:
#	js/components/GroupStage.js
#	public/static/css/tournament.css

README.md

@@ -39,3 +39,7 @@ $ docker build -t turniere-frontend .
 ```
 
 The built container exposes port 80.
+
+# Todo 
+
+Timer in topnav

js/components/BigImage.js

@@ -1,9 +1,27 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 export function BigImage(props) {
+    useEffect(() => {
+        const handleResize = () => {
+            const element = document.querySelector('.dynamically-resizing-h1');
+            if (element) {
+                const parentWidth = element.parentElement.offsetWidth;
+                const fontSize = parentWidth / 16; // Adjust the divisor as needed
+                element.style.fontSize = `${fontSize}px`;
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Initial call to set the font size
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
     return (
         <div className="big-image">
-            <h1 className="display-1">{props.text}</h1>
+            <h1 className="text-truncate overflow-hidden dynamically-resizing-h1">{props.text}</h1>
         </div>
     );
 }

js/components/Footer.js

@@ -1,20 +1,13 @@
 export function Footer() {
     return (
-        <footer className="footer mt-5 bg-dark text-light">
+        <footer className="footer mt-5 p-3 bg-dark text-light text-center">
-            <div className="container py-3">
+            <Copyright/> &middot; <Privacy/> &middot; <Imprint/>
-                <div className="row">
-                    <div className="col-md-6 text-center">
-                        <Copyright/> &middot; <Privacy/> &middot; <Imprint/>
-                    </div>
-                    <div className="col-md-6 text-center"><MoveToTop/></div>
-                </div>
-            </div>
         </footer>
     );
 }
 
 function Copyright() {
-    return <span>&copy; 2024 turnie.re</span>;
+    return <span>&copy; 2025 turnie.re</span>;
 }
 
 function Privacy() {
@@ -24,7 +17,3 @@ function Privacy() {
 function Imprint() {
     return <a className="text-white" href="/imprint">Impressum</a>;
 }
-
-function MoveToTop() {
-    return <a href="#" className="text-white">zurück nach oben</a>;
-}

js/components/GroupStage.js

@@ -17,11 +17,11 @@ export default class GroupStage extends Component {
 
     render() {
         return (
-            <div className="py-2 px-1">
+            <div className='py-2 px-1'>
-                <h1 className="custom-font m-2">
+                <h1 className='custom-font'>
-                    <span className="px-2">Gruppenphase</span>
+                    <span className='px-2'>Gruppenphase</span>
                 </h1>
-                <Row className="">
+                <Row className='mt-3 gx-0'>
                     {this.props.groups.map(group => (
                         <Group
                             group={group}

js/components/LoadingPage.js

@@ -12,7 +12,7 @@ export function LoadingPage(props) {
         <TurniereNavigation/>
         <Container>
             <div className='text-center'>
-                <img src='/static/images/logo-questionmark.png' alt='' className='loading-logo'/>
+                <img src='/static/images/logo-questionmark.png' alt='' className='img-fluid loading-logo'/>
             </div>
             <div className='py-5 text-center w-100 h1 custom-font'>
                 {props.text}

js/components/Navigation.js

@@ -10,22 +10,16 @@ import {notify} from 'react-notify-toast';
 export class TurniereNavigation extends React.Component {
     constructor(props) {
         super(props);
-
         this.toggle = this.toggle.bind(this);
-
+        this.state = {collapsed: true};
-        this.state = {
-            collapsed: true
-        };
     }
 
     toggle() {
-        this.setState({
+        this.setState({collapsed: !this.state.collapsed});
-            collapsed: !this.state.collapsed
-        });
     }
 
     render() {
-        return (<Navbar color="light" light expand="lg">
+        return (<Navbar color="light" light expand="lg" sticky="top">
             <NavbarBrand href="/">turnie.re</NavbarBrand>
             <NavbarToggler onClick={this.toggle}/>
             <Collapse isOpen={!this.state.collapsed} navbar>

pages/tournament-fullscreen-groups.js

@@ -63,6 +63,7 @@ class Main extends React.Component {
     }
 
     componentDidMount() {
+        document.body.classList.add('hide-cursor');
         this.updateTournament();
         const intervalIdPage = setInterval(this.increasePage, 15000);
         this.setState({intervalIdPage: intervalIdPage});

pages/tournament-fullscreen.js

@@ -33,7 +33,7 @@ function Matches(props) {
             )}
         </Row>);
     }
-    return (<div className='mx-4 h5'>
+    return (<div className='mx-4 h5 disable-hover'>
         {matches}
     </div>);
 }
@@ -55,7 +55,7 @@ function FilterDropdown(props) {
 
 
 function FullscreenPageHeader(props) {
-    return (<Navbar color='light' className='mb-4 border-bottom py-0'>
+    return (<Navbar color='light' className='mb-4 border-bottom py-0 show-cursor'>
         <FilterDropdown {...props.filter}/>
         <NavbarBrand>{props.title}</NavbarBrand>
     </Navbar>);
@@ -96,6 +96,7 @@ class Main extends React.Component {
     }
 
     componentDidMount() {
+        document.body.classList.add('hide-cursor');
         const tournamentId = this.props.query.code;
         getTournamentMeta(tournamentId, this.onTournamentRequestSuccess, this.onTournamentRequestError);
         this.updateMatches();

public/static/css/tournament.css

@@ -73,3 +73,15 @@
     outline: none !important;
     box-shadow: none !important;
 }
+
+.hide-cursor {
+    cursor: none;
+}
+
+.show-cursor {
+    cursor: pointer;
+}
+
+.disable-hover {
+    pointer-events: none;
+}