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

Clickable description

This commit is contained in:
Felix Albrigtsen 2022-03-30 00:30:39 +02:00
parent a62b245752
commit f423614ae5
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/client/src/FrontPage.js
View File

@ -33,6 +33,10 @@ function shorten(description, maxLength) {
} }
function TournamentListItem(props) { function TournamentListItem(props) {
const [longDescription, setLongDescription] = React.useState(false);
function toggleDescription() {
setLongDescription(!longDescription);
}
return ( return (
<Paper elevation={8} > <Paper elevation={8} >
<Card> <Card>
@ -45,16 +49,16 @@ function TournamentListItem(props) {
/> />
<CardContent align="left"> <CardContent align="left">
<Typography variant="h3" component="div" align="center">{props.tournament.name} </Typography> <Typography variant="h3" component="div" align="center">{props.tournament.name} </Typography>
<Typography variant="h5" color="text.primary">{shorten(props.tournament.description, 200)}</Typography> <Typography variant="body2"> Start: {props.tournament.startTime.toLocaleString()} </Typography>
<Typography variant="body2" color="text.secondary"> Start: {props.tournament.startTime.toLocaleString()} </Typography> <Typography variant="body2"> End: {props.tournament.endTime.toLocaleString()} </Typography>
<Typography variant="body2" color="text.secondary"> End: {props.tournament.endTime.toLocaleString()} </Typography>
<Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography> <Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
<Typography variant="h5" color="text.primary" color="text.secondary" onClick={toggleDescription}>{longDescription ? props.tournament.description : shorten(props.tournament.description, 200)}</Typography>
<Box sx={{flexGrow: 1}}>
<Box sx={{flexGrow: 1, marginTop: "20px"}}>
<Grid container spacing={4} justifyContent="center" wrap="wrap"> <Grid container spacing={4} justifyContent="center" wrap="wrap">
<Grid item> <Grid item>
<Link to={`/tournament/${props.tournament.id}/manage`}> <Link to={`/tournament/${props.tournament.id}/manage`}>
<Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button> <Button className="ManageButton" variant="contained" color="primary">Edit Tournament</Button>
</Link> </Link>
</Grid> </Grid>
<Grid item > <Grid item >