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

MUI Scaling & Responsive Design Finished

Browse Source
This commit is contained in:
Kristoffer Juelsenn 2022-04-25 21:52:35 +02:00
parent 4786bfbd59
commit 1e9b30ba8e
12 changed files with 94 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,17 +39,17 @@ function AdminCreator(props){
}
return (
<Paper sx={{width: "90vw", margin: "10px auto", padding: "15px"}} component={Stack} direction="column">
<Paper sx={{width: "90vw", margin: "10px auto", padding: "15px", align:'center', justifyContent:'center', flexGrow:1}} component={Stack} direction={['column']} spacing={2}>
<div align="center">
<form>
<TextField id="adminEmailInput" sx={{ width: "70%" }} label="Admin Email" variant="outlined" type="email" />
{/* <Button variant="contained" color="primary" onClick={postCreate}>Create Team</Button> */}
<Button type="submit" variant="contained" color="success" onClick={postCreate} sx={{width: "20%", marginLeft: "5px"}}>
<Box sx={{padding: "10px"}}>
Create Admin
</Box>
<AddCircleIcon />
</Button>
<TextField id="adminEmailInput" label="Admin Email" variant="outlined" type="email" sx={{width:['auto','50%','60%','70%']}} />
{/* <Button variant="contained" color="primary" onClick={postCreate}>Create Team</Button> */}
<Button type="submit" variant="contained" color="success" onClick={postCreate} sx={{marginLeft:['5px'],width:['fit-content','40%','30%','20%']}}>
<Box sx={{padding: "10px"}}>
Create Admin
</Box>
<AddCircleIcon />
</Button>
</form>
</div>
</Paper>
@ -118,7 +118,7 @@ function UserList(props){
{/* TODO Drop down menu for selecting rank */}
<TableCell>
<FormControl variant="standard">
<Select onChange={updateRank(user.asuraId)} value={user.isManager ? "manager" : "admin"} label="rank" labelId="rankSelect" id="rankSelect">
<Select onChange={updateRank(user.asuraId)} value={user.isManager ? "manager" : "admin"} aria-label="rank" id="rankSelect">
<MenuItem value={"manager"}>Manager</MenuItem>
<MenuItem value={"admin"}>Admin</MenuItem>
</Select>

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

@ -85,7 +85,7 @@ function TournamentListItem(props) {
</Box>)
} else {
return(<Box>
<Typography variant="body"> Starts in: </Typography>
<Typography variant="body"> Starts in: </Typography> <br />
{ remainingDays > 0 ? <Typography variant="body"> {remainingDays} days</Typography> : null }
{ remainingHours > 0 ? <Typography variant="body"> {remainingHours} hours</Typography> : null }
{ remainingMins > 0 ? <Typography variant="body"> {remainingMins} mins</Typography> : null }
@ -105,26 +105,26 @@ function TournamentListItem(props) {
image="banner2.png"
/>
<CardContent align="left">
<Typography variant="h3" component="div" align="center">{props.tournament.name} </Typography>
<Typography sx={{fontSize:['2rem','2.5rem','3rem']}} component="div" align="center">{props.tournament.name} </Typography>
<Box component={Stack} direction="column">
<Typography variant="body"> Start: {props.tournament.startTime.toLocaleString()} </Typography>
<Typography variant="body"> End: {props.tournament.endTime.toLocaleString()} </Typography>
</Box>
<Typography variant="h5" color="text.primary" gutterBottom> Players: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
<Typography variant="h5" color="text.primary" gutterBottom> Particpants: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
<Description />
<Typography variant="body" color="text.primary"><EmojiEventsIcon alt="A trohpy" color="gold"/> Prize: {props.tournament.prize} </Typography>
<Countdown />
<Box sx={{flexGrow: 1, marginTop: "20px"}}>
<Grid container spacing={4} justifyContent="center" wrap="wrap">
{ props.user.isLoggedIn ?
<Grid container spacing={2} justifyContent="center" wrap="wrap">
{ props.user.isLoggedIn &&
<Grid item>
<Link to={`/tournament/${props.tournament.id}/manage`}>
<Button className="ManageButton" variant="contained" color="primary" endIcon={<EditIcon />}>Edit Tournament</Button>
</Link>
</Grid> : null
</Grid>
}
<Grid item >
<Link to={`/tournament/${props.tournament.id}`} >
@ -182,7 +182,7 @@ function Home(props) {
<>
<Appbar user={props.user} pageTitle="Asura Tournaments" />
<Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
<Box component={Stack} direction={['column','row']}sx={{align:'center', justifyContent:'space-between', flexGrow:1}}>
<Box component={Stack} direction={['column','row']} sx={{align:'center', justifyContent:'space-between', flexGrow:1}}>
<Typography sx={{fontSize:['1.5rem','2rem','2rem']}}>Tournaments</Typography>
{ props.user.isLoggedIn ?
<CreateButton /> : null
@ -205,36 +205,36 @@ let showError = (message) => {};
export default function App() {
const [user, setUser] = React.useState({});
let fetchUser = () => {
fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`)
.then(res => res.json())
.then(data => {
if (data.status !== "OK") {
setUser({ isManager: false, isLoggedIn: false });
console.log(data.data); // "No user logged in"
return;
}
let u = data.data;
u.isLoggedIn = true;
console.log("User is logged in")
setUser(u);
})
.catch((err) => {
showError(err.message);
setUser({ isManager: false, isLoggedIn: false });
});
}
// // Debug mode, allow all:
// let fetchUser = () => {
// setUser({
// name: "TEST USERTEST",
// isManager: true,
// isLoggedIn: true,
// email: "testesen@gmail.com",
// asuraId: "123456789",
// googleId: "234"
// });
// fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`)
// .then(res => res.json())
// .then(data => {
// if (data.status !== "OK") {
// setUser({ isManager: false, isLoggedIn: false });
// console.log(data.data); // "No user logged in"
// return;
// }
// let u = data.data;
// u.isLoggedIn = true;
// console.log("User is logged in")
// setUser(u);
// })
// .catch((err) => {
// showError(err.message);
// setUser({ isManager: false, isLoggedIn: false });
// });
// }
// Debug mode, allow all:
let fetchUser = () => {
setUser({
name: "TEST USERTEST",
isManager: true,
isLoggedIn: true,
email: "testesen@gmail.com",
asuraId: "123456789",
googleId: "234"
});
}
React.useEffect(() => {
fetchUser();

2
src/client/src/ProfilePage.js
View File

@ -12,7 +12,6 @@ export default function ProfilePage(props) {
return (<>
<Appbar user={props.user} pageTitle="Profile" />
<Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
<div align="center">
<h2><b>Your profile</b></h2>
@ -23,6 +22,5 @@ export default function ProfilePage(props) {
</Box>
</div>
</Paper>
</Container>
</>)
}

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

@ -113,7 +113,7 @@ function TournamentForm(props) {
<TextField type="text" id="prizeInput" label="Prize" placeholder="Prize" InputLabelProps={{shrink: true}}/>
<Box flexGrow={1}>
<Grid container spacing={2} justifyContent="center">
<Grid item xs={4}>
<Grid item xs={6}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker label={"Start Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={startTime}
onChange={setStartTime}
@ -121,8 +121,7 @@ function TournamentForm(props) {
/>
</LocalizationProvider>
</Grid>
<Grid item xs={4}>
<Grid item xs={6}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker label={"End Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={endTime}
onChange={setEndTime}

6
src/client/src/TournamentHistory.js
View File

@ -54,7 +54,7 @@ function shorten(description, maxLength) {
<Typography variant="body"> End: {props.tournament.endTime.toLocaleString()} </Typography>
</Box>
<Typography variant="h5" color="text.primary" gutterBottom> Players: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
<Typography variant="h5" color="text.primary" gutterBottom> Participants: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
<Description />
<Typography variant="body" color="text.primary"><EmojiEventsIcon alt="A trohpy" color="gold" align="vertical-center"/> Prize: {props.tournament.prize} </Typography>
@ -150,8 +150,8 @@ export default function TournamentHistory(props) {
<>
<Appbar user={props.user} pageTitle="Tournament History" />
<Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
<Box component={Stack} direction="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}>
<Typography variant="h3">Past Tournaments</Typography>
<Box component={Stack} direction="row" align="center" justifyContent="center" alignItems="center" sx={{flexGrow: 1, margin:'2.5% 0'}}>
<Typography sx={{fontSize:['1.5rem','2rem','2rem']}}>Past Tournaments</Typography>
</Box>
<TournamentList />
</Container>

6
src/client/src/TournamentManager.js
View File

@ -134,13 +134,13 @@ function ManageTournament(props) {
return (
<>
<form>
<Stack sx={{minHeight: "30vh", margin: "10px auto"}} direction="column" justifyContent="center" spacing={2} align="center">
<Stack sx={{minHeight: "30vh", margin: "1.5%"}} direction="column" justifyContent="center" spacing={2} align="center">
<TextField type="text" id="editName" label="Edit Name:" placeholder="Edit Name" InputLabelProps={{shrink: true}}/>
<TextField type="text" multiline={true} id="editDesc" label="Edit Description:" placeholder="Edit Description" InputLabelProps={{shrink: true}} />
<TextField type="text" id="editPrize" label="Edit Prize:" placeholder="Edit Prize" InputLabelProps={{shrink: true}}/>
<Box sx={{flexGrow: 1}}>
<Grid container spacing={2} justifyContent="center">
<Grid item xs={4}>
<Grid item xs={6}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker label={"Start Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={startTime}
onChange={setStartTime}
@ -148,7 +148,7 @@ function ManageTournament(props) {
/>
</LocalizationProvider>
</Grid>
<Grid item xs={4}>
<Grid item xs={6}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker label={"End Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm:" inputFormat="yyyy-MM-dd HH:mm" value={endTime}
onChange={setEndTime}

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

@ -20,8 +20,8 @@ function TournamentTier(props){
}
return(
<>
<Box className={`round ${roundTypes[props.tier]}`} sx={{width:['100px', '150px', '200px', '250px', '400px']}}>
<li className="spacer">&nbsp;</li>
<Box component='ul' className={`round ${roundTypes[props.tier]}`} sx={{width:['125px','200px','250px','300px','350px']}}>
<Box component='li' className="spacer">&nbsp;</Box>
{matches}
</Box>
</>
@ -85,41 +85,43 @@ function Match(props){
return (
<>
{/* Team 1 (Winner-status?) (Team name) */}
<li className={`game game-top`}>
<Stack direction={"row"} alignItems="center" spacing={1}>
<Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team1Id === props.match.winnerId) ? "winner" : "loser" : ""}`} align={'center'} sx={{ maxWidth:'70%', overflow:'hidden', wordWrap:'none', fontSize:['2vh', '1.5vh', '2vh', '3vh', '3.5vh', '4vh']}}>
<Box component='li' className={`game game-top`}>
<Stack direction={"row"} alignItems="center" spacing={1} sx={{justifyContent:['start','space-between']}}>
<Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team1Id === props.match.winnerId) ? "winner" : "loser" : ""}`} align={'center'} sx={{ maxWidth:'70%', overflow:'hidden', wordWrap:'none', fontSize:['1em','1em','1.5em','1.75em']}}>
{team1Name}
</Typography>
{ props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
<EmojiEventsIcon alt="A trohpy" />
<EmojiEventsIcon alt="A trohpy" sx={{width:['0.75em','1em','1.25em'], height:['0.75em','1em','1.25em']}} />
}
<Box component={Stack} direction={'row'} spacing={-1.25}>
{ props.match.team1Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn &&
<IconButton color="error" aria-label="remove winner" component="span" onClick={curryUnsetContestant(props.match.team1Id)}><BackspaceIcon /></IconButton>
<IconButton color="error" aria-label="remove winner" component="span" onClick={curryUnsetContestant(props.match.team1Id)}><BackspaceIcon sx={{width:['0.75em','1em','1.25em'], height:['0.75em','1em','1.25em']}} /></IconButton>
}
{ props.match.team1Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn &&
<IconButton onClick={setWinner(props.match.team1Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
<IconButton onClick={setWinner(props.match.team1Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon sx={{width:['0.75em','1em','1.25em'], height:['0.75em','1em','1.25em']}} /></IconButton>
}
</Box>
</Stack>
</li>
<li className="game game-spacer">&nbsp;</li>
</Box>
<Box component='li' className="game game-spacer">&nbsp;</Box>
{/* Team 2 (Winner-status?) (Team name) */}
<li className={`game game-bottom`}>
<Stack direction={"row"} alignItems="center">
<Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team2Id === props.match.winnerId) ? "winner" : "loser" : ""}`} sx={{maxWidth:'70%', overflow:'hidden', wordWrap:'none',fontSize:['2vh', '1.5vh', '2vh', '3vh', '3.5vh', '4vh']}}>
<Box component='li' className={`game game-bottom`}>
<Stack direction={"row"} alignItems="center" sx={{justifyContent:['start','space-between']}}>
<Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team2Id === props.match.winnerId) ? "winner" : "loser" : ""}`} sx={{maxWidth:'70%', overflow:'hidden', wordWrap:'none',fontSize:['1em','1em','1.5em','1.75em']}}>
{team2Name}
</Typography>
{ props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
<EmojiEventsIcon alt="A trohpy" />
<EmojiEventsIcon alt="A trohpy" sx={{width:['0.75em','1em','1.25em'], height:['0.75em','1em','1.25em']}} />
}
{ props.match.team2Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn &&
<IconButton color="error" aria-label="remove winner" component="span" onClick={curryUnsetContestant(props.match.team2Id)}><BackspaceIcon /></IconButton>
<IconButton color="error" aria-label="remove winner" component="span" onClick={curryUnsetContestant(props.match.team2Id)}><BackspaceIcon sx={{width:['0.75em','1em','1.25em'], height:['0.75em','1em','1.25em']}} /></IconButton>
}
{ props.match.team2Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn &&
<IconButton onClick={setWinner(props.match.team2Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
<IconButton onClick={setWinner(props.match.team2Id)} color="success" aria-label="select winner" component="span" ><AddCircleIcon sx={{width:['0.75em','1em','1.25em'], height:['0.75em','1em','1.25em']}} /></IconButton>
}
</Stack>
</li>
<li className="spacer">&nbsp;</li>
</Box>
<Box component='li' className="spacer">&nbsp;</Box>
</>
);
}
@ -146,21 +148,21 @@ function WinnerDisplay(props) {
if (!props.team) {
// Winner is not yet chosen
return <div className="winnerDisplay">
<Typography variant="h5" component="h2">
<Typography sx={{fontSize:['1em','1em','1.5em','2em']}}>
Winner is not chosen.<br /> Will it be you?
</Typography>
</div>;
}
return (
<div className="winnerDisplay winner">
<Typography variant="h4" component="h2" align="center">
<div className="winnerDisplay">
<Typography align="center">
{props.user.isLoggedIn && !props.tournament.hasEnded && <IconButton color="error" aria-label="remove winner" component="span" onClick={unsetWinner}><BackspaceIcon /></IconButton>}
Winner:
</Typography>
<Typography variant="h4" component="h2">
{props.team.name}<EmojiEventsIcon alt="A trohpy" />
<Typography sx={{fontSize:['1em','1em','1.5em','2em']}} className="winner">
{props.team.name}
</Typography>
<EmojiEventsIcon alt="A trohpy" />
</div>
)
}

6
src/client/src/TournamentTeams.js
View File

@ -39,12 +39,12 @@ function TeamCreator(props) {
}
return (
<Paper sx={{width: "90vw", margin: "10px auto", padding: "15px"}} component={Stack} direction="column">
<Paper sx={{width: "90vw", margin: "10px auto", padding: "15px", align:'center', justifyContent:'center', flexGrow:1}} component={Stack} direction={['column']} spacing={2}>
<div align="center">
<form>
<TextField id="teamNameInput" sx={{ width: "70%" }} label="Team Name" variant="outlined" />
<TextField id="teamNameInput" sx={{width:['auto','50%','60%','70%'], margin:'1% 0'}} label="Team Name" variant="outlined" />
{/* <Button variant="contained" color="primary" onClick={postCreate}>Create Team</Button> */}
<Button type="submit" variant="contained" color="success" onClick={postCreate} sx={{width: "20%", marginLeft: "5px"}}>
<Button type="submit" variant="contained" color="success" onClick={postCreate} sx={{ margin:'1% 1%',width:['fit-content','40%','30%','20%']}}>
<Box sx={{padding: "10px"}}>
Create Team
</Box>

8
src/client/src/components/AsuraBar.js
View File

@ -67,19 +67,19 @@ export default function Appbar(props) {
<Grid item xs={2}>
<Box sx={{ width:"100%", height: "100%", justifyContent:"left", align: "center", alignItems:"center", margin: "none", padding: "none", color: "white" ,display: "flex", flexFlow: "row"}}>
<Link to="/">
<img sx={{width: "10%"}} src={logo} alt="Tournament logo" className="mainIcon"></img>
<Box component="img" src={logo} alt="Tournament logo" className="mainIcon" sx={{height:['55px','65px'], width:['55px','65px']}}></Box>
</Link>
{ props.pageTitle !== "Asura Tournaments" &&
<Link to="/" style={{color:"white"}}>
<Typography component="div" align="center">
<Typography component="div" align="center" sx={{fontSize:['1em','1em','1.5em','2em']}}>
Home
</Typography>
</Link>
}
</Box>
</Grid>
<Grid item xs={2} sm={3} md={4} lg={6} xl={8}>
<Typography component="div" sx={{fontSize:['0.5rem','1rem','1.5rem','2rem']}}>{props.pageTitle || ""}</Typography>
<Grid item xs={4} md={6} lg={8}>
<Typography component="div" sx={{fontSize:['1em','1em','1.5em','2em']}}>{props.pageTitle || ""}</Typography>
</Grid>
{ props.pageTitle !== "Login" ?
<Grid item xs={2}>

10
src/client/src/components/TournamentBar.js
View File

@ -27,7 +27,7 @@ function ClipboardButton(props) {
return (
<>
<Button onClick={copyString} variant="outlined" color="primary" sx={{margin: "auto 5px"}} >Copy {props.name}</Button>
<Button onClick={copyString} variant="outlined" color="primary" sx={{margin:'1.5%', fontSize:['0.75em']}} >Copy {props.name}</Button>
<Snackbar open={open} autoHideDuration={1500} onClose={handleClose} action={closeAction}>
<Alert onClose={handleClose} severity="info" sx={{ width: '100%' }}>
{props.name + " copied to clipboard"}
@ -40,7 +40,7 @@ function ClipboardButton(props) {
function ButtonLink(props) {
return (
<Link to={`/tournament/${props.tournamentId}` + props.targetPath} >
<Button variant="contained" color="primary" disabled={props.activeTitle === props.title || props.viewTournament} sx={{margin: "1.5vw", fontSize: "1.2em"}} >{props.title}</Button>
<Button variant="contained" color="primary" disabled={props.activeTitle === props.title || props.viewTournament} sx={{fontSize:['0.7em','0.75em']}} >{props.title}</Button>
</Link>
);
}
@ -48,9 +48,9 @@ function ButtonLink(props) {
export default function TournamentBar(props) {
const { tournamentId } = useParams();
return (
<Paper sx={{width: ["90vw",], margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center">
<Stack direction="row" paddingTop={'0.5%'}>
<ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" viewTournament={props.viewTournament} sx={{}}/>
<Paper sx={{width: ["90vw",], fontSize:['1rem','1rem','1.5rem','2rem'], margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center">
<Stack direction="row" paddingTop={'0.5%'} sx={{fontSize:['1rem','1rem','1.5rem','2rem'], margin:'1.5%'}} spacing={2}>
<ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" viewTournament={props.viewTournament}/>
<ButtonLink targetPath="/manage" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Edit Tournament" />
<ButtonLink targetPath="/teams" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Manage Teams" />
</Stack>

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

@ -67,9 +67,9 @@ li.game-bottom{
margin: auto 5px;
padding: 10px;
}
.winnerDisplay.winner {
border: 2px solid green;
.winnerDisplay > p.winner {
color:green;
}
.winnerDisplay > h2 {
.winnerDisplay > div.winner {
margin-right: 10px;
}

2
src/client/src/index.css
View File

@ -24,8 +24,6 @@ code {
}
.mainIcon{
height: 65px;
width: 65px;
border-radius: 50%;
/* border: 5px dotted salmon; */
border: 3px solid #1ab35a;