Minor updates to rendering

This commit is contained in:
Kristoffer Juelsenn 2022-04-16 08:50:46 +02:00
parent cdaef9426c
commit ac71748bb3
3 changed files with 20 additions and 21 deletions

View File

@ -100,8 +100,7 @@ function TournamentForm(props) {
{ value: 3, label: "8",},
{ value: 4, label: "16",},
{ value: 5, label: "32",},
{ value: 6, label: "64",},
{ value: 7, label: "128",}
{ value: 6, label: "64",}
];
return (
@ -147,7 +146,7 @@ function TournamentForm(props) {
<Grid container spacing={2} justifyContent="center">
<Grid item xs={8}>
<Container>
<Slider aria-label="Teams" valueLabelDisplay="off" step={1} marks={marks} min={2} max={7} onChange={sliderUpdate} id="max-teams-slider" name="max-teams-slider" >
<Slider aria-label="Teams" valueLabelDisplay="off" step={1} marks={marks} min={2} max={6} onChange={sliderUpdate} id="max-teams-slider" name="max-teams-slider" >
</Slider>
</Container>
</Grid>

View File

@ -94,11 +94,11 @@ function Match(props) {
<div className="matchup">
<div className="participants">
{/* Team 1 (Winner-status?) (Team name) */}
<div onClick={setWinner(props.match.team1Id)} className={`participant ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : ""}`} endIcon={<EmojiEventsIcon />}>
<div onClick={setWinner(props.match.team1Id)} className={`participant ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : ""}`}>
<span>{team1Name}</span>
</div>
{/* Team 2 (Winner-status?) (Team name) */}
<div onClick={setWinner(props.match.team2Id)} className={`participant ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`} endIcon={<DoDisturbIcon />}>
<div onClick={setWinner(props.match.team2Id)} className={`participant ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`}>
<span>{team2Name}</span>
</div>
</div>

View File

@ -6,19 +6,19 @@ html,body{
display: flex;
position: relative;
flex-direction: row;
justify-content: space-between;
justify-content: center;
align-items: center;
width: 100%;
width: 90vw;
height: 100%;
padding:2%;
}
.winners{
margin: 2rem;
margin: 2vw;
}
.participants{
border-radius: 0.25rem;
border-radius: 0.25vw;
overflow: hidden;
border: 1px solid gray;
}
@ -26,12 +26,12 @@ html,body{
box-sizing: border-box;
color: #404040;
background: white;
width: 14rem;
height: 3rem;
width: 10vw;
height: 3vw;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
}
.participants .participant span {
margin: 0 1.25rem;
margin: 0 1.25vw;
line-height: 3;
font-size: 1rem;
font-family: "Roboto Slab";
@ -64,14 +64,14 @@ html,body{
}
.matchup{
margin: 1rem 0;
margin: 1vw 0;
}
.winners{
display: flex;
justify-content: space-between;
justify-content: center;
flex-direction: row;
margin: 2rem 0;
margin: 2vh 0;
}
.round{
@ -79,27 +79,27 @@ html,body{
}
.round.thirtysecondfinals{
margin: 0 2rem;
margin: 0vh 2vw;
height: 100%;
}
.round.sixteenthfinals{
margin: 0 2rem;
margin: 0vh 2vw;
height: 100%;
}
.round.eighthfinals{
margin: 0 2rem;
margin: 0vh 2vw;
height: 100%;
}
.round.quarterfinals{
margin: 0 2rem;
margin: 0vh 2vw;
height: 100%;
}
.round.semifinals{
margin: 0 2rem;
margin: 0vh 2vw;
height: 100%;
}
.round.finals{
margin: 0 2rem;
margin: 0vh 2vw;
}
.connector{