diff options
author | Fatih Acet <acetfatih@gmail.com> | 2016-07-21 09:29:45 +0000 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2016-07-21 09:29:45 +0000 |
commit | caefed2771abd1b544b77fcb6ed408a7877498cb (patch) | |
tree | e9f8af770c72702b3d3847c3956e8c4d9440032e /app/assets/stylesheets | |
parent | 3ba8d28f31a6cdfbdfe278e83abb62ab27dd2657 (diff) | |
parent | 51216af5c5e07e26d7b00d01250e560653a07a55 (diff) | |
download | gitlab-ce-caefed2771abd1b544b77fcb6ed408a7877498cb.tar.gz |
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
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/framework/markdown_area.scss | 27 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 23 |
2 files changed, 22 insertions, 28 deletions
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); - } } } |