Avnyr
cd5ad2e1e4
- Added `lib/api.ts` to centralize API communication for authentication, projects, persons, tags, and groups. - Introduced `middleware.ts` to handle route protection based on authentication and roles. - Created `auth-context.tsx` to manage authentication state with `AuthProvider` and `useAuth` hook. - Updated `package.json` to include `swr` for data fetching. - Enhanced project documentation (`RESPONSIVE_DESIGN.md` and `README.md`) with responsive design and architecture details.
91 lines
3.1 KiB
Markdown
91 lines
3.1 KiB
Markdown
# Responsive Design Patterns
|
|
|
|
This document outlines the responsive design patterns used in the application to ensure a consistent user experience across different devices and screen sizes.
|
|
|
|
## Breakpoints
|
|
|
|
The application uses the following breakpoints, based on Tailwind CSS defaults:
|
|
|
|
- **sm**: 640px and up (small devices like large phones and small tablets)
|
|
- **md**: 768px and up (medium devices like tablets)
|
|
- **lg**: 1024px and up (large devices like desktops)
|
|
- **xl**: 1280px and up (extra large devices)
|
|
- **2xl**: 1536px and up (very large screens)
|
|
|
|
## Viewport Configuration
|
|
|
|
The application uses the following viewport configuration in the root layout:
|
|
|
|
```tsx
|
|
export const viewport: Viewport = {
|
|
width: "device-width",
|
|
initialScale: 1,
|
|
maximumScale: 1,
|
|
userScalable: true,
|
|
};
|
|
```
|
|
|
|
This ensures proper scaling on mobile devices while allowing users to zoom if needed.
|
|
|
|
## Layout Patterns
|
|
|
|
### Responsive Container
|
|
|
|
- Use `container` class with responsive padding: `px-4 md:px-6`
|
|
- Example: `<div className="container px-4 md:px-6">`
|
|
|
|
### Responsive Flexbox
|
|
|
|
- Stack elements vertically on small screens, horizontally on larger screens
|
|
- Example: `<div className="flex flex-col sm:flex-row">`
|
|
|
|
### Responsive Grid
|
|
|
|
- Single column on small screens, multiple columns on larger screens
|
|
- Example: `<div className="grid sm:grid-cols-2 lg:grid-cols-3">`
|
|
|
|
### Responsive Spacing
|
|
|
|
- Less padding on small screens, more on larger screens
|
|
- Example: `<main className="p-4 sm:p-6">`
|
|
|
|
## Component Patterns
|
|
|
|
### Responsive Typography
|
|
|
|
- Smaller font sizes on mobile, larger on desktop
|
|
- Example: `<h1 className="text-2xl sm:text-3xl font-bold">`
|
|
|
|
### Responsive Buttons
|
|
|
|
- Full-width on small screens, auto-width on larger screens
|
|
- Example: `<Button className="w-full sm:w-auto">`
|
|
|
|
### Responsive Tables
|
|
|
|
- Card layout on small screens, table layout on larger screens
|
|
- Hide less important columns on small screens
|
|
- Add horizontal scrolling for tables that don't fit
|
|
- Example: See the projects page implementation
|
|
|
|
### Responsive Forms
|
|
|
|
- Stack form actions on small screens, side-by-side on larger screens
|
|
- Adjust button order for mobile-first experience
|
|
- Example: `<CardFooter className="flex flex-col sm:flex-row gap-2">`
|
|
|
|
### Responsive Navigation
|
|
|
|
- Use a sidebar that collapses to an icon or off-canvas menu on small screens
|
|
- Use a dropdown or hamburger menu for mobile navigation
|
|
- Example: See the `Sidebar` component implementation
|
|
|
|
## Best Practices
|
|
|
|
1. **Mobile-First Approach**: Start with the mobile layout and progressively enhance for larger screens
|
|
2. **Consistent Patterns**: Use the same responsive patterns throughout the application
|
|
3. **Avoid Fixed Widths**: Use relative units (%, rem) and flexible layouts
|
|
4. **Test on Real Devices**: Verify the responsive design on actual devices, not just browser emulation
|
|
5. **Consider Touch Targets**: Make interactive elements large enough for touch (at least 44x44px)
|
|
6. **Optimize Images**: Use responsive images with appropriate sizes for different devices
|
|
7. **Performance**: Ensure the application performs well on mobile devices with potentially slower connections |