mirror of
https://github.com/narrrl/holy-flavor-rater.git
synced 2026-11-03 16:41:27 +01:00
updated login screen and frontpage
This commit is contained in:
nvrl committed
1 parent
5da04e3cc5
commit
7b87a4cbb4
3 files changed
+110
-95
No files matched your search
+86
-85
@@ -68,7 +68,6 @@ const GlobalSearch = () => {
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Redirect to categories page with search query
|
||||
if (query.trim()) {
|
||||
navigate(`/?q=${encodeURIComponent(query.trim())}`);
|
||||
} else {
|
||||
@@ -77,7 +76,7 @@ const GlobalSearch = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1, maxWidth: 400, mx: 2 }}>
|
||||
<Box sx={{ flexGrow: 1, maxWidth: { xs: 'none', sm: 400 }, mx: { xs: 1, sm: 2 } }}>
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
size="small"
|
||||
@@ -98,7 +97,7 @@ const GlobalSearch = () => {
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder="Search catalog..."
|
||||
placeholder="Search..."
|
||||
sx={{
|
||||
bgcolor: 'action.hover',
|
||||
borderRadius: 1,
|
||||
@@ -222,93 +221,95 @@ const App: React.FC = () => {
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Router>
|
||||
<AppBar position="fixed" elevation={1}>
|
||||
<Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, px: { xs: 2, sm: 4, md: 6 } }}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
edge="start"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
sx={{ mr: 2, display: { md: 'none' } }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
<Typography variant="h6" component="div" sx={{ fontWeight: 'bold', display: { xs: 'none', sm: 'block' } }}>
|
||||
<Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>Holy Flavors</Link>
|
||||
</Typography>
|
||||
|
||||
<GlobalSearch />
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{!isMobile && !loadingUser && (
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
{navItems.map((item) => (
|
||||
<Button key={item.label} color="inherit" component={Link} to={item.path}>{item.label}</Button>
|
||||
))}
|
||||
{user && (
|
||||
<Button color="inherit" onClick={handleLogout} sx={{ ml: 1 }}>Logout</Button>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<IconButton color="inherit" onClick={(e) => setAnchorEl(e.currentTarget)} sx={{ ml: 1 }}>
|
||||
<PaletteIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={() => setAnchorEl(null)}
|
||||
sx={{ maxHeight: 500 }}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', width: '100%', overflowX: 'hidden' }}>
|
||||
<AppBar position="fixed" elevation={1}>
|
||||
<Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, px: { xs: 1, sm: 4, md: 6 } }}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
edge="start"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
sx={{ mr: { xs: 0, sm: 2 }, display: { md: 'none' } }}
|
||||
>
|
||||
<ListSubheader>Light Themes</ListSubheader>
|
||||
<MenuItem onClick={() => handleThemeChange('latte')}>Latte</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('pink')}>Pastel Pink</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('solarized_light')}>Solarized Light</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('one_light')}>One Light</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('paper')}>Paper White</MenuItem>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
<Divider />
|
||||
<Typography variant="h6" component="div" sx={{ fontWeight: 'bold', display: { xs: 'none', md: 'block' } }}>
|
||||
<Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>Holy Flavors</Link>
|
||||
</Typography>
|
||||
|
||||
<ListSubheader>Dark Themes</ListSubheader>
|
||||
<MenuItem onClick={() => handleThemeChange('mocha')}>Mocha (Default)</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('frappe')}>Frappé</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('macchiato')}>Macchiato</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('atom')}>Atom One Dark</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('dracula')}>Dracula</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('gruvbox')}>Gruvbox Dark</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('nord')}>Nord</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('cyberpunk')}>Cyberpunk</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('forest')}>Forest Dark</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Toolbar sx={{ minHeight: { xs: 56, sm: 64 } }} />
|
||||
<GlobalSearch />
|
||||
|
||||
<Drawer
|
||||
variant="temporary"
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{!isMobile && !loadingUser && (
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
{navItems.map((item) => (
|
||||
<Button key={item.label} color="inherit" component={Link} to={item.path}>{item.label}</Button>
|
||||
))}
|
||||
{user && (
|
||||
<Button color="inherit" onClick={handleLogout} sx={{ ml: 1 }}>Logout</Button>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ mt: 4, pb: 4 }}>
|
||||
<Routes>
|
||||
<Route path="/" element={<CategoryList />} />
|
||||
<Route path="/category/:slug" element={<CategoryFlavors />} />
|
||||
<Route path="/flavor/:id" element={<FlavorDetail />} />
|
||||
<Route path="/profile/:username" element={<PublicProfile />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
</Routes>
|
||||
<IconButton color="inherit" onClick={(e) => setAnchorEl(e.currentTarget)} sx={{ ml: 1 }}>
|
||||
<PaletteIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={() => setAnchorEl(null)}
|
||||
sx={{ maxHeight: 500 }}
|
||||
>
|
||||
<ListSubheader>Light Themes</ListSubheader>
|
||||
<MenuItem onClick={() => handleThemeChange('latte')}>Latte</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('pink')}>Pastel Pink</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('solarized_light')}>Solarized Light</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('one_light')}>One Light</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('paper')}>Paper White</MenuItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
<ListSubheader>Dark Themes</ListSubheader>
|
||||
<MenuItem onClick={() => handleThemeChange('mocha')}>Mocha (Default)</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('frappe')}>Frappé</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('macchiato')}>Macchiato</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('atom')}>Atom One Dark</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('dracula')}>Dracula</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('gruvbox')}>Gruvbox Dark</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('nord')}>Nord</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('cyberpunk')}>Cyberpunk</MenuItem>
|
||||
<MenuItem onClick={() => handleThemeChange('forest')}>Forest Dark</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Toolbar sx={{ minHeight: { xs: 56, sm: 64 } }} />
|
||||
|
||||
<Box sx={{ flexGrow: 1, py: 4, width: '100%' }}>
|
||||
<Routes>
|
||||
<Route path="/" element={<CategoryList />} />
|
||||
<Route path="/category/:slug" element={<CategoryFlavors />} />
|
||||
<Route path="/flavor/:id" element={<FlavorDetail />} />
|
||||
<Route path="/profile/:username" element={<PublicProfile />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
</Routes>
|
||||
</Box>
|
||||
|
||||
<Drawer
|
||||
variant="temporary"
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Box>
|
||||
</Router>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -95,7 +95,7 @@ const CategoryList: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
|
||||
<Typography variant="h4" gutterBottom>Search Results for "{query}"</Typography>
|
||||
<Typography variant="h4" gutterBottom sx={{ overflowWrap: 'break-word' }}>Search Results for "{query}"</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
Found {filteredFlavors.length} items
|
||||
</Typography>
|
||||
@@ -136,8 +136,8 @@ const CategoryList: React.FC = () => {
|
||||
|
||||
// --- HOME VIEW ---
|
||||
return (
|
||||
<Box>
|
||||
{/* Hero Section - True Full Width */}
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* Hero Section - True Full Width, No Overflow */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
@@ -150,18 +150,30 @@ const CategoryList: React.FC = () => {
|
||||
textAlign: 'center',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.1)',
|
||||
width: '100%',
|
||||
mt: -4 // Counter the parent Box mt
|
||||
mt: -4, // Counter the parent Box py: 4
|
||||
boxSizing: 'border-box',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 'bold', fontSize: { xs: '2.5rem', md: '4.5rem' } }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
component="h1"
|
||||
gutterBottom
|
||||
sx={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: { xs: '2.2rem', sm: '3rem', md: '4.5rem' },
|
||||
overflowWrap: 'break-word',
|
||||
px: 2
|
||||
}}
|
||||
>
|
||||
The Ultimate Holy Archive
|
||||
</Typography>
|
||||
<Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto' }}>
|
||||
<Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto', px: 2 }}>
|
||||
Browse every flavor ever released, discover new favorites, and share your ratings with the community.
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap', px: 2 }}>
|
||||
<Button variant="contained" size="large" component={Link} to="/login" sx={{ px: 4, py: 1.5, borderRadius: 2 }}>
|
||||
Join the Community
|
||||
Join Community
|
||||
</Button>
|
||||
<Button variant="outlined" size="large" onClick={() => {
|
||||
const element = document.getElementById('categories');
|
||||
@@ -212,7 +224,7 @@ const CategoryList: React.FC = () => {
|
||||
<Typography variant="h4" sx={{ mb: 4, fontWeight: 'bold' }}>Browse by Category</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
|
||||
{categories.map(category => (
|
||||
<Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 23%' }, minWidth: 280 }}>
|
||||
<Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 30%' }, minWidth: 280 }}>
|
||||
<Link to={`/category/${category.slug}`} style={{ textDecoration: 'none' }}>
|
||||
<Card sx={{
|
||||
height: 120,
|
||||
|
||||
@@ -216,6 +216,8 @@ const Login: React.FC<LoginProps> = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const adminUrl = (import.meta.env.VITE_API_URL || 'http://localhost:8000/api/').replace('/api/', '/admin/');
|
||||
|
||||
return (
|
||||
<Container maxWidth="xs" sx={{ mt: 8 }}>
|
||||
<Paper sx={{ p: 3 }}>
|
||||
@@ -224,7 +226,7 @@ const Login: React.FC<LoginProps> = () => {
|
||||
</Paper>
|
||||
<Box sx={{ mt: 2, textAlign: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Admin? Use <a href="http://localhost:8000/admin/" target="_blank" rel="noreferrer">Django Admin</a>
|
||||
Admin? Use <a href={adminUrl} target="_blank" rel="noreferrer">Django Admin</a>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
Reference in new issue
Block a user