Profile layout reorganization
What does this MR do and why?
Centered header is now left aligned
- Centered content was left over from when we had a centered top navigation bar ~7 years ago (example); no significant changes since
- Right sidebar follows similar pattern from other areas of GitLab --> Project page, issuables, MRs, etc
- User data separate into bio, info, and contact sections
- Achievements has a dedicated, labeled section
- Better use of whitespace
- Allows main content to rise to the top
Activity
- Activity graph is grouped with “Activity” section
- Keeping like content together makes for stronger content connections.
- Better hierarchy and scanability
- Now that the width of the main content has been constrained, the line-length is more readable on the
/Activity
tab - We show the graph at full width on
lg
breakpoint and let it scroll on smaller screens (keeping it fixed to the most recent days), allowing for more flexibility at different screen sizes- Currently we cut it down to 6 months on medium screens, not letting users see the previous 6 months
Projects
- Show 3 projects in new “card” style
- No wasted space if a user has no projects
- If a user has only 1 or 2 projects, they’ll still occupy the full
Personal projects
section width
Readme
- Max-height with a “Read more” button that’ll expand the full readme inline
- Similar pattern to
Toggle commits
in the merge request activity feed
- Similar pattern to
- Currently, a long readme takes up a lot of vertical space in a very prominent location. This isn’t helpful to users who visit profile pages often
What is the same?
- Functionality
- The edit/follow/admin/keys buttons are still in top right corner
- User content (now in the sidebar) and action buttons are still available across all tabs
What’s next?
- Show projects with the most stars
- Let users choose which projects they want to display (perhaps increase the number of projects too)
- Group info and contact info in the user settings to match the profile
Screenshots or screen recordings
Profile with everything filled out
Before | After |
---|---|
Long readme interaction
Default | Expanded |
---|---|
Profile with some things filled out, very short readme
Before | After |
---|---|
Profile with no customization/new user
Before | After |
---|---|
Links
- Profile > Reconfigure layout (#360002 - closed)
- ✂️ UX Paper Cuts 16.6 → Activity (#425468 - closed)
- ✂️ UX Paper Cuts 16.7 → Project page (#430244 - closed)
- ✂️ UX Paper Cuts 16.8 → Accessibility (#424396 - closed)
- ✂️ UX Paper Cuts 16.9 → Pajamas Migrations (#430246 - closed)
Merge requests
- Reorganize profile page layout 1️⃣ (!136910 - merged) · reviewed by @thomasrandolph and @iamphill
- Fix calendar alignment and add achievements sec... (!136938 - merged) · reviewed by @mcavoj, @eduardosanz, @peterhegman and @pgascouvaillancourt
- Add "Read more" button to readmes 3️⃣ (!137164 - merged) · reviewed by @fernando-c and @arfedoro
- Create card mode styles for overview projects l... (!137168 - merged) · reviewed by @akotte, @sashi_kumar, @apennells and @anna_vovchenko
- Profile layout update (!139707 - merged) reviewed by @fernando-c, @psimyn, @arfedoro and @dstull
Links
Edited by Annabel Dunstone Gray