Improve UI consistency between projects and groups lists

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

5 files changed, 49 insertions, 20 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 7d7154487ad..994e7a35b5f 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -25,6 +25,7 @@ v 8.5.0 (unreleased)
   - Deprecate API "merge_request/:merge_request_id/...". Use "merge_requests/:merge_request_id/..." instead
   - Mark inline difference between old and new paths when a file is renamed
   - Support Akismet spam checking for creation of issues via API (Stan Hu)
+  - Improve UI consistency between projects and groups lists
 
 v 8.4.3
   - Increase lfs_objects size column to 8-byte integer to allow files larger
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index fdd86979a36..ec6c099df5b 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -4,7 +4,7 @@
   input[type='search'] {
     width: 225px;
     vertical-align: bottom;
-    
+
     @media (max-width: $screen-xs-max) {
       width: 100px;
       vertical-align: bottom;
@@ -21,3 +21,21 @@
     height: 42px;
   }
 }
+
+.group-row {
+  &.no-description {
+    .group-name {
+      line-height: 44px;
+    }
+  }
+
+  .stats {
+    float: right;
+    line-height: 44px;
+    color: $gl-gray;
+
+    span {
+      margin-right: 15px;
+    }
+  }
+}
diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml
index 6ca97a692b4..15e423a3b29 100644
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@@ -1,7 +1,13 @@
-%ul.nav-links
-  = nav_link(page: dashboard_groups_path) do
-    = link_to dashboard_groups_path, title: 'Your groups', data: {placement: 'right'} do
-      Your Groups
-  = nav_link(page: explore_groups_path) do
-    = link_to explore_groups_path, title: 'Explore groups', data: {placement: 'bottom'} do
-      Explore Groups
+.top-area
+  %ul.nav-links
+    = nav_link(page: dashboard_groups_path) do
+      = link_to dashboard_groups_path, title: 'Your groups', data: {placement: 'right'} do
+        Your Groups
+    = nav_link(page: explore_groups_path) do
+      = link_to explore_groups_path, title: 'Explore groups', data: {placement: 'bottom'} do
+        Explore Groups
+  - if current_user.can_create_group?
+    .projects-search-form
+      = link_to new_group_path, class: "btn btn-new" do
+        = icon('plus')
+        New Group
diff --git a/app/views/dashboard/groups/index.html.haml b/app/views/dashboard/groups/index.html.haml
index d5b7e729e7b..caca91af536 100644
--- a/app/views/dashboard/groups/index.html.haml
+++ b/app/views/dashboard/groups/index.html.haml
@@ -2,15 +2,6 @@
 - header_title  "Groups", dashboard_groups_path
 = render 'dashboard/groups_head'
 
-.gray-content-block
-  - if current_user.can_create_group?
-    %span.pull-right.hidden-xs
-      = link_to new_group_path, class: "btn btn-new" do
-        %i.fa.fa-plus
-        New Group
-  .oneline
-    Group members have access to all group projects.
-
 %ul.content-list
   - @group_members.each do |group_member|
     - group = group_member.group
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index 778b20fb4f2..aa2ece22485 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -1,5 +1,8 @@
 - group_member = local_assigns[:group_member]
-%li
+- css_class = '' unless local_assigns[:css_class]
+- css_class += " no-description" if group.description.blank?
+
+%li.group-row{ class: css_class }
   - if group_member
     .controls.hidden-xs
       - if can?(current_user, :admin_group, group)
@@ -9,6 +12,15 @@
       = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do
         %i.fa.fa-sign-out
 
+  .stats
+    %span
+      = icon('home')
+      = group.projects.count
+
+    %span
+      = icon('users')
+      = group.users.count
+
   = image_tag group_icon(group), class: "avatar s46 hidden-xs"
   = link_to group, class: 'group-name' do
     %span.item-title= group.name
@@ -17,5 +29,6 @@
     as
     %span #{group_member.human_access}
 
-  %div.light
-    #{pluralize(group.projects.count, "project")}, #{pluralize(group.users.count, "user")}
+  - if group.description.present?
+    .light
+      = markdown(group.description, pipeline: :description)