felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/client/src/TournamentCreator.js
View File

@ -100,8 +100,7 @@ function TournamentForm(props) {
{ value: 3, label: "8",}, { value: 3, label: "8",},
{ value: 4, label: "16",}, { value: 4, label: "16",},
{ value: 5, label: "32",}, { value: 5, label: "32",},
{ value: 6, label: "64",}, { value: 6, label: "64",}
{ value: 7, label: "128",}
]; ];
return ( return (
@ -147,7 +146,7 @@ function TournamentForm(props) {
<Grid container spacing={2} justifyContent="center"> <Grid container spacing={2} justifyContent="center">
<Grid item xs={8}> <Grid item xs={8}>
<Container> <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> </Slider>
</Container> </Container>
</Grid> </Grid>

4
src/client/src/TournamentOverview.js
View File

@ -94,11 +94,11 @@ function Match(props) {
<div className="matchup"> <div className="matchup">
<div className="participants"> <div className="participants">
{/* Team 1 (Winner-status?) (Team name) */} {/* 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> <span>{team1Name}</span>
</div> </div>
{/* Team 2 (Winner-status?) (Team name) */} {/* 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> <span>{team2Name}</span>
</div> </div>
</div> </div>

32
src/client/src/components/tournamentBracket.css
View File

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