Merge branch 'small_layout_bugs' into 'master'

Small layout bugs

See merge request turniere/turniere-frontend!44

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">
-            <div className="container py-3">
-                <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 className="footer mt-5 p-3 bg-dark text-light text-center">
+            <Copyright/> &middot; <Privacy/> &middot; <Imprint/>
         </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

@@ -22,7 +22,7 @@ export default class GroupStage extends Component {
                 <span className='px-2'>Gruppenphase</span>
                 <ShowMatchesToggleButton show={this.state.showMatches} toggle={this.toggleShowMatches}/>
             </h1>
-            <Row className='mt-3'>
+            <Row className='mt-3 gx-0'>
                 {this.props.groups.map(group => <Group group={group} key={group.id} isSignedIn={this.props.isSignedIn}
                     isOwner={this.props.isOwner} showMatches={this.state.showMatches}/>)}
             </Row>

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({
-            collapsed: !this.state.collapsed
-        });
+        this.setState({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>