Update profile page layout (!134569) · Merge requests · GitLab.org / GitLab

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
Left sidebar follows similar pattern seen on other profile pages
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 has been moved to “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
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

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

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