Updated the style of the snippets header in #show

It should now more closly match the styles used in
issues and merge requests with some small tweaks
to be more relevant to snippets

2 files changed, 78 insertions, 28 deletions

diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index a3d7aba054d..39034a1391f 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -30,3 +30,58 @@
     }
   }
 }
+
+.snippet-details {
+  .page-title {
+    margin-top: -15px;
+    padding: 10px 0;
+    margin-bottom: 0;
+    color: #5c5d5e;
+    font-size: 16px;
+
+    .author {
+      color: #5c5d5e;
+    }
+
+    .snippet-id {
+      color: #5c5d5e;
+    }
+    .btn {
+      padding: 10px $gl-padding;
+    }
+  }
+
+  .snippet-title {
+    margin: 0;
+    font-size: 23px;
+    color: #313236;
+  }
+
+  @media (max-width: $screen-md-max) {
+    .new-snippet-link {
+      display: none;
+    }
+  }
+
+  @media (max-width: $screen-sm-max) {
+    .creator,
+    .page-title .btn-close {
+      display: none;
+    }
+  }
+}
+
+.snippet-box {
+  @include border-radius(2px);
+
+  display: inline-block;
+  padding: 10px $gl-padding;
+  font-weight: normal;
+  margin-right: 10px;
+  font-size: $gl-font-size;
+
+  &.snippet-box-locked {
+    background: $gl-gray;
+    color: #FFF;
+  }
+}
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index a12cfd0ff43..f2519abea6f 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,30 +1,29 @@
 - page_title @snippet.title, "Snippets"
-%h4.page-title
-  = @snippet.title
 
-  - if @snippet.private?
-    %span.label.label-success
-      %i.fa.fa-lock
-      private
+.snippet
+  .snippet-details
+    .page-title
+      - if @snippet.private?
+        .snippet-box.snippet-box-locked
+          %i.fa.fa-lock
+          Private
+      %span.creator
+        updated by #{link_to_member(@project, @snippet.author, size: 24)}
+        ·
+        = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_updated_ago')
 
-  .pull-right
-    = link_to new_snippet_path, class: "btn btn-new btn-sm", title: "New Snippet" do
-      Add new snippet
-
-.append-bottom-10.prepend-top-10.clearfix
-  .pull-right
-    %span.light
-      = link_to user_snippets_path(@snippet.author) do
-        = @snippet.author_name
-      authored #{time_ago_with_tooltip(@snippet.updated_at)}
-
-  .back-link
-    - if @snippet.author == current_user
-      = link_to dashboard_snippets_path do
-        ← your snippets
-    - else
-      = link_to explore_snippets_path do
-        ← explore snippets
+      .pull-right
+        = link_to new_snippet_path, class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
+          = icon('plus')
+          Add new snippet
+        = link_to "remove", snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet'
+        - if can?(current_user, :update_personal_snippet, @snippet)
+          = link_to edit_snippet_path(@snippet), class: "btn btn-grouped issuabled-edit" do
+            = icon('pencil-square-o')
+            Edit
+    .gray-content-block.middle-block
+      %h2.snippet-title
+        = gfm escape_once(@snippet.title)
 
 .file-holder
   .file-title
@@ -33,9 +32,5 @@
       = @snippet.file_name
     .file-actions
       .btn-group
-        - if can?(current_user, :update_personal_snippet, @snippet)
-          = link_to "edit", edit_snippet_path(@snippet), class: "btn btn-sm", title: 'Edit Snippet'
         = link_to "raw", raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
-      - if can?(current_user, :admin_personal_snippet, @snippet)
-        = link_to "remove", snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-sm btn-remove", title: 'Delete Snippet'
   = render 'shared/snippets/blob'