Merge branch '18849-project-snippets-page-isn-t-really-responsive' into 'master'

Update snippets UI

## What does this MR do?

Updates snippets UI _(mainly mobile view)_ to new UI proposed in #18849.

## Are there points in the code the reviewer needs to double check?

Does anyone know the implementation difference between `app/views/snippets/show.html.haml` and `app/views/projects/snippets/show.html.haml`? I have only been updating the latter as it's the only one I can find implemented. I assume the former is rendered somewhere seeing as there is controllers for it too. But this doesn't seem very DRY from my current perspective.

## Why was this MR needed?

## Screenshots (if relevant)

![Screen_Shot_2016-09-06_at_14.20.10](/uploads/ac124a3b0896872ce851b9f56fbe339c/Screen_Shot_2016-09-06_at_14.20.10.png)

![Screen_Shot_2016-09-06_at_14.20.32](/uploads/8d3c7b1d1a5f562ceb6dc22bde695289/Screen_Shot_2016-09-06_at_14.20.32.png)

![Screen_Shot_2016-09-06_at_14.20.48](/uploads/6b1c31ece6d2400bbfc3c673d9e82d4b/Screen_Shot_2016-09-06_at_14.20.48.png)

## 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
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] 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)

## What are the relevant issue numbers?

Closes #18849

See merge request !6210

16 files changed, 75 insertions, 92 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 965fcc06518..46af18580d5 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -162,6 +162,10 @@ ul.content-list {
           margin-right: 0;
         }
       }
+
+      .no-comments {
+        opacity: 0.5;
+      }
     }
 
     // When dragging a list item
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 60a0d50ba73..3ac34cbc829 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -10,10 +10,6 @@
     .issue-labels {
       display: inline-block;
     }
-
-    .issue-no-comments {
-      opacity: 0.5;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 2a44b95de64..96c06086867 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -231,10 +231,6 @@
   .merge-request-labels {
     display: inline-block;
   }
-
-  .merge-request-no-comments {
-    opacity: 0.5;
-  }
 }
 
 .merge-request-angle {
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index 2aa939b7dc3..5270aea4e79 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -2,20 +2,6 @@
   padding: 2px;
 }
 
-.snippet-holder {
-  margin-bottom: -$gl-padding;
-
-  .file-holder {
-    border-top: 0;
-  }
-
-  .file-actions {
-    .btn-clipboard {
-      @extend .btn;
-    }
-  }
-}
-
 .markdown-snippet-copy {
   position: fixed;
   top: -10px;
@@ -24,29 +10,18 @@
   max-width: 0;
 }
 
-.file-holder.snippet-file-content {
-  padding-bottom: $gl-padding;
-  border-bottom: 1px solid $border-color;
-
-  .file-title {
-    padding-top: $gl-padding;
-    padding-bottom: $gl-padding;
-  }
-
-  .file-actions {
-    top: 12px;
-  }
-
-  .file-content {
-    border-left: 1px solid $border-color;
-    border-right: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
+.snippet-file-content {
+  border-radius: 3px;
+  .btn-clipboard {
+    @extend .btn;
   }
 }
 
 .snippet-title {
   font-size: 24px;
-  font-weight: normal;
+  font-weight: 600;
+  padding: $gl-padding;
+  padding-left: 0;
 }
 
 .snippet-actions {
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 16a8e52a4ca..56477733ea2 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -27,7 +27,7 @@ module ProjectsHelper
     author_html =  ""
 
     # Build avatar image tag
-    author_html << image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt: '') if opts[:avatar]
+    author_html << image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]} #{opts[:avatar_class] if opts[:avatar_class]}", alt: '') if opts[:avatar]
 
     # Build name span tag
     if opts[:by_username]
diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index 0a5a8eb5aee..7e33a562077 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -1,10 +1,10 @@
 module SnippetsHelper
-  def reliable_snippet_path(snippet)
+  def reliable_snippet_path(snippet, opts = nil)
     if snippet.project_id?
       namespace_project_snippet_path(snippet.project.namespace,
-                                     snippet.project, snippet)
+                                     snippet.project, snippet, opts)
     else
-      snippet_path(snippet)
+      snippet_path(snippet, opts)
     end
   end
 
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 851d4c06990..8b1a8a8a2d9 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -29,7 +29,7 @@
 
       - note_count = issue.notes.user.count
       %li
-        = link_to issue_path(issue, anchor: 'notes'), class: ('issue-no-comments' if note_count.zero?) do
+        = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
           = icon('comments')
           = note_count
 
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 31f8d0aeb5b..68fb7d5a414 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -41,7 +41,7 @@
 
       - note_count = merge_request.mr_and_commit_notes.user.count
       %li
-        = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('merge-request-no-comments' if note_count.zero?) do
+        = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
           = icon('comments')
           = note_count
 
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index bdbf3e5f4d6..a5a5619fa12 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -3,11 +3,11 @@
     = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-create new-snippet-link', title: "New Snippet" do
       New Snippet
   - if can?(current_user, :update_project_snippet, @snippet)
-    = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
-      Edit
-  - if can?(current_user, :update_project_snippet, @snippet)
     = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-warning", title: 'Delete Snippet' do
       Delete
+  - if can?(current_user, :update_project_snippet, @snippet)
+    = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
+      Edit
 - if can?(current_user, :create_project_snippet, @project) || can?(current_user, :update_project_snippet, @snippet)
   .visible-xs-block.dropdown
     %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
@@ -21,9 +21,9 @@
               New Snippet
         - if can?(current_user, :update_project_snippet, @snippet)
           %li
-            = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet) do
-              Edit
-        - if can?(current_user, :update_project_snippet, @snippet)
-          %li
             = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
               Delete
+        - if can?(current_user, :update_project_snippet, @snippet)
+          %li
+            = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet) do
+              Edit
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index bae4d8f349f..b70fda88a79 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -1,15 +1,14 @@
 - page_title @snippet.title, "Snippets"
 
-.snippet-holder
-  = render 'shared/snippets/header'
+= render 'shared/snippets/header'
 
-  %article.file-holder.file-holder-no-border.snippet-file-content
-    .file-title.file-title-clear
-      = blob_icon 0, @snippet.file_name
-      = @snippet.file_name
-      .file-actions.hidden-xs
-        = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
-        = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
-    = render 'shared/snippets/blob'
+%article.file-holder.snippet-file-content
+  .file-title
+    = blob_icon 0, @snippet.file_name
+    = @snippet.file_name
+    .file-actions
+      = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
+      = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
+  = render 'shared/snippets/blob'
 
-  %div#notes= render "projects/notes/notes_with_form"
+%div#notes= render "projects/notes/notes_with_form"
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index af753496260..7ae4211ddfd 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -6,12 +6,13 @@
   %strong.item-title
     Snippet #{@snippet.to_reference}
   %span.creator
-    created by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title")}
+    authored
     = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
     - if @snippet.updated_at != @snippet.created_at
       %span
         = icon('edit', title: 'edited')
         = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
+    by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
 
   .snippet-actions
     - if @snippet.project_id?
@@ -19,6 +20,5 @@
     - else
       = render "snippets/actions"
 
-.content-block.second-block
-  %h2.snippet-title.prepend-top-0.append-bottom-0
-    = markdown escape_once(@snippet.title), pipeline: :single_line, author: @snippet.author
+%h2.snippet-title.prepend-top-0.append-bottom-0
+  = markdown escape_once(@snippet.title), pipeline: :single_line, author: @snippet.author
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index c96dfefe17f..ea17bec8677 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -3,19 +3,30 @@
 
   .title
     = link_to reliable_snippet_path(snippet) do
-      = truncate(snippet.title, length: 60)
+      = snippet.title
       - if snippet.private?
-        %span.label.label-gray
+        %span.label.label-gray.hidden-xs
           = icon('lock')
           private
-    %span.monospace.pull-right
+    %span.monospace.pull-right.hidden-xs
       = snippet.file_name
 
-  %small.pull-right.cgray
+    %ul.controls.visible-xs
+      %li
+        - note_count = snippet.notes.user.count
+        = link_to reliable_snippet_path(snippet, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
+          = icon('comments')
+          = note_count
+      %li
+        %span.sr-only
+          = visibility_level_label(snippet.visibility_level)
+        = visibility_level_icon(snippet.visibility_level, fw: false)
+
+  %small.pull-right.cgray.hidden-xs
     - if snippet.project_id?
       = link_to snippet.project.name_with_namespace, namespace_project_path(snippet.project.namespace, snippet.project)
 
-  .snippet-info
+  .snippet-info.hidden-xs
     = link_to user_snippets_path(snippet.author) do
       = snippet.author_name
     authored #{time_ago_with_tooltip(snippet.created_at)}
diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml
index 160c6cd84da..fdaca199218 100644
--- a/app/views/snippets/_actions.html.haml
+++ b/app/views/snippets/_actions.html.haml
@@ -2,12 +2,12 @@
   - if current_user
     = link_to new_snippet_path, class: "btn btn-grouped btn-create new-snippet-link", title: "New Snippet" do
       New Snippet
-  - if can?(current_user, :update_personal_snippet, @snippet)
-    = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
-      Edit
   - if can?(current_user, :admin_personal_snippet, @snippet)
     = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-danger", title: 'Delete Snippet' do
       Delete
+  - if can?(current_user, :update_personal_snippet, @snippet)
+    = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
+      Edit
 - if current_user
   .visible-xs-block.dropdown
     %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
@@ -18,11 +18,11 @@
         %li
           = link_to new_snippet_path, title: "New Snippet" do
             New Snippet
-        - if can?(current_user, :update_personal_snippet, @snippet)
-          %li
-            = link_to edit_snippet_path(@snippet) do
-              Edit
         - if can?(current_user, :admin_personal_snippet, @snippet)
           %li
             = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
               Delete
+        - if can?(current_user, :update_personal_snippet, @snippet)
+          %li
+            = link_to edit_snippet_path(@snippet) do
+              Edit
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index ed3992650d4..fa403da8f79 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,13 +1,12 @@
 - page_title @snippet.title, "Snippets"
 
-.snippet-holder
-  = render 'shared/snippets/header'
+= render 'shared/snippets/header'
 
-  %article.file-holder.file-holder-no-border.snippet-file-content
-    .file-title.file-title-clear
-      = blob_icon 0, @snippet.file_name
-      = @snippet.file_name
-      .file-actions.hidden-xs
-        = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
-        = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
-    = render 'shared/snippets/blob'
+%article.file-holder.snippet-file-content
+  .file-title
+    = blob_icon 0, @snippet.file_name
+    = @snippet.file_name
+    .file-actions
+      = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
+      = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
+  = render 'shared/snippets/blob'
diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb
index d744d0eb6af..22359c8f938 100644
--- a/spec/features/issues_spec.rb
+++ b/spec/features/issues_spec.rb
@@ -144,7 +144,7 @@ describe 'Issues', feature: true do
       visit namespace_project_issues_path(project.namespace, project, assignee_id: @user.id)
 
       expect(page).to have_content 'foobar'
-      expect(page.all('.issue-no-comments').first.text).to eq "0"
+      expect(page.all('.no-comments').first.text).to eq "0"
     end
   end
 
diff --git a/spec/features/users/snippets_spec.rb b/spec/features/users/snippets_spec.rb
index 356a8d668b0..f00abd82fea 100644
--- a/spec/features/users/snippets_spec.rb
+++ b/spec/features/users/snippets_spec.rb
@@ -19,7 +19,10 @@ describe 'Snippets tab on a user profile', feature: true, js: true do
     end
 
     context 'clicking on the link to the second page' do
-      before { click_link('2') }
+      before do
+        click_link('2')
+        wait_for_ajax
+      end
 
       it 'shows the remaining snippets' do
         expect(page.all('.snippets-list-holder .snippet-row').count).to eq(5)