51 lines
2.7 KiB
Markdown
51 lines
2.7 KiB
Markdown
# Redesign handoff
|
|
|
|
The Feed browser redesign (luxury business look, dark default plus light, desktop
|
|
bento layout, mobile immersive feed). Spec: `docs/minnect-feed-redesign.spec.md`.
|
|
Styling decisions: `docs/adr/0001-redesign-styling-approach.md`. CRM project
|
|
Minnect, module 2.
|
|
|
|
## What shipped, per milestone
|
|
|
|
All four build milestones are merged into `develop` with merge commits.
|
|
|
|
| Milestone | PR | Merge commit | Shipped |
|
|
|---|---|---|---|
|
|
| Redesign mobilization | #1 | c0f4260 | Spec and original contract in the repo; styling ADR; formatting decision (no bold or italic, bullets insert a bullet character) |
|
|
| Redesign foundation | #2 | 9aeb9a3 | Dark and light tokens with persisted toggle; Manrope and Cormorant Garamond; HexAvatar; five button styles; sign-in screen |
|
|
| Desktop bento layout | #3 | 25fd360 | Viewport-fit grid where only the feed scrolls; post cards; composer; new-posts pill and motion; featured carousel; Trending and Find experts; tablet layout; refresh button |
|
|
| Mobile immersive feed | #4 | f3fd4b5 | Snap feed; sideways media swipe; double-tap like; featured slide; bottom dock; comments and composer sheets; Discover sheet; top bar and progress rail |
|
|
| Redesign finalization | #5 | pending | Acceptance pass, contrast and hover fixes, `legacy.css` removed, README and this handoff. The orchestrator merges it. |
|
|
|
|
Promotion of `develop` to `main` is Cesar's.
|
|
|
|
## Known gaps
|
|
|
|
- The upload progress bar is an animated sweep, not real progress. Real progress
|
|
needs upload events from the proxy. New scope (change request), not built.
|
|
- NEEDS CESAR (from the acceptance pass, task 99puxwol5):
|
|
1. Acceptance 2 with a real account, dark and light, at 1440, 1024, 820 and 390px:
|
|
reading and paging, like and unlike, comments, posting text, image and video,
|
|
deleting your own post, expert search and categories, featured experts,
|
|
trending playback.
|
|
2. With real photos, check the 3-photo stack in mobile More.
|
|
3. On a real phone (iOS Safari and Android Chrome): vertical swipe snaps one
|
|
post, sideways swipe moves the dots, a playing video pauses on swipe-away,
|
|
double-tap likes with the burst, the featured carousel rotates again after
|
|
a tap elsewhere.
|
|
4. Lighthouse Accessibility on the feed, both themes, desktop and mobile; note
|
|
any contrast item below 4.5:1.
|
|
|
|
## Run and verify
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # http://localhost:3000, sign in with a Minnect account
|
|
npm run typecheck && npx eslint --no-eslintrc -c .eslintrc.json src tests
|
|
npm test && npm run build
|
|
```
|
|
|
|
Without an account: open `/dev/feed` (fixture feed) and `/dev/buttons` (button
|
|
styles). Use browser device mode at 1440, 1024, 820 and 390px and toggle the
|
|
theme. These routes 404 in production.
|