Krao Hasanee
283511bf3a
- Fix nav links not working from profile page (useEffect infinite re-render via unstable profile object ref)
- Fix nav hover/active: gold icon highlight, no background change; active links non-clickable
- Fix hover layout shift: add border: 1px solid transparent to all interactive elements
- Header icon buttons (search, theme toggle) now highlight gold on hover
- Profile page: replace calendar with activity feed (60/40 grid), add stat cards (tasks completed, active projects, revision requests, submissions)
- Profile card: title field, icon rows for location/email/linkedin, member since + role bottom-right, edit button top-right
- Profile portrait: remove wrapper column, fix left-gap alignment
- Add profiles.title migration
- Dashboard recent activity: name → /profile/{id}, task → /requests/{id} (clickable links)
- Icon-only sidebar with gold active/hover state, pointer-events: none on active links
- layout.md updated with profile page geometry rules
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
172 lines
6.8 KiB
Markdown
172 lines
6.8 KiB
Markdown
# Fourge Portal Layout System
|
|
|
|
This is the single source of truth for dashboard/profile visual structure and UI geometry.
|
|
|
|
## 1) Global Frame
|
|
- Viewport app shell: `height: 100vh`, `overflow: hidden`
|
|
- Main content gutter: `24px` all sides
|
|
- Sidebar: `width: 76px`, `top: 24px`, `left: 24px`, `height: calc(100vh - 48px)`, `border-radius: 8px`
|
|
- Main wrapper offset from sidebar: `margin-left: 100px`
|
|
- Page rhythm unit: `24px` (header spacing, card gaps, section gaps)
|
|
|
|
## 2) Theme + Background
|
|
- Background ownership is `body` via `background: var(--bg)`.
|
|
- Dark base token `--bg` is full gradient:
|
|
- radial glow + vertical dark gradient.
|
|
- Light base token `--bg` is full gradient:
|
|
- gray radial glow + white vertical gradient.
|
|
- Do not use `html` theme-gradient scripting for Safari chrome behavior.
|
|
|
|
## 3) Tokens
|
|
- Accent: `#F5A523`
|
|
- Card bg dark: `rgba(255,255,255,0.02)`
|
|
- Card bg light: `rgba(0,0,0,0.02)`
|
|
- Secondary card tone dark: `rgba(255,255,255,0.08)`
|
|
- Secondary card tone light: `rgba(0,0,0,0.08)`
|
|
- Border dark: `rgba(245,165,35,0.15)`
|
|
- Border light: `rgba(0,0,0,0.1)`
|
|
- Text primary dark/light: `#ffffff / #0d0d0d`
|
|
- Text secondary dark/light: `#a8a8a8 / rgba(0,0,0,0.6)`
|
|
- Text muted dark/light: `#666666 / rgba(0,0,0,0.38)`
|
|
|
|
## 4) Typography
|
|
- Font family: `Fourge`, then `-apple-system`, `BlinkMacSystemFont`, `'Segoe UI'`, `sans-serif`
|
|
- Base font size: `14px`
|
|
- Header title: `28px`, `500`, `line-height: 1.2`
|
|
- Header subtitle: `13px`
|
|
- Widget title: `11px`, `500`, uppercase, `letter-spacing: 0.8px`
|
|
- Body table text: `12px/13px` by column importance
|
|
|
|
## 5) Card System
|
|
- Default widget shell:
|
|
- `background: var(--card-bg)`
|
|
- `border: 1px solid var(--border)`
|
|
- `border-radius: 8px`
|
|
- `padding: 18px 21px`
|
|
- `backdrop-filter: blur(12px)` + `-webkit-backdrop-filter`
|
|
- Compact card radius (legacy generic `.card`): `4px` (do not use for new dashboard widgets)
|
|
|
|
## 6) Header + Top Right Controls
|
|
- Site header: `padding-top: 24px`, `padding-bottom: 24px`
|
|
- Right control row:
|
|
- Search icon button: `32x32`
|
|
- Search button to theme toggle space: `7px` (`search-wrap margin-right`)
|
|
- Theme toggle: `32x32`
|
|
- Theme toggle to avatar: `14px` (`avatar-wrap margin-left`)
|
|
- Avatar button: `49x49`, circle, `2px` inner ring + `2px` accent outline
|
|
|
|
## 7) Dashboard Grids (Team)
|
|
- Stat row: `grid-template-columns: 1fr 1fr 1fr 1.5fr`, `gap: 24`, `margin-bottom: 0`
|
|
- Row 2: `grid-template-columns: 1fr 280px`, `gap: 24`, `margin-top: 24`
|
|
- Row 3: `grid-template-columns: 1fr 1fr`, `gap: 24`, `margin-top: 24`
|
|
- Row 4 full-width: `margin-top: 24`
|
|
|
|
## 8) Stat Cards
|
|
- Card min height: `120px`
|
|
- Internal row gap: `21px`
|
|
- Label/value/sub spacing:
|
|
- Label: `margin-bottom: 5px`
|
|
- Value: `30px`, `400`, `letter-spacing: -0.5`, `line-height: 1.1`
|
|
- Sub: `12px`, `margin-top: 5px`
|
|
- Icon badge: `27x27`, circle
|
|
- Icon glyph: `13x13`
|
|
|
|
## 9) Calendar
|
|
- Card uses widget shell
|
|
- Header-to-grid gap: `14px`
|
|
- Weekday label: `10px`, `600`, `letter-spacing: 0.5`
|
|
- Day cell button: `28x28`, circular
|
|
- Day number: `12px`
|
|
- Today style: bg `#F5A523`, text `#0d0d0d`, `700`
|
|
- Dots: up to 3, each `3x3`, gap `2`
|
|
- Popover:
|
|
- Anchored left of cell: `right: calc(100% + 8px)`, vertical centered
|
|
- `width: 210px`, `padding: 10px 12px`, `border-radius: 8px`
|
|
- shadow `0 12px 32px rgba(0,0,0,0.45)`
|
|
- row dot `6x6`, row text `12px`
|
|
|
|
## 10) Activity + Performance Rows
|
|
- Visible rows target: 5
|
|
- Row layout: `display:flex`, `align-items:center`, `gap:10px`
|
|
- Row spacing: `margin-top: 10px` from second row onward
|
|
- Name text: `13px`
|
|
- Meta/date text: `11px`
|
|
- Progress track: `height: 4px`, `radius: 2px`
|
|
- Percentage width slot: `min-width: 28px`
|
|
|
|
## 11) Tables
|
|
- General table layout in dashboard cards: `table-layout: fixed`, `border-collapse: collapse`
|
|
- Header cells:
|
|
- `font-size: 10px`, `font-weight: 500`, uppercase, `letter-spacing: 0.6px`
|
|
- bottom spacing: `padding-bottom: 12px`
|
|
- Body cells:
|
|
- primary text: `13px`
|
|
- secondary/metrics text: `12px`
|
|
- row vertical spacing via cell padding: typically `5px`
|
|
- Hot Items column widths:
|
|
- check `10%`, task `40%`, requested by `35%`, due by `15%`
|
|
- Client Highlight column widths:
|
|
- icon `5%`, company `22%`, contact `23%`, projects `13%`, open `13%`, outstanding `12%`, paid `12%`
|
|
- Sorting rule:
|
|
- Every visible data column header must be sortable.
|
|
- Use clickable header controls (`SortTh`) with ascending/descending indicator.
|
|
- Exclude only non-data utility/action columns (checkbox-only, icon-only status marker, action buttons).
|
|
|
|
## 12) Profile Page
|
|
- Container: full available content width, column, `gap: 24`
|
|
- Top row: `grid-template-columns: 1fr 280px`, `gap: 24`
|
|
- At `<=1200px`: top row stacks to one column
|
|
- Main profile card uses widget shell
|
|
- Internal card layout:
|
|
- row `gap: 20px`
|
|
- portrait column `width: 160px`, portrait max `140x140`, circle
|
|
- detail grid `140px 1fr`, `row-gap: 8`, `column-gap: 12`, `margin-top: 14`
|
|
- social row `margin-top: 14`, `gap: 8`
|
|
- self-only edit button: `position: absolute`, `top: 18px`, `right: 21px` (aligns to card padding), `border-radius: 8px` (matches card), `height: 30px`, `font-size: 12px`
|
|
- Right calendar card shows only tasks/events assigned to the viewed profile user
|
|
- Modal:
|
|
- overlay: fixed inset, `z-index: 1200`, bg `rgba(0,0,0,0.58)`, blur `6px`
|
|
- overlay padding: `24px`
|
|
- modal width: `min(620px, 100%)`
|
|
- modal max-height: `calc(100vh - 48px)`, `overflow-y: auto`
|
|
|
|
## 13) Radius + Geometry Rules
|
|
- Dashboard/profile widgets: `8px` radius
|
|
- Sidebar: `8px` radius
|
|
- Buttons/input/dropdowns mostly `4px` radius
|
|
- Circular elements (avatar/day/icon badges): `50%`
|
|
|
|
## 14) Z-Index Stack
|
|
- Sidebar: `200`
|
|
- Header dropdowns/tooltips: `300`
|
|
- Calendar hover popover: `1002` within card context (`card can be 1001 active`)
|
|
- Modal overlay: `1200`
|
|
|
|
## 15) Motion
|
|
- Motion vars:
|
|
- fast `160ms`
|
|
- base `220ms`
|
|
- easing `cubic-bezier(0.22, 1, 0.36, 1)`
|
|
- Dropdown animation: `ui-fade-up` from `translateY(4px)` + opacity 0 -> 1
|
|
|
|
## 17) Hover Interaction Contract
|
|
- Sidebar, header icon buttons, dropdown items, and avatar menu items must show a visible hover surface before click.
|
|
- Single hover source-of-truth block controls these elements.
|
|
- Dark hover surface baseline: `#1f1f1f`.
|
|
- Light hover surface baseline: `rgba(0,0,0,0.08)`.
|
|
- Nav icon opacity must lift from muted to full on hover (`opacity: 1`).
|
|
- Hover and active must be visually distinct:
|
|
- hover uses stronger temporary contrast (`bg` + thin border),
|
|
- active remains persistent selected-state background.
|
|
|
|
## 16) Non-Negotiable Implementation Rules
|
|
- Keep gradient backgrounds on `html`, not `body`
|
|
- Keep widget shell values (`18px 21px`, `8px`, blur 12, border token) consistent
|
|
- Maintain global `24px` spacing rhythm for page/frame/grid gaps
|
|
- Keep team dashboard card order:
|
|
1. Open Tasks
|
|
2. Active Projects
|
|
3. Net Profit
|
|
4. Revenue (wide)
|
|
- Keep row 2 order: Recent Activity (left), Calendar (right)
|