Merge branch 'edit-mobile' into 'master'

Shows the edit comment button on mobile

## What does this MR do?

Shows the edit comment button on mobile.

## What are the relevant issue numbers?

Closes #17214 

## Screenshots (if relevant)

![Screen_Shot_2016-06-01_at_12.33.13](/uploads/d46b800c175a53821ea8e8af49c07641/Screen_Shot_2016-06-01_at_12.33.13.png)

See merge request !4402

3 files changed, 26 insertions, 9 deletions

diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index bd531f8376b..d4e5cc819a4 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -66,10 +66,6 @@
     display: none;
   }
 
-  %ul.notes .note-role, .note-actions {
-    display: none;
-  }
-
   .nav-links, .nav-links {
     li a {
       font-size: 14px;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 4ebaf227279..0c084118753 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -134,6 +134,11 @@ ul.notes {
 
     .note-header {
       padding-bottom: 3px;
+      padding-right: 20px;
+
+      @media (min-width: $screen-sm-min) {
+        padding-right: 0;
+      }
     }
 
     .note-emoji-button {
@@ -211,6 +216,8 @@ ul.notes {
 
 .discussion-header,
 .note-header {
+  position: relative;
+
   a {
     color: inherit;
 
@@ -247,6 +254,16 @@ ul.notes {
   color: $notes-action-color;
 }
 
+.note-actions {
+  position: absolute;
+  right: 0;
+  top: 0;
+  
+  @media (min-width: $screen-sm-min) {
+    position: relative;
+  }
+}
+
 .discussion-actions {
   @media (max-width: $screen-md-max) {
     float: none;
@@ -260,8 +277,13 @@ ul.notes {
 
 .note-action-button {
   display: inline-block;
-  margin-left: 10px;
-  line-height: 24px;
+  margin-left: 0;
+  line-height: 20px;
+
+  @media (min-width: $screen-sm-min) {
+    margin-left: 10px;
+    line-height: 24px;
+  }
 
   .fa {
     color: $notes-action-color;
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 3a1aa35fa21..5ddd0ecc4c1 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -19,15 +19,14 @@
         .note-actions
           - access = note.project.team.human_max_access(note.author.id)
           - if access
-            %span.note-role
-              = access
+            %span.note-role.hidden-xs= access
           - if note_editable
             = link_to '#', title: 'Award Emoji', class: 'note-action-button note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
               = icon('spinner spin')
               = icon('smile-o')
             = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
               = icon('pencil')
-            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
+            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button hidden-xs js-note-delete danger' do
               = icon('trash-o')
       .note-body{class: note_editable ? 'js-task-list-container' : ''}
         .note-text