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

Animation for favorites

This commit is contained in:
Daniel Schädler 2025-03-14 22:37:13 +01:00
parent 5c2481ab9d
commit 358ab8e9a1
2 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
js/components/FavoriteBar.js
View File

@ -11,6 +11,7 @@ export function FavoriteBar({teams}) {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isPulsing, setIsPulsing] = useState(false); const [isPulsing, setIsPulsing] = useState(false);
const headingRef = useRef(null); const headingRef = useRef(null);
const favoriteBarRef = useRef(null);
useEffect(() => { useEffect(() => {
const savedFavorite = localStorage.getItem('favoriteTeam'); const savedFavorite = localStorage.getItem('favoriteTeam');
@ -23,6 +24,14 @@ export function FavoriteBar({teams}) {
setIsLoading(false); setIsLoading(false);
}, [teams]); }, [teams]);
useEffect(() => {
if (isVisible && favoriteBarRef.current) {
favoriteBarRef.current.style.maxHeight = `${favoriteBarRef.current.scrollHeight}px`;
} else if (favoriteBarRef.current) {
favoriteBarRef.current.style.maxHeight = '0';
}
}, [isVisible]);
const toggleFavorite = team => { const toggleFavorite = team => {
if (favorite && favorite.id === team.id) { if (favorite && favorite.id === team.id) {
setFavorite(null); setFavorite(null);
@ -72,24 +81,22 @@ export function FavoriteBar({teams}) {
)} )}
</ButtonGroup> </ButtonGroup>
</div> </div>
{isVisible && ( <div className={`favorite-bar ${isVisible ? 'visible' : ''}`} ref={favoriteBarRef}>
<div className="favorite-bar"> <div>
<div> {sortedTeams.map(team => (
{sortedTeams.map(team => ( <div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
<div key={team.id} style={{display: 'flex', alignItems: 'center'}}> <Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}>
<Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}> <FontAwesomeIcon
<FontAwesomeIcon icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
icon={favorite && favorite.id === team.id ? filledStar : emptyStar} />
/> </Button>
</Button> <span>
<span> {team.name}
{team.name} </span>
</span> </div>
</div> ))}
))}
</div>
</div> </div>
)} </div>
</div> </div>
); );
} }

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

@ -19,7 +19,7 @@
} }
.match:hover { .match:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
} }
.match:hover > div { .match:hover > div {
@ -46,3 +46,13 @@
.pulse-animation { .pulse-animation {
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
.favorite-bar {
max-height: 0;
overflow: hidden;
transition: max-height 0.7s ease-in-out;
}
.favorite-bar.visible {
max-height: none;
}