Minor updates to rendering
This commit is contained in:
parent
cdaef9426c
commit
ac71748bb3
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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{
|
||||
|
|
Loading…
Reference in New Issue