Improve UI for admin/groups page

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

app/assets/stylesheets/framework/nav.scss

@@ -56,6 +56,17 @@
     }
   }
 
+  .nav-search {
+    display: inline-block;
+    width: 50%;
+    padding: 11px 0;
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-sm-min) {
+      width: 100%;
+    }
+  }
+
   .nav-links {
     display: inline-block;
     width: 50%;

app/views/admin/groups/_group.html.haml

+- css_class = '' unless local_assigns[:css_class]
+- css_class += " no-description" if group.description.blank?
+
+%li.group-row{ class: css_class }
+  .controls.hidden-xs
+    = link_to 'Edit', edit_admin_group_path(group), id: "edit_#{dom_id(group)}", class: "btn btn-grouped btn-sm"
+    = link_to 'Destroy', [:admin, group], data: {confirm: "REMOVE #{group.name}? Are you sure?"}, method: :delete, class: "btn btn-grouped btn-sm 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)

app/views/admin/groups/index.html.haml

 - page_title "Groups"
 %h3.page-title
   Groups (#{number_with_delimiter(@groups.total_count)})
-  = link_to 'New Group', new_admin_group_path, class: "btn btn-new pull-right"
 
 %p.light
   Group allows you to keep projects organized.
   Use groups for uniting related projects.
 
-%hr
-= form_tag admin_groups_path, method: :get, class: 'form-inline' do
+.top-area
+  .nav-search
+    = form_tag admin_groups_path, method: :get, class: 'form-inline' do
       = hidden_field_tag :sort, @sort
-  .form-group
       = text_field_tag :name, params[:name], class: "form-control"
       = button_tag "Search", class: "btn submit btn-primary"
 
-  .pull-right
+  .nav-controls
     .dropdown.inline
       %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
         %span.light
@@ -33,34 +32,10 @@
             = sort_title_recently_updated
           = link_to admin_groups_path(sort: sort_value_oldest_updated) do
             = sort_title_oldest_updated
+    = link_to 'New Group', new_admin_group_path, class: "btn btn-new"
 
-%hr
-
-%ul.bordered-list
+%ul.content-list
   - @groups.each do |group|
-    %li
-      .clearfix
-        .pull-right.prepend-top-10
-          = link_to 'Edit', edit_admin_group_path(group), id: "edit_#{dom_id(group)}", class: "btn btn-sm"
-          = link_to 'Destroy', [:admin, group], data: {confirm: "REMOVE #{group.name}? Are you sure?"}, method: :delete, class: "btn btn-sm btn-remove"
-
-        %h4
-          = link_to [:admin, group] do
-            %span{ class: visibility_level_color(group.visibility_level) }
-              = visibility_level_icon(group.visibility_level)
-
-            %i.fa.fa-folder
-            = group.name
-
-          →
-          %span.monospace
-            %strong #{group.path}/
-      .clearfix
-        %p
-          = truncate group.description, length: 150
-      .clearfix
-        %p.light
-          #{pluralize(group.members.size, 'member')}, #{pluralize(group.projects.count, 'project')}
-
+    = render 'group', group: group
 
 = paginate @groups, theme: "gitlab"