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

Collapse buttons for description

This commit is contained in:
Felix Albrigtsen 2022-03-30 00:47:38 +02:00
parent 62636775eb
commit b2d3f322ec
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,8 +7,10 @@ import TournamentAnnouncement from "./TournamentAnnouncement";
import TournamentMatches from "./TournamentMatches"; import TournamentMatches from "./TournamentMatches";
import TournamentTeams from "./TournamentTeams"; import TournamentTeams from "./TournamentTeams";
import AppBar from './components/Appbar'; import AppBar from './components/Appbar';
import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid } from "@mui/material"; import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid, Icon } from "@mui/material";
import AddCircleIcon from '@mui/icons-material/AddCircle'; import AddCircleIcon from '@mui/icons-material/AddCircle';
import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
function CreateButton(props) { function CreateButton(props) {
return ( return (
@ -37,6 +39,19 @@ function TournamentListItem(props) {
function toggleDescription() { function toggleDescription() {
setLongDescription(!longDescription); setLongDescription(!longDescription);
} }
function Description() {
if (longDescription) {
return( <Box component={Stack} direction="row">
<Typography variant="body1" onClick={toggleDescription}>{props.tournament.description}</Typography>
<KeyboardDoubleArrowUpIcon onClick={toggleDescription} />
</Box> )
} else {
return <Box component={Stack} direction="row">
<Typography variant="body1" color="text.secondary" onClick={toggleDescription}>{shorten(props.tournament.description, 200)}</Typography>
<KeyboardDoubleArrowDownIcon onClick={toggleDescription} />
</Box>;
}
}
return ( return (
<Paper elevation={8} > <Paper elevation={8} >
<Card> <Card>
@ -52,7 +67,8 @@ function TournamentListItem(props) {
<Typography variant="body2"> Start: {props.tournament.startTime.toLocaleString()} </Typography> <Typography variant="body2"> Start: {props.tournament.startTime.toLocaleString()} </Typography>
<Typography variant="body2"> End: {props.tournament.endTime.toLocaleString()} </Typography> <Typography variant="body2"> 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> <Description />
{/* <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, marginTop: "20px"}}> <Box sx={{flexGrow: 1, marginTop: "20px"}}>
<Grid container spacing={4} justifyContent="center" wrap="wrap"> <Grid container spacing={4} justifyContent="center" wrap="wrap">

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

@ -124,12 +124,10 @@ function TournamentForm(props) {
</Grid> </Grid>
</Grid> </Grid>
</Box> */} </Box> */}
{/* <InputLabel htmlFor="startDatePicker">Start Time:</InputLabel> */} <Box>
<TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}}/> <TextField type="datetime-local" InputProps={{ readOnly: true }} id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginRight: "2%"}} />
<TextField type="datetime-local" InputProps={{ readOnly: true }} id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginLeft: "2%"}} />
{/* <InputLabel htmlFor="endDatePicker">End Time:</InputLabel> */} </Box>
<TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}}/>
<InputLabel id="max-teams-label">Maximum number of teams</InputLabel> <InputLabel id="max-teams-label">Maximum number of teams</InputLabel>
<Box sx={{flexGrow: 1}}> <Box sx={{flexGrow: 1}}>