48 lines
2.3 KiB
Markdown
48 lines
2.3 KiB
Markdown
# Plan: Style Appreciation Review Pages to Match App Theme
|
|
|
|
## Current State
|
|
|
|
The review pages (`review_list.html` and `review_detail.html`) use generic Tailwind classes without the custom CSS that the existing `appreciation_list.html` uses. This makes them visually inconsistent.
|
|
|
|
## Target Design (from appreciation_list.html)
|
|
|
|
The existing appreciation page uses custom CSS classes:
|
|
- **`.page-header-gradient`** — Navy gradient (`#005696` → `#007bbd`), white text, rounded-xl
|
|
- **`.section-card`** — White bg, 2px slate-200 border, rounded-xl, hover:border-navy, shadow
|
|
- **`.section-header`** — Gradient bg (`#f8fafc` → `#f1f5f9`), border-bottom, flex with icon
|
|
- **`.section-icon`** — 40px square, rounded-xl, colored bg (blue-100, green-100, etc.)
|
|
- **Typography** — `text-xs font-bold uppercase tracking-wider` for labels, `text-2xl font-black text-navy` for counts
|
|
- **Stats cards** — 4-column grid with icon + label + value
|
|
|
|
## Issues to Fix
|
|
|
|
### Field Names (will cause errors)
|
|
- `Hospital.name_en` → `Hospital.name`
|
|
- `Staff.name_en` → `Staff.name`
|
|
- `AppreciationCategory.name_en` — KEEP (this field exists)
|
|
|
|
### review_list.html Changes
|
|
1. **Add `extra_css`** block with custom CSS classes matching appreciation_list.html
|
|
2. **Header**: Change emerald gradient → navy `.page-header-gradient`
|
|
3. **Add stats row**: Show "Total Pending" count with icon
|
|
4. **Filter card**: Use `.section-card` with `.section-header`
|
|
5. **Appreciation cards**: Use `.section-card` instead of raw Tailwind
|
|
6. **Fix field names**: `h.name_en` → `h.name`, `s.name_en` → `s.name`
|
|
|
|
### review_detail.html Changes
|
|
1. **Add `extra_css`** block with custom CSS classes
|
|
2. **Header**: Change emerald gradient → navy `.page-header-gradient`
|
|
3. **Patient Info card**: Use `.section-card` with `.section-header` and `.section-icon`
|
|
4. **Message card**: Use `.section-card`
|
|
5. **Activation form card**: Use `.section-card` with `.section-header`
|
|
6. **Fix field names**: `appreciation.hospital.name_en` → `appreciation.hospital.name`, `s.name_en` → `s.name`
|
|
|
|
## Files to Edit
|
|
|
|
1. `templates/appreciation/review_list.html`
|
|
2. `templates/appreciation/review_detail.html`
|
|
|
|
## No Schema Changes Needed
|
|
|
|
The `AppreciationCategory` model **does** have `name_en`, so those references stay. Only Hospital and Staff use `name` (not `name_en`).
|