Fix background image styling - Ensure wallpaper covers full viewport
This commit is contained in:
Starstrike
File diff suppressed because it is too large
Load Diff
@@ -137,178 +137,183 @@ const EventView: React.FC = () => {
|
|||||||
sx={{
|
sx={{
|
||||||
minHeight: '100vh',
|
minHeight: '100vh',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
backgroundRepeat: 'no-repeat',
|
backgroundRepeat: 'no-repeat',
|
||||||
backgroundAttachment: 'fixed',
|
backgroundAttachment: 'fixed',
|
||||||
backgroundColor: '#000',
|
backgroundColor: '#000',
|
||||||
position: 'relative',
|
|
||||||
overflowY: 'auto',
|
overflowY: 'auto',
|
||||||
py: 4,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Container maxWidth="lg" sx={{ position: 'relative', zIndex: 1 }}>
|
<Box sx={{ py: 4 }}>
|
||||||
<Paper elevation={3} sx={{ p: { xs: 2, sm: 4 }, mt: 4 }}>
|
<Container maxWidth="lg">
|
||||||
<Box sx={{ mb: 4 }}>
|
<Paper elevation={3} sx={{ p: { xs: 2, sm: 4 }, mt: 4 }}>
|
||||||
<Typography variant="h4" component="h2" color="primary" gutterBottom>
|
<Box sx={{ mb: 4 }}>
|
||||||
{event.title} - RSVPs
|
<Typography variant="h4" component="h2" color="primary" gutterBottom>
|
||||||
</Typography>
|
{event.title} - RSVPs
|
||||||
<Box sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
gap: 2,
|
|
||||||
mb: 3
|
|
||||||
}}>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
onClick={() => navigate('/')}
|
|
||||||
sx={{
|
|
||||||
minWidth: 'fit-content',
|
|
||||||
whiteSpace: 'nowrap'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Back to Events
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ mb: 4 }}>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>Info:</strong> {event.description || 'None'}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>Location:</strong> {event.location}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>Date:</strong> {new Date(event.date).toLocaleString()}
|
|
||||||
</Typography>
|
|
||||||
{event.rsvp_cutoff_date && (
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>RSVP cut-off date:</strong> {new Date(event.rsvp_cutoff_date).toLocaleString()}
|
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
<Box sx={{
|
||||||
</Box>
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
<Box sx={{ mb: 4 }}>
|
gap: 2,
|
||||||
<Typography variant="h6" gutterBottom>
|
mb: 3
|
||||||
Items Status
|
}}>
|
||||||
</Typography>
|
<Button
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: '60%' }}>
|
variant="outlined"
|
||||||
<Box>
|
onClick={() => navigate('/')}
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
sx={{
|
||||||
Still Needed:
|
minWidth: 'fit-content',
|
||||||
</Typography>
|
whiteSpace: 'nowrap'
|
||||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
}}
|
||||||
{neededItems.map((item: string, index: number) => (
|
>
|
||||||
<Chip
|
Back to Events
|
||||||
key={`${item}-${index}`}
|
</Button>
|
||||||
label={item}
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{neededItems.length === 0 && (
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
All items have been claimed
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
<Box>
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
|
<strong>Info:</strong> {event.description || 'None'}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
|
<strong>Location:</strong> {event.location}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
|
<strong>Date:</strong> {new Date(event.date).toLocaleString()}
|
||||||
|
</Typography>
|
||||||
|
{event.rsvp_cutoff_date && (
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
Claimed Items:
|
<strong>RSVP cut-off date:</strong> {new Date(event.rsvp_cutoff_date).toLocaleString()}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
)}
|
||||||
{claimedItems.map((item: string, index: number) => (
|
</Box>
|
||||||
<Chip
|
|
||||||
key={`${item}-${index}`}
|
<Box sx={{ mb: 4 }}>
|
||||||
label={item}
|
<Typography variant="h6" gutterBottom>
|
||||||
color="success"
|
Items Status
|
||||||
/>
|
</Typography>
|
||||||
))}
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: '60%' }}>
|
||||||
{claimedItems.length === 0 && (
|
<Box>
|
||||||
<Typography variant="body2" color="text.secondary">
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
No items have been claimed yet
|
Still Needed:
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||||
|
{neededItems.map((item: string, index: number) => (
|
||||||
|
<Chip
|
||||||
|
key={`${item}-${index}`}
|
||||||
|
label={item}
|
||||||
|
color="primary"
|
||||||
|
variant="outlined"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{neededItems.length === 0 && (
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
All items have been claimed
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
|
Claimed Items:
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||||
|
{claimedItems.map((item: string, index: number) => (
|
||||||
|
<Chip
|
||||||
|
key={`${item}-${index}`}
|
||||||
|
label={item}
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{claimedItems.length === 0 && (
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
No items have been claimed yet
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Typography variant="h6" gutterBottom>
|
<Typography variant="h6" gutterBottom>
|
||||||
RSVPs ({rsvps.length})
|
RSVPs ({rsvps.length})
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<TableContainer sx={{
|
<TableContainer sx={{
|
||||||
overflowX: 'auto',
|
overflowX: 'auto',
|
||||||
'& .MuiTable-root': {
|
'& .MuiTable-root': {
|
||||||
minWidth: { xs: '100%', sm: 650 }
|
minWidth: { xs: '100%', sm: 650 }
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<Table>
|
<Table>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell>Name</TableCell>
|
<TableCell>Name</TableCell>
|
||||||
<TableCell>Attending</TableCell>
|
<TableCell>Attending</TableCell>
|
||||||
<TableCell>Guests</TableCell>
|
<TableCell>Guests</TableCell>
|
||||||
<TableCell>Items Bringing</TableCell>
|
<TableCell>Items Bringing</TableCell>
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{rsvps.map((rsvp: RSVP) => (
|
|
||||||
<TableRow key={rsvp.id}>
|
|
||||||
<TableCell>{rsvp.name}</TableCell>
|
|
||||||
<TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{rsvp.bringing_guests === 'yes' ?
|
|
||||||
`${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` :
|
|
||||||
'No'
|
|
||||||
}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
|
||||||
{(() => {
|
|
||||||
let items: string[] = [];
|
|
||||||
try {
|
|
||||||
if (typeof rsvp.items_bringing === 'string') {
|
|
||||||
try {
|
|
||||||
const parsed = JSON.parse(rsvp.items_bringing);
|
|
||||||
items = Array.isArray(parsed) ? parsed : [];
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error parsing items_bringing JSON in table:', e);
|
|
||||||
}
|
|
||||||
} else if (Array.isArray(rsvp.items_bringing)) {
|
|
||||||
items = rsvp.items_bringing;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error processing items in table:', e);
|
|
||||||
}
|
|
||||||
|
|
||||||
return items.length > 0 ? items.map((item: string, index: number) => (
|
|
||||||
<Chip
|
|
||||||
key={`${item}-${index}`}
|
|
||||||
label={item}
|
|
||||||
color="success"
|
|
||||||
size="small"
|
|
||||||
variant={claimedItems.includes(item) ? "filled" : "outlined"}
|
|
||||||
/>
|
|
||||||
)) : (
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
No items
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</Box>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
</TableHead>
|
||||||
</TableBody>
|
<TableBody>
|
||||||
</Table>
|
{rsvps.map((rsvp: RSVP) => (
|
||||||
</TableContainer>
|
<TableRow key={rsvp.id}>
|
||||||
</Paper>
|
<TableCell>{rsvp.name}</TableCell>
|
||||||
</Container>
|
<TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{rsvp.bringing_guests === 'yes' ?
|
||||||
|
`${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` :
|
||||||
|
'No'
|
||||||
|
}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||||
|
{(() => {
|
||||||
|
let items: string[] = [];
|
||||||
|
try {
|
||||||
|
if (typeof rsvp.items_bringing === 'string') {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(rsvp.items_bringing);
|
||||||
|
items = Array.isArray(parsed) ? parsed : [];
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error parsing items_bringing JSON in table:', e);
|
||||||
|
}
|
||||||
|
} else if (Array.isArray(rsvp.items_bringing)) {
|
||||||
|
items = rsvp.items_bringing;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error processing items in table:', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
return items.length > 0 ? items.map((item: string, index: number) => (
|
||||||
|
<Chip
|
||||||
|
key={`${item}-${index}`}
|
||||||
|
label={item}
|
||||||
|
color="success"
|
||||||
|
size="small"
|
||||||
|
variant={claimedItems.includes(item) ? "filled" : "outlined"}
|
||||||
|
/>
|
||||||
|
)) : (
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
No items
|
||||||
|
</Typography>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</Box>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</Paper>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user