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

Styling

This commit is contained in:
Daniel Schädler 2025-03-14 22:23:47 +01:00
parent 05000a3243
commit f8c49a04d3
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
js/components/FavoriteBar.js
View File

@ -1,9 +1,9 @@
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {Button} 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';
import {faStar as emptyStar} from '@fortawesome/free-regular-svg-icons'; import {faStar as emptyStar} from '@fortawesome/free-regular-svg-icons';
import {faHeartCirclePlus} from '@fortawesome/free-solid-svg-icons'; import {faHeartCirclePlus, faArrowCircleRight} from '@fortawesome/free-solid-svg-icons';
export function FavoriteBar({teams}) { export function FavoriteBar({teams}) {
const [favorite, setFavorite] = useState(null); const [favorite, setFavorite] = useState(null);
@ -47,22 +47,23 @@ export function FavoriteBar({teams}) {
const sortedTeams = [...teams].sort((a, b) => a.name.localeCompare(b.name)); const sortedTeams = [...teams].sort((a, b) => a.name.localeCompare(b.name));
return ( return (
<div> <div class="favorites border-bottom py-2 px-1">
<div style={{display: 'flex', alignItems: 'center'}}> <div style={{display: 'flex', alignItems: 'center'}}>
<h2>Favorit:</h2> <h1 class="custom-font px-2">Favorit:</h1>
<p>{favorite ? favorite.name : ''}</p> <p>{favorite ? favorite.name : ''}</p>
<ButtonGroup>
<Button onClick={() => setIsVisible(!isVisible)}> <Button onClick={() => setIsVisible(!isVisible)}>
<FontAwesomeIcon icon={faHeartCirclePlus}/> <FontAwesomeIcon icon={faHeartCirclePlus}/>
</Button> </Button>
{favorite && ( {favorite && (
<Button onClick={scrollToFavorite}> <Button onClick={scrollToFavorite}>
Jump to Favorite Team's Last Game <FontAwesomeIcon icon={faArrowCircleRight}/>
</Button> </Button>
)} )}
</ButtonGroup>
</div> </div>
{isVisible && ( {isVisible && (
<div className="favorite-bar"> <div className="favorite-bar">
<h3>All Teams</h3>
<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'}}>

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

@ -10,6 +10,10 @@
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.favorites {
background-color: #f8f8f8;
}
.minw-25 { .minw-25 {
min-width: 350px; min-width: 350px;
} }