krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
fourge-portal/layout.md
T
Krao Hasanee 283511bf3a Session 2026-05-28: profile page overhaul, nav fixes, dashboard activity links 
- 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>
2026-05-28 15:32:46 -04:00

6.8 KiB
Raw Permalink Blame History

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)
Reference in New Issue View Git Blame Copy Permalink