Start redesign of group labels page

3 files changed, 41 insertions, 27 deletions

diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index e8cd8a4905c..91aa6648d41 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -64,7 +64,6 @@
     .label {
       overflow: hidden;
       text-overflow: ellipsis;
-      vertical-align: middle;
       max-width: 100%;
     }
   }
@@ -86,14 +85,17 @@
   .label-description {
     display: block;
     margin-bottom: 10px;
-    margin-left: 50px;
+
+    a {
+      color: $blue-600;
+    }
 
     @media (min-width: $screen-sm-min) {
       display: inline-block;
-      width: 30%;
+      max-width: 50%;
       margin-left: 10px;
       margin-bottom: 0;
-      vertical-align: middle;
+      vertical-align: top;
     }
   }
 
@@ -116,6 +118,10 @@
 }
 
 .manage-labels-list {
+  &.content-list li {
+    padding: $gl-padding 0;
+  }
+
   > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
     cursor: move;
@@ -133,8 +139,6 @@
   }
 
   .btn-action {
-    color: $gl-text-color;
-
     .fa {
       font-size: 18px;
       vertical-align: middle;
@@ -155,6 +159,12 @@
       float: right;
     }
   }
+
+  @media (max-width: $screen-sm-max) {
+    .dropdown-menu {
+      min-width: 100%;
+    }
+  }
 }
 
 .draggable-handler {
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index 8e88cecaf9e..6a103f56706 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -8,7 +8,7 @@
 %li{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label
 
-  .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
+  .visible-xs.visible-sm-inline-block.dropdown
     %button.btn.btn-default.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } }
       Options
       = icon('caret-down')
@@ -46,14 +46,18 @@
               data: {confirm: 'Remove this label? Are you sure?'},
               class: 'text-danger'
 
-  .pull-right.hidden-xs.hidden-sm.hidden-md
-    - if show_label_merge_requests_link
-      = link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action btn-link') do
-        view merge requests
-    - if show_label_issues_link
-      = link_to_label(label, subject: subject, css_class: 'btn btn-transparent btn-action btn-link') do
-        view open issues
-
+  .pull-right.hidden-xs.hidden-sm
+    - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group)
+      = link_to promote_project_label_path(label.project, label), title: "Promote to Group Label", class: 'btn btn-transparent btn-action', data: {confirm: "You are about to promote #{label.title} to a group level. This will make this milestone available to all projects inside #{label.project.group.name}. The existing project label will be merged into the group level. This action cannot be reversed.", toggle: "tooltip"}, method: :post do
+        %span.sr-only Promote to Group
+        = icon('level-up')
+    - if can?(current_user, :admin_label, label)
+      = link_to edit_label_path(label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
+        %span.sr-only Edit
+        = sprite_icon('pencil')
+      = link_to destroy_label_path(label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, data: {confirm: label_deletion_confirm_text(label), toggle: "tooltip"} do
+        %span.sr-only Delete
+        = sprite_icon('remove')
     - if current_user
       .label-subscription.inline
         - if can_subscribe_to_label_in_different_levels?(label)
@@ -75,15 +79,3 @@
           %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ type: 'button', data: { status: status, url: toggle_subscription_path } }
             %span= label_subscription_toggle_button_text(label, @project)
             = icon('spinner spin', class: 'label-subscribe-button-loading')
-
-    - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group)
-      = link_to promote_project_label_path(label.project, label), title: "Promote to Group Label", class: 'btn btn-transparent btn-action', data: {confirm: "You are about to promote #{label.title} to a group level. This will make this milestone available to all projects inside #{label.project.group.name}. The existing project label will be merged into the group level. This action cannot be reversed.", toggle: "tooltip"}, method: :post do
-        %span.sr-only Promote to Group
-        = icon('level-up')
-    - if can?(current_user, :admin_label, label)
-      = link_to edit_label_path(label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
-        %span.sr-only Edit
-        = icon('pencil-square-o')
-      = link_to destroy_label_path(label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, data: {confirm: label_deletion_confirm_text(label), toggle: "tooltip"} do
-        %span.sr-only Delete
-        = icon('trash-o')
diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml
index 7f58298c60f..34da13ca52b 100644
--- a/app/views/shared/_label_row.html.haml
+++ b/app/views/shared/_label_row.html.haml
@@ -1,3 +1,7 @@
+- subject = local_assigns[:subject]
+- show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
+- show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
+
 %span.label-row
   - if can?(current_user, :admin_label, @project)
     .draggable-handler
@@ -16,3 +20,11 @@
   - if label.description
     %span.label-description
       = markdown_field(label, :description)
+      .hidden-xs.hidden-sm
+        - if show_label_issues_link
+          = link_to_label(label, subject: subject) do
+            Issues
+        - if show_label_merge_requests_link
+          ·
+          = link_to_label(label, subject: subject, type: :merge_request) do
+            Merge requests