CodeSource
/
Readur
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pwa): replace search button with tags, improve scaling

This commit is contained in:
aaldebs99 2025-12-12 00:52:06 +00:00
parent 3a18e17ece
commit 41b2bad3c7
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx
View File

@ -367,7 +367,11 @@ const GlobalSearchBar: React.FC<GlobalSearchBarProps> = ({ sx, ...props }) => {
}} }}
sx={{ sx={{
width: '100%', width: '100%',
minWidth: 600, minWidth: {
xs: '200px', // Mobile: minimum viable width
sm: '400px', // Small tablets
md: 600, // Desktop: original size
},
maxWidth: 1200, maxWidth: 1200,
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
background: theme.palette.mode === 'light' background: theme.palette.mode === 'light'

21
frontend/src/components/Layout/AppLayout.tsx
View File

@ -441,6 +441,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
fontWeight: 700, fontWeight: 700,
mr: 1, mr: 1,
fontSize: '1.1rem', fontSize: '1.1rem',
display: isPWA ? 'none' : 'block',
background: theme.palette.mode === 'light' background: theme.palette.mode === 'light'
? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)' ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
: 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)', : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
@ -455,7 +456,15 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
</Typography> </Typography>
{/* Global Search Bar */} {/* Global Search Bar */}
<Box sx={{ flexGrow: 2, display: 'flex', justifyContent: 'center', mx: 1, flex: '1 1 auto' }}> <Box sx={{
flexGrow: 2,
display: 'flex',
justifyContent: 'center',
mx: { xs: 0.5, md: 1 },
flex: '1 1 auto',
minWidth: { xs: 0, md: 'auto' },
overflow: 'hidden',
}}>
<GlobalSearchBar /> <GlobalSearchBar />
</Box> </Box>
@ -463,7 +472,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
<IconButton <IconButton
onClick={handleNotificationClick} onClick={handleNotificationClick}
sx={{ sx={{
mr: 2, mr: { xs: 1, md: 2 },
display: isPWA ? 'none' : 'flex',
color: 'text.secondary', color: 'text.secondary',
background: theme.palette.mode === 'light' background: theme.palette.mode === 'light'
? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)' ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
@ -500,7 +510,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
{/* Language Switcher */} {/* Language Switcher */}
<Box sx={{ <Box sx={{
mr: 2, mr: { xs: 1, md: 2 },
display: isPWA ? 'none' : { xs: 'none', sm: 'block' },
background: theme.palette.mode === 'light' background: theme.palette.mode === 'light'
? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)' ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
: 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)', : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
@ -521,7 +532,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
{/* Theme Toggle */} {/* Theme Toggle */}
<Box sx={{ <Box sx={{
mr: 2, mr: { xs: 1, md: 2 },
background: theme.palette.mode === 'light' background: theme.palette.mode === 'light'
? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)' ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
: 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)', : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
@ -666,7 +677,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
<Box sx={{ <Box sx={{
p: 3, p: 3,
// Add bottom padding when bottom nav is visible (PWA mode on mobile) // Add bottom padding when bottom nav is visible (PWA mode on mobile)
pb: isPWA && isMobile ? 'calc(64px + 24px + env(safe-area-inset-bottom, 0px))' : 3, pb: isPWA && isMobile ? 'calc(64px + 24px + 8px + env(safe-area-inset-bottom, 0px))' : 3,
}}> }}>
{children} {children}
</Box> </Box>