mirror of
https://github.com/narrrl/holy-flavor-rater.git
synced 2026-11-04 08:57:01 +01:00
fixed some radius issues
This commit is contained in:
nvrl committed
1 parent
e043d9a933
commit
6cf8b42c38
2 files changed
+76
-50
No files matched your search
@@ -255,14 +255,13 @@ const Dashboard: React.FC = () => {
|
||||
{/* TAB 0: MY REVIEWS */}
|
||||
{activeTab === 0 && (
|
||||
<Box>
|
||||
{/* Filter Controls for Reviews */}
|
||||
<Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ mb: 4 }}>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<TextField
|
||||
fullWidth placeholder={t('dashboard.searchRated')}
|
||||
value={ratedSearch} onChange={e => setRatedSearch(e.target.value)}
|
||||
slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon /></InputAdornment> } }}
|
||||
sx={{ bgcolor: 'background.paper', borderRadius: 2 }}
|
||||
sx={{ bgcolor: 'background.paper', borderRadius: 1, '& .MuiOutlinedInput-root': { borderRadius: 1 } }}
|
||||
/>
|
||||
</Box>
|
||||
<Stack direction="row" spacing={1} sx={{ overflowX: 'auto', pb: 1, '&::-webkit-scrollbar': { display: 'none' } }}>
|
||||
@@ -272,22 +271,22 @@ const Dashboard: React.FC = () => {
|
||||
onClick={() => setRatedCategory(cat)}
|
||||
color={ratedCategory === cat ? 'primary' : 'default'}
|
||||
variant={ratedCategory === cat ? 'filled' : 'outlined'}
|
||||
sx={{ fontWeight: 'bold', height: 40, px: 1 }}
|
||||
sx={{ fontWeight: 'bold', height: 40, px: 1, borderRadius: 1 }}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
|
||||
<Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider' }}>
|
||||
<Button
|
||||
size="small" variant={ratedSort === 'date' ? 'contained' : 'text'}
|
||||
onClick={() => setRatedSort('date')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold' }}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
|
||||
>
|
||||
{t('dashboard.date')}
|
||||
</Button>
|
||||
<Button
|
||||
size="small" variant={ratedSort === 'rating' ? 'contained' : 'text'}
|
||||
onClick={() => setRatedSort('rating')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold' }}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
|
||||
>
|
||||
{t('dashboard.rating')}
|
||||
</Button>
|
||||
@@ -336,9 +335,9 @@ const Dashboard: React.FC = () => {
|
||||
<>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<Avatar src={rating.flavor_image || undefined} variant="rounded" sx={{ width: 60, height: 60, bgcolor: 'action.hover', border: '1px solid', borderColor: 'divider', p: 0.5 }}>
|
||||
F
|
||||
</Avatar>
|
||||
<Box sx={{ width: 64, height: 64, bgcolor: 'background.default', border: '1px solid', borderColor: 'divider', borderRadius: 1.5, overflow: 'hidden', flexShrink: 0 }}>
|
||||
<Box component="img" src={rating.flavor_image || undefined} sx={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold', lineHeight: 1.2 }}>
|
||||
<Link to={`/flavor/${rating.flavor}`} style={{ color: 'inherit', textDecoration: 'none' }}>{rating.flavor_name}</Link>
|
||||
@@ -424,7 +423,7 @@ const Dashboard: React.FC = () => {
|
||||
fullWidth placeholder={t('dashboard.searchMissing')}
|
||||
value={exploreSearch} onChange={e => setExploreSearch(e.target.value)}
|
||||
slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon /></InputAdornment> } }}
|
||||
sx={{ bgcolor: 'background.paper', borderRadius: 2 }}
|
||||
sx={{ bgcolor: 'background.paper', borderRadius: 1, '& .MuiOutlinedInput-root': { borderRadius: 1 } }}
|
||||
/>
|
||||
</Box>
|
||||
<Stack direction="row" spacing={1} sx={{ overflowX: 'auto', pb: 1, '&::-webkit-scrollbar': { display: 'none' } }}>
|
||||
@@ -434,22 +433,22 @@ const Dashboard: React.FC = () => {
|
||||
onClick={() => setExploreCategory(cat)}
|
||||
color={exploreCategory === cat ? 'primary' : 'default'}
|
||||
variant={exploreCategory === cat ? 'filled' : 'outlined'}
|
||||
sx={{ fontWeight: 'bold', height: 40, px: 1 }}
|
||||
sx={{ fontWeight: 'bold', height: 40, px: 1, borderRadius: 1 }}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
|
||||
<Stack direction="row" spacing={1} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider' }}>
|
||||
<Button
|
||||
size="small" variant={exploreSort === 'community' ? 'contained' : 'text'}
|
||||
onClick={() => setExploreSort('community')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold' }}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
|
||||
>
|
||||
{t('dashboard.communityRating')}
|
||||
</Button>
|
||||
<Button
|
||||
size="small" variant={exploreSort === 'circle' ? 'contained' : 'text'}
|
||||
onClick={() => setExploreSort('circle')}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold' }}
|
||||
sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8 }}
|
||||
>
|
||||
{t('dashboard.circleRating')}
|
||||
</Button>
|
||||
@@ -463,21 +462,42 @@ const Dashboard: React.FC = () => {
|
||||
) : (
|
||||
<Grid container spacing={2}>
|
||||
{filteredMissing.map(flavor => (
|
||||
<Grid key={flavor.id} size={{ xs: 12, sm: 6, md: 4 }}>
|
||||
<Grid key={flavor.id} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<Card elevation={0} sx={{
|
||||
height: '100%', borderRadius: 3, border: '1px solid', borderColor: 'divider',
|
||||
transition: 'all 0.2s ease', '&:hover': { transform: 'translateY(-4px)', borderColor: 'primary.main', boxShadow: 4 }
|
||||
height: '100%', borderRadius: 1.5, border: '1px solid', borderColor: 'divider',
|
||||
transition: 'all 0.2s ease', '&:hover': { transform: 'translateY(-4px)', borderColor: 'primary.main', boxShadow: 4 },
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<Link to={`/flavor/${flavor.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<Box sx={{ position: 'relative', aspectRatio: '16/10', bgcolor: 'action.hover', display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2 }}>
|
||||
<Box component="img" src={flavor.image_url || undefined} sx={{ height: '100%', maxWidth: '100%', objectFit: 'contain', filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.1))' }} />
|
||||
<Box sx={{ position: 'absolute', top: 10, left: 10 }}>
|
||||
<Box sx={{
|
||||
position: 'relative',
|
||||
aspectRatio: '1/1',
|
||||
bgcolor: 'background.default',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<Box
|
||||
component="img"
|
||||
src={flavor.image_url || undefined}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
transition: 'transform 0.5s ease',
|
||||
'&:hover': { transform: 'scale(1.1)' }
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ position: 'absolute', top: 10, left: 10, zIndex: 2 }}>
|
||||
<RatingBadge score={flavor.average_rating || 0} size="small" />
|
||||
</Box>
|
||||
{flavor.followed_average_rating && (
|
||||
<Box sx={{ position: 'absolute', top: 10, right: 10 }}>
|
||||
<Box sx={{ position: 'absolute', top: 10, right: 10, zIndex: 2 }}>
|
||||
<Tooltip title={t('dashboard.circleAvg')}>
|
||||
<Box sx={{ bgcolor: alpha(theme.palette.secondary.main, 0.9), color: 'white', px: 1, py: 0.2, borderRadius: 1, display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Box sx={{ bgcolor: alpha(theme.palette.secondary.main, 0.9), color: 'white', px: 1, py: 0.2, borderRadius: 1, display: 'flex', alignItems: 'center', gap: 0.5, boxShadow: 2 }}>
|
||||
<VerifiedIcon sx={{ fontSize: '0.8rem' }} />
|
||||
<Typography variant="caption" sx={{ fontWeight: '900' }}>{flavor.followed_average_rating.toFixed(1)}</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -272,22 +272,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flex: 1, textAlign: { xs: 'center', sm: 'left' } }}>
|
||||
<Box sx={{ mb: 0.5 }}>
|
||||
<Typography
|
||||
variant="overline"
|
||||
sx={{
|
||||
fontWeight: '900',
|
||||
color: 'primary.main',
|
||||
letterSpacing: 3,
|
||||
opacity: 0.9,
|
||||
fontSize: '0.7rem',
|
||||
textTransform: 'uppercase'
|
||||
}}
|
||||
>
|
||||
Taste Profile
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, textAlign: { xs: 'center', sm: 'left' }, mt: { xs: 2, sm: 6 } }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
@@ -298,13 +283,13 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
color: 'text.primary',
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
mb: 1
|
||||
mb: 2.5
|
||||
}}
|
||||
>
|
||||
{data.username}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Box>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
@@ -312,7 +297,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
bgcolor: (theme) => alpha(theme.palette.text.primary, 0.04),
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 3,
|
||||
borderRadius: 1,
|
||||
overflow: 'hidden',
|
||||
backdropFilter: 'blur(8px)'
|
||||
}}
|
||||
@@ -323,7 +308,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
{ label: 'Following', val: data.following_count }
|
||||
].map((stat, i) => (
|
||||
<React.Fragment key={stat.label}>
|
||||
<Box sx={{ py: 1.2, width: { xs: 85, sm: 115 }, textAlign: 'center' }}>
|
||||
<Box sx={{ py: 1.2, width: { xs: 90, sm: 120 }, textAlign: 'center' }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: '900', lineHeight: 1, color: 'text.primary' }}>{stat.val}</Typography>
|
||||
<Typography variant="caption" sx={{ fontWeight: '900', textTransform: 'uppercase', opacity: 0.5, fontSize: '0.6rem', letterSpacing: 1 }}>{stat.label}</Typography>
|
||||
</Box>
|
||||
@@ -360,13 +345,13 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Box sx={{ mb: 4, position: 'sticky', top: 80, zIndex: 10, bgcolor: alpha(theme.palette.background.default, 0.9), backdropFilter: 'blur(12px)', py: 1, borderRadius: 3, border: '1px solid', borderColor: alpha(theme.palette.divider, 0.1) }}>
|
||||
<Box sx={{ mb: 4, position: 'sticky', top: 80, zIndex: 10, bgcolor: alpha(theme.palette.background.default, 0.9), backdropFilter: 'blur(12px)', py: 1, borderRadius: 1, border: '1px solid', borderColor: alpha(theme.palette.divider, 0.1) }}>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(_, v) => setActiveTab(v)}
|
||||
variant="fullWidth"
|
||||
sx={{
|
||||
'& .MuiTab-root': { fontWeight: '900', textTransform: 'none', fontSize: '1rem', borderRadius: 2 },
|
||||
'& .MuiTab-root': { fontWeight: '900', textTransform: 'none', fontSize: '1rem', borderRadius: 1 },
|
||||
'& .Mui-selected': { color: 'primary.main' }
|
||||
}}
|
||||
>
|
||||
@@ -411,7 +396,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
<Paper sx={{
|
||||
width: 64, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
bgcolor: tier.color, color: 'black', fontWeight: '900', fontSize: '2rem',
|
||||
borderRadius: 2, boxShadow: `0 12px 32px ${alpha(tier.color, 0.5)}`
|
||||
borderRadius: 0.5, boxShadow: `0 0 20px ${alpha(tier.color, 0.6)}`
|
||||
}}>
|
||||
{tier.key}
|
||||
</Paper>
|
||||
@@ -424,16 +409,37 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{items.map((rating: Rating) => (
|
||||
<Grid key={rating.id} size={{ xs: 6, sm: 4, md: 3, lg: 2 }}>
|
||||
<Grid key={rating.id} size={{ xs: 6, sm: 4, md: 3, lg: 2.4 }}>
|
||||
<Card sx={{
|
||||
height: '100%', borderRadius: 3, border: '1px solid', borderColor: 'divider',
|
||||
height: '100%', borderRadius: 1, border: '1px solid', borderColor: 'divider',
|
||||
bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
|
||||
transition: 'all 0.3s ease',
|
||||
overflow: 'hidden',
|
||||
'&:hover': { transform: 'translateY(-8px)', borderColor: 'primary.main', boxShadow: '0 12px 32px rgba(0,0,0,0.1)' }
|
||||
}}>
|
||||
<Link to={`/flavor/${rating.flavor}`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<Box sx={{ position: 'relative', aspectRatio: '1/1', bgcolor: alpha(theme.palette.text.primary, 0.03), display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2 }}>
|
||||
<Box component="img" src={rating.flavor_image || undefined} sx={{ height: '90%', width: '90%', objectFit: 'contain', filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.1))' }} />
|
||||
<Box sx={{
|
||||
position: 'relative',
|
||||
aspectRatio: '1/1',
|
||||
bgcolor: 'background.default',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<Box
|
||||
component="img"
|
||||
src={rating.flavor_image || undefined}
|
||||
sx={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
objectFit: 'cover',
|
||||
transition: 'transform 0.5s ease',
|
||||
'&:hover': { transform: 'scale(1.1)' }
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ position: 'absolute', top: 10, right: 10, zIndex: 2 }}>
|
||||
<RatingBadge score={rating.score} size="small" />
|
||||
</Box>
|
||||
@@ -449,7 +455,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
|
||||
<Button
|
||||
size="small" fullWidth variant="outlined" color="secondary"
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate(`/admin-panel/rating/${rating.id}`); }}
|
||||
sx={{ borderRadius: 1.5, textTransform: 'none', fontSize: '0.6rem', py: 0, fontWeight: 'bold' }}
|
||||
sx={{ borderRadius: 1, textTransform: 'none', fontSize: '0.6rem', py: 0, fontWeight: 'bold' }}
|
||||
>
|
||||
Manage
|
||||
</Button>
|
||||
|
||||
Reference in new issue
Block a user