Merge branch '4424-improve-ui-admin-area' into 'master'

Address UI feedback for admin area

## What does this MR do?
Addresses @dzaporozhets's feedback for !4424

## Why was this MR needed?
!4424 was merged with some design issues which affected other areas of the app and broke consistency. This MR fixes that.

## What are the relevant issue numbers?
#3946 

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !5190

1 files changed, 23 insertions, 17 deletions

diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml
index 59fd6c3fea0..77a11e49e20 100644
--- a/app/views/admin/groups/_group.html.haml
+++ b/app/views/admin/groups/_group.html.haml
@@ -1,20 +1,26 @@
-- css_class = '' unless local_assigns[:css_class]
+- css_class = 'no-description' if group.description.blank?
 
-%li.group-row.group-admin{ class: css_class }
-  .group-avatar
-    = image_tag group_icon(group), class: 'avatar hidden-xs'
-  .group-details
-    .title
-      = link_to [:admin, group], class: 'group-name' do
-        = group.name
-    .group-stats
-      %span>= pluralize(number_with_delimiter(group.projects.count), 'project')
-      ,
-      %span= pluralize(number_with_delimiter(group.users.count), 'member')
-
-    - if group.description.present?
-      .description
-        = markdown(group.description, pipeline: :description)
-  .group-controls.hidden-xs
+%li.group-row{ class: css_class }
+  .controls
     = link_to 'Edit', edit_admin_group_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
     = link_to 'Delete', [:admin, group], data: { confirm: "Are you sure you want to remove #{group.name}?" }, method: :delete, class: 'btn btn-remove'
+  .stats
+    %span
+      = icon('bookmark')
+      = number_with_delimiter(group.projects.count)
+
+    %span
+      = icon('users')
+      = number_with_delimiter(group.users.count)
+
+    %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
+      = visibility_level_icon(group.visibility_level, fw: false)
+
+  = image_tag group_icon(group), class: "avatar s40 hidden-xs"
+  .title
+    = link_to [:admin, group], class: 'group-name' do
+      = group.name
+
+  - if group.description.present?
+    .description
+      = markdown(group.description, pipeline: :description)