From b2d3f322ec25783d08efe8420e2b1a6cc6fe7d3b Mon Sep 17 00:00:00 2001
From: Felix Albrigtsen <felixalbrigtsen@gmail.com>
Date: Wed, 30 Mar 2022 00:47:38 +0200
Subject: [PATCH] Collapse buttons for description

---
 src/client/src/FrontPage.js         | 20 ++++++++++++++++++--
 src/client/src/TournamentCreator.js | 10 ++++------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/client/src/FrontPage.js b/src/client/src/FrontPage.js
index a45cbe4..f663b53 100644
--- a/src/client/src/FrontPage.js
+++ b/src/client/src/FrontPage.js
@@ -7,8 +7,10 @@ import TournamentAnnouncement from "./TournamentAnnouncement";
 import TournamentMatches from "./TournamentMatches";
 import TournamentTeams from "./TournamentTeams";
 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 KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 
 function CreateButton(props) {
   return (
@@ -37,6 +39,19 @@ function TournamentListItem(props) {
   function toggleDescription() {
     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 (
         <Paper elevation={8} >
           <Card>
@@ -52,7 +67,8 @@ function TournamentListItem(props) {
               <Typography variant="body2"> Start: {props.tournament.startTime.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" 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"}}>
               <Grid container spacing={4} justifyContent="center" wrap="wrap">
diff --git a/src/client/src/TournamentCreator.js b/src/client/src/TournamentCreator.js
index ebc9647..e90a97c 100644
--- a/src/client/src/TournamentCreator.js
+++ b/src/client/src/TournamentCreator.js
@@ -124,12 +124,10 @@ function TournamentForm(props) {
             </Grid>
           </Grid>
         </Box> */}
-        {/* <InputLabel htmlFor="startDatePicker">Start Time:</InputLabel> */}
-        <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}}/>
-        
-        {/* <InputLabel htmlFor="endDatePicker">End Time:</InputLabel> */}
-        <TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}}/>
-
+        <Box>
+          <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%"}} />
+        </Box>
         <InputLabel id="max-teams-label">Maximum number of teams</InputLabel>
         
         <Box sx={{flexGrow: 1}}>