Add image border in Markdown preview (!5162)

4 files changed, 24 insertions, 29 deletions

diff --git a/CHANGELOG b/CHANGELOG
index e1145f36ce3..e8099206377 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -28,6 +28,7 @@ v 8.10.0 (unreleased)
   - Display last commit of deleted branch in push events !4699 (winniehell)
   - Escape file extension when parsing search results !5141 (winniehell)
   - Add "passing with warnings" to the merge request pipeline possible statuses, this happens when builds that allow failures have failed. !5004
+  - Add image border in Markdown preview !5162 (winniehell)
   - Apply the trusted_proxies config to the rack request object for use with rack_attack
   - Added the ability to block sign ups using a domain blacklist !5259
   - Upgrade to Rails 4.2.7. !5236
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 5d3273ea64d..96565da1bc9 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -98,13 +98,30 @@
 
 .md {
   &.md-preview-holder {
-    code {
-      white-space: pre-wrap;
-      word-break: keep-all;
-    }
-
+    // Reset ul style types since we're nested inside a ul already
     @include bulleted-list;
   }
+
+  // On diffs code should wrap nicely and not overflow
+  code {
+    white-space: pre-wrap;
+    word-break: keep-all;
+  }
+
+  hr {
+    // Darken 'whitesmoke' a bit to make it more visible in note bodies
+    border-color: darken(#f5f5f5, 8%);
+    margin: 10px 0;
+  }
+
+  // Border around images in issue and MR comments.
+  img:not(.emoji) {
+    border: 1px solid $table-border-gray;
+    padding: 5px;
+    margin: 5px 0;
+    // Ensure that image does not exceed viewport
+    max-height: calc(100vh - 100px);
+  }
 }
 
 .toolbar-group {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ac8c02b59dc..a2b5437e503 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -91,34 +91,11 @@ ul.notes {
         // Reset ul style types since we're nested inside a ul already
         @include bulleted-list;
 
-        // On diffs code should wrap nicely and not overflow
-        code {
-          white-space: pre-wrap;
-        }
-
         ul.task-list {
           ul:not(.task-list) {
             padding-left: 1.3em;
           }
         }
-
-        hr {
-          // Darken 'whitesmoke' a bit to make it more visible in note bodies
-          border-color: darken(#f5f5f5, 8%);
-          margin: 10px 0;
-        }
-
-        code {
-          word-break: keep-all;
-        }
-
-        // Border around images in issue and MR comments.
-        img:not(.emoji) {
-          border: 1px solid $table-border-gray;
-          padding: 5px;
-          margin: 5px 0;
-          max-height: calc(100vh - 100px);
-        }
       }
     }
 
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index af0046886fb..71da8ac9d7c 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -30,7 +30,7 @@
             = 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
+        .note-text.md
           = preserve do
             = note.note_html
           = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)