Project lists: further iteration & improvements

Problem

We recently redesigned the project lists to add more information to these lists. This made the list items taller which wasn't received with positive feedback. On the other hand, the group lists redesign discovery has also been completed and they need to be much more compact. Let's make the project lists and group lists consistent, based on the most recent redesign of group lists: gitlab-org/gitlab-ce#52365

Solution

Mobile 320px Tablet 768px Desktop 992px Desktop 1200px
image tablet-768 desktop-992px desktop-1200px

Progression of responsive breakpoints

Mobile:

  • fork, MR, issues stats hidden
  • description hidden
  • stars, updated and pipeline below the title

Tablet:

  • fork, MR, issues stats hidden
  • description shown
  • stars, updated and pipeline aligned to the right and rearranged

Desktop - 992px:

  • MR, issues stats hidden
  • info splits into columns

Desktop - 1200px:

  • MR, issues stats shown

Other changes to desktop viewports:

  • title font size 16px (large paragraph)
  • title line height 24px
  • no extra spacing between title and description.
  • when there's no description the title should be vertically centred
  • avatar size 48 px
  • The padding between row content and the border is 16px.

We're only introducing changes to the desktop views with this issue.

Edited by Matej Latin