Responsive UI Update
This commit is contained in:
parent
9526048124
commit
020ab4de84
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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"> </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>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue