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

Scroll to fav button when chosen

This commit is contained in:
Daniel Schädler 2025-03-14 22:33:19 +01:00
parent 31b0687c32
commit 5c2481ab9d
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/FavoriteBar.js
View File

@ -1,4 +1,4 @@
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect, useRef} from 'react';
import {Button, ButtonGroup} from 'reactstrap'; import {Button, ButtonGroup} from 'reactstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faStar as filledStar} from '@fortawesome/free-solid-svg-icons'; import {faStar as filledStar} from '@fortawesome/free-solid-svg-icons';
@ -10,6 +10,7 @@ export function FavoriteBar({teams}) {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isPulsing, setIsPulsing] = useState(false); const [isPulsing, setIsPulsing] = useState(false);
const headingRef = useRef(null);
useEffect(() => { useEffect(() => {
const savedFavorite = localStorage.getItem('favoriteTeam'); const savedFavorite = localStorage.getItem('favoriteTeam');
@ -30,6 +31,7 @@ export function FavoriteBar({teams}) {
setFavorite(team); setFavorite(team);
localStorage.setItem('favoriteTeam', team.id); localStorage.setItem('favoriteTeam', team.id);
setIsPulsing(true); setIsPulsing(true);
headingRef.current.scrollIntoView({behavior: 'smooth', block: 'center'});
} }
setIsVisible(false); // Close the favorite menu setIsVisible(false); // Close the favorite menu
}; };
@ -53,7 +55,7 @@ export function FavoriteBar({teams}) {
return ( return (
<div className="favorites border-bottom py-2 px-1"> <div className="favorites border-bottom py-2 px-1">
<div style={{display: 'flex', alignItems: 'center'}}> <div style={{display: 'flex', alignItems: 'center'}}>
<h1 className="custom-font px-2">Favorit:</h1> <h1 className="custom-font px-2" ref={headingRef}>Favorit:</h1>
<p>{favorite ? favorite.name : ''}</p> <p>{favorite ? favorite.name : ''}</p>
<ButtonGroup> <ButtonGroup>
<Button title="Favorit Auswahlmenü öffnen/schließen" onClick={() => setIsVisible(!isVisible)}> <Button title="Favorit Auswahlmenü öffnen/schließen" onClick={() => setIsVisible(!isVisible)}>