103 lines
3.3 KiB
Markdown
103 lines
3.3 KiB
Markdown
# Dashboard Design System - Standardization Plan
|
|
|
|
## Problem Analysis
|
|
|
|
Current dashboards have **inconsistent layouts** causing width and spacing issues:
|
|
|
|
| Dashboard | Width Constraint | Padding | Layout Component |
|
|
|-----------|------------------|---------|------------------|
|
|
| Admin | `max-w-6xl mx-auto p-6` | 1.5rem | Page-level wrapper |
|
|
| Teacher | None (uses MainSection) | 2rem (p-8) | MainSection with no max-width |
|
|
| Student | `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6` | Variable | Page-level wrapper |
|
|
| Guardian | `max-w-5xl mx-auto` | 2rem (p-8) | MainSection + inner wrapper |
|
|
|
|
### Additional Issues:
|
|
1. **Global CSS** (lines 451-459) adds underline to all links on hover
|
|
2. **ClassCardsComponent** has `lg:grid-cols-3` causing 3 cards per row on large screens
|
|
3. **ClassCard** links have default underline on hover
|
|
|
|
## Proposed Solution
|
|
|
|
### 1. Update MainSection Component
|
|
Add width constraint to standardize all dashboards using it:
|
|
```jsx
|
|
// Current
|
|
<main className={`flex-1 p-8 overflow-y-auto ${className}`}>
|
|
|
|
// Proposed
|
|
<main className={`flex-1 p-6 overflow-y-auto ${className}`}>
|
|
<div className="max-w-7xl mx-auto">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
```
|
|
|
|
### 2. Remove Global Link Underline
|
|
Remove hover underline from globals.css (lines 457-459):
|
|
```css
|
|
/* Remove these lines */
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
```
|
|
|
|
### 3. Standardize ClassCardsComponent Grid
|
|
Change from 3 columns to max 2 columns:
|
|
```jsx
|
|
// Current
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
// Proposed
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
```
|
|
|
|
### 4. Ensure ClassCard Has No Underline
|
|
Keep the `no-underline` class on Link:
|
|
```jsx
|
|
<Link href={link} className="block no-underline">
|
|
```
|
|
|
|
### 5. Standard Dashboard Page Pattern
|
|
All dashboard pages should follow this structure:
|
|
```jsx
|
|
<MainSection>
|
|
<div className="max-w-6xl mx-auto">
|
|
<PageTitle title="..." subTitle="..."/>
|
|
{/* Content */}
|
|
</div>
|
|
</MainSection>
|
|
```
|
|
|
|
### 6. Create Shared DashboardLayout Component (Optional)
|
|
For future consistency, create a reusable component:
|
|
```jsx
|
|
// src/app/(protected)/components/DashboardLayout.jsx
|
|
export function DashboardLayout({ title, subtitle, children }) {
|
|
return (
|
|
<MainSection>
|
|
<div className="max-w-6xl mx-auto">
|
|
<PageTitle title={title} subTitle={subtitle}/>
|
|
{children}
|
|
</div>
|
|
</MainSection>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Files to Modify
|
|
|
|
1. [`src/app/(protected)/components/shared/Main.jsx`](src/app/\(protected\)/components/shared/Main.jsx) - Add max-width wrapper
|
|
2. [`src/app/globals.css`](src/app/globals.css) - Remove link hover underline
|
|
3. [`src/app/(protected)/components/shared/ClassCardsComponent.jsx`](src/app/\(protected\)/components/shared/ClassCardsComponent.jsx) - Standardize grid
|
|
4. [`src/app/(protected)/components/shared/ClassCard.jsx`](src/app/\(protected\)/components/shared/ClassCard.jsx) - Ensure no-underline
|
|
5. [`src/app/(protected)/dashboard/teacher/page.jsx`](src/app/\(protected\)/dashboard/teacher/page.jsx) - Remove redundant wrapper
|
|
6. (Optional) [`src/app/(protected)/components/DashboardLayout.jsx`](src/app/\(protected\)/components/DashboardLayout.jsx) - Create reusable component
|
|
|
|
## After Changes
|
|
|
|
All dashboards will:
|
|
- Have consistent max-width (`max-w-6xl` ≈ 72rem / 1152px)
|
|
- Use consistent padding (`p-6` ≈ 1.5rem)
|
|
- Display max 2 cards per row
|
|
- No underline on link hover
|