Skip to content

UI Polish projects page: text wrapping, alignment, and spacing

Anna Vovchenko requested to merge 375007-ui-polish-projects-page into master 
This MR is a part of the ✨ Beautifying our UI (15.5) ✨

What does this MR do and why?

This MR updates the projects list to achieve the following:

  • Each project has a max of 2 lines of description
  • After 2 lines, truncation occurs (in the form of an ellipsis ...), even if those 2 lines occur due to a line break
  • Add more spacing between elements
  • Update star icon to unfilled variant
  • Change numbers of MRs, Issues, etc. from 3000 to 3k
  • If user has relative time format setting on, display "Last updated" in relative time format (e.g. "Last updated 8 days ago"). Pajamas guidelines
  • The columns stay on their places while resizing

The projects partial is used widely across the product:

  • /dashboard/projects page
  • /admin/users/<root>user_name>/projects
  • /<project-namespace>/-/forks
  • /search
  • /admin/projects
  • /admin/groups/<group_name>
  • /<user_name> (user profile page)
  • /users/root/projects

Screenshots or screen recordings

The reflow logic:

Screen_Recording_2022-10-06_at_14.10.48

Views changed to list with a table view:

Before After
172.31.0.1_3000_dashboard_projects 172.31.0.1_3000_dashboard_projects__4_
172.31.0.1_3000_flightjs_Flight_-forks__1 172.31.0.1_3000_flightjs_Flight_-forks__4
172.31.0.1_3000_search_search_test_search_code_true__1_ 172.31.0.1_3000_search_search_test_search_code_true__5_
172.31.0.1_3000_users_root_projects__1_ 172.31.0.1_3000_users_root_contributed__4_

Views changed to compact list with a table view:

Before After
172.31.0.1_3000_admin_users_root_projects__1_ 172.31.0.1_3000_admin_users_root_projects__5_
172.31.0.1_3000_root__1_ 172.31.0.1_3000_root__5_

Views not changed, remaining a list:

Before After
172.31.0.1_3000_admin_groups_gitlab-org__1_ 172.31.0.1_3000_admin_groups_gitlab-org__4_
172.31.0.1_3000_admin_projects_visibility_level_20__1_ 172.31.0.1_3000_admin_projects_visibility_level_20__5_

How to set up and validate locally

Check each of the listed pages:

  • /dashboard/projects page
  • /admin/users/<root>user_name>/projects
  • /<project-namespace>/-/forks
  • /search
  • /admin/projects
  • /admin/groups/<group_name>
  • /<user_name> (user profile page)
  • /users/root/projects

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Review progress:

Related to #375007 (closed) and #374580 (closed)

Edited by Anna Vovchenko

Merge request reports