Commit caefed27 authored by Fatih Acet's avatar Fatih Acet

Merge branch 'add-preview-image-border' into 'master'

Add image border in Markdown preview

## What does this MR do?

- add image border in Markdown preview like it is show after a comment is saved
- fix margin and shade of  `<hr>` in Markdown preview

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

Is `.md` the right class to use?

## Why was this MR needed?

The border was missing.

## What are the relevant issue numbers?

fixes #19652

## Screenshots

### Before

![before](/uploads/683e2af7278c33d29b2a1ae19d1136e3/before.png)

### After

![after](/uploads/07dcee531a5696303cb34b4a88357e8a/after.png)


See merge request !5162
parents 3ba8d28f 51216af5
...@@ -29,6 +29,7 @@ v 8.10.0 (unreleased) ...@@ -29,6 +29,7 @@ v 8.10.0 (unreleased)
- Display last commit of deleted branch in push events !4699 (winniehell) - Display last commit of deleted branch in push events !4699 (winniehell)
- Escape file extension when parsing search results !5141 (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 "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 - 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 - Added the ability to block sign ups using a domain blacklist !5259
- Upgrade to Rails 4.2.7. !5236 - Upgrade to Rails 4.2.7. !5236
......
...@@ -98,13 +98,30 @@ ...@@ -98,13 +98,30 @@
.md { .md {
&.md-preview-holder { &.md-preview-holder {
code { // Reset ul style types since we're nested inside a ul already
white-space: pre-wrap;
word-break: keep-all;
}
@include bulleted-list; @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 { .toolbar-group {
......
...@@ -91,34 +91,11 @@ ul.notes { ...@@ -91,34 +91,11 @@ ul.notes {
// Reset ul style types since we're nested inside a ul already // Reset ul style types since we're nested inside a ul already
@include bulleted-list; @include bulleted-list;
// On diffs code should wrap nicely and not overflow
code {
white-space: pre-wrap;
}
ul.task-list { ul.task-list {
ul:not(.task-list) { ul:not(.task-list) {
padding-left: 1.3em; 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);
}
} }
} }
......
...@@ -30,7 +30,7 @@ ...@@ -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 = 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') = icon('trash-o')
.note-body{class: note_editable ? 'js-task-list-container' : ''} .note-body{class: note_editable ? 'js-task-list-container' : ''}
.note-text .note-text.md
= preserve do = preserve do
= note.note_html = note.note_html
= edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true) = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment