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

Responsive UI Update

Browse Source
This commit is contained in:
Kristoffer Juelsenn 2022-04-25 10:02:27 +02:00
parent 9526048124
commit 020ab4de84
4 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -183,8 +183,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="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}>
{/* <CreateButton /> */}
<Typography variant="h3">Tournaments</Typography>
<Typography sx={{fontSize:['1.5rem','2rem','2rem']}}>Tournaments</Typography>
{ props.user.isLoggedIn ?
<CreateButton /> : null
}
@ -206,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();

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

@ -20,7 +20,7 @@ function TournamentTier(props){
}
return(
<>
<Box className={`round ${roundTypes[props.tier]}`} sx={{width:['50px', '150px', '200px', '250px', '300px']}}>
<Box className={`round ${roundTypes[props.tier]}`} sx={{width:['100px', '150px', '200px', '250px', '400px']}}>
<li className="spacer">&nbsp;</li>
{matches}
</Box>
@ -89,7 +89,7 @@ function Match(props){
{/* 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', '1vh', '1.5vh', '2vh', '2.5vh', '3vh']}}>
<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']}}>
{team1Name}
</Typography>
{ props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
@ -107,11 +107,11 @@ function Match(props){
{/* 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', '1vh', '1.5vh', '2vh', '2.5vh', '3vh']}}>
<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']}}>
{team2Name}
</Typography>
{ props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
<EmojiEventsIcon alt="A trohpy" color="gold" />
<EmojiEventsIcon alt="A trohpy" />
}
{ 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>

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

@ -78,8 +78,8 @@ export default function Appbar(props) {
}
</Box>
</Grid>
<Grid item xs={8}>
<Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
<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>
{ props.pageTitle !== "Login" ?
<Grid item xs={2}>

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

@ -39,9 +39,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">
<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} />
<ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" viewTournament={props.viewTournament} sx={{}}/>
<ButtonLink targetPath="/manage" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Edit Tournament" />
<ButtonLink targetPath="/teams" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Manage Teams" />
</Stack>
@ -50,6 +50,5 @@ export default function TournamentBar(props) {
<ClipboardButton clipboardContent={"https://asura.feal.no/tournament/" + tournamentId} name="Tournament Link" />
</Stack>
</Paper>
)
}