Commit 838f7e56 authored by Douwe Maan's avatar Douwe Maan

Remove .wiki and @md-typography mixin in favor of .md and .md-file

Before, the styling for `img:not(.emoji)`` was repeated between
`.md:not(.use-csslab):not(.wiki)` (for comments and the Markdown
preview), `.documentation.wiki` (for help pages), and
`.issuable-details .description .wiki` (for MR and issue descriptions).

In these places, we now simply use `.md`. Wherever we use `.md` but
don't want this image styling (like wikis and blobs), `.md-file` is
added.
parent 30479246
...@@ -10,7 +10,7 @@ export class CopyAsGFM { ...@@ -10,7 +10,7 @@ export class CopyAsGFM {
const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent); const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
if (isIOS) return; if (isIOS) return;
$(document).on('copy', '.md, .wiki', e => { $(document).on('copy', '.md', e => {
CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
}); });
$(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => { $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
...@@ -99,7 +99,7 @@ export class CopyAsGFM { ...@@ -99,7 +99,7 @@ export class CopyAsGFM {
} }
static transformGFMSelection(documentFragment) { static transformGFMSelection(documentFragment) {
const gfmElements = documentFragment.querySelectorAll('.md, .wiki'); const gfmElements = documentFragment.querySelectorAll('.md');
switch (gfmElements.length) { switch (gfmElements.length) {
case 0: { case 0: {
return documentFragment; return documentFragment;
......
...@@ -37,7 +37,7 @@ export default class ShortcutsIssuable extends Shortcuts { ...@@ -37,7 +37,7 @@ export default class ShortcutsIssuable extends Shortcuts {
} }
// Sanity check: Make sure the selected text comes from a discussion : it can either contain a message... // Sanity check: Make sure the selected text comes from a discussion : it can either contain a message...
let foundMessage = !!documentFragment.querySelector('.md, .wiki'); let foundMessage = !!documentFragment.querySelector('.md');
// ... Or come from a message // ... Or come from a message
if (!foundMessage) { if (!foundMessage) {
...@@ -46,7 +46,7 @@ export default class ShortcutsIssuable extends Shortcuts { ...@@ -46,7 +46,7 @@ export default class ShortcutsIssuable extends Shortcuts {
let node = e; let node = e;
do { do {
// Text nodes don't define the `matches` method // Text nodes don't define the `matches` method
if (node.matches && node.matches('.md, .wiki')) { if (node.matches && node.matches('.md')) {
foundMessage = true; foundMessage = true;
} }
node = node.parentNode; node = node.parentNode;
......
...@@ -140,7 +140,7 @@ export default { ...@@ -140,7 +140,7 @@ export default {
'issue-realtime-pre-pulse': preAnimation, 'issue-realtime-pre-pulse': preAnimation,
'issue-realtime-trigger-pulse': pulseAnimation, 'issue-realtime-trigger-pulse': pulseAnimation,
}" }"
class="wiki" class="md"
v-html="descriptionHtml" v-html="descriptionHtml"
></div> ></div>
<textarea <textarea
......
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
} }
} }
&.wiki { &.md {
padding: $gl-padding; padding: $gl-padding;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
......
@mixin md-typography { /**
* Apply Markdown typography
*
*/
.md:not(.use-csslab) {
color: $gl-text-color; color: $gl-text-color;
word-wrap: break-word; word-wrap: break-word;
...@@ -28,6 +32,14 @@ ...@@ -28,6 +32,14 @@
max-width: 100%; max-width: 100%;
} }
&:not(.md-file) img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
margin: 5px 0;
// Ensure that image does not exceed viewport
max-height: calc(100vh - 100px);
}
p a:not(.no-attachment-icon) img { p a:not(.no-attachment-icon) img {
// Remove bottom padding because // Remove bottom padding because
// <p> already has $gl-padding bottom // <p> already has $gl-padding bottom
...@@ -367,28 +379,6 @@ code { ...@@ -367,28 +379,6 @@ code {
@extend .ref-name; @extend .ref-name;
} }
/**
* Apply Markdown typography
*
*/
.wiki:not(.use-csslab) {
@include md-typography;
}
.md:not(.use-csslab) {
@include md-typography;
&:not(.wiki) {
img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
margin: 5px 0;
// Ensure that image does not exceed viewport
max-height: calc(100vh - 100px);
}
}
}
/** /**
* Textareas intended for GFM * Textareas intended for GFM
* *
......
...@@ -37,12 +37,4 @@ ...@@ -37,12 +37,4 @@
.documentation { .documentation {
padding: 7px; padding: 7px;
// Border around images in the help pages.
img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
margin: 5px;
max-height: calc(100vh - 100px);
}
} }
...@@ -72,14 +72,6 @@ ...@@ -72,14 +72,6 @@
height: $gl-padding * 2; height: $gl-padding * 2;
} }
// Border around images in issue and MR descriptions.
.description img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
max-height: calc(100vh - 100px);
max-width: 100%;
}
.emoji-block { .emoji-block {
padding: 10px 0; padding: 10px 0;
} }
......
...@@ -179,9 +179,3 @@ ul.wiki-pages-list.content-list { ...@@ -179,9 +179,3 @@ ul.wiki-pages-list.content-list {
} }
} }
} }
.wiki:not(.use-csslab) {
table {
@include markdown-table;
}
}
.wiki h1, .md h1,
.wiki h2, .md h2,
.wiki h3, .md h3,
.wiki h4, .md h4,
.wiki h5, .md h5,
.wiki h6 { .md h6 {
margin-top: 17px; margin-top: 17px;
} }
.wiki h1 { .md h1 {
font-size: 30px; font-size: 30px;
} }
.wiki h2 { .md h2 {
font-size: 22px; font-size: 22px;
} }
.wiki h3 { .md h3 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
.row.prepend-top-default .row.prepend-top-default
.col-md-8 .col-md-8
.documentation-index.wiki .documentation-index.md
= markdown(@help_index) = markdown(@help_index)
.col-md-4 .col-md-4
.card .card
......
- page_title 'Instance Configuration' - page_title 'Instance Configuration'
.wiki.documentation .documentation.md
%h1 Instance Configuration %h1 Instance Configuration
%p %p
......
- page_title @path.split("/").reverse.map(&:humanize) - page_title @path.split("/").reverse.map(&:humanize)
.documentation.wiki.prepend-top-default .documentation.md.prepend-top-default
= markdown @markdown = markdown @markdown
...@@ -513,7 +513,7 @@ ...@@ -513,7 +513,7 @@
%h2#markdown Markdown %h2#markdown Markdown
%h4 %h4
%code .md or .wiki and others %code .md
Markdown rendering has a bit different css and presented in next UI elements: Markdown rendering has a bit different css and presented in next UI elements:
......
- if @wiki_home.present? - if @wiki_home.present?
%div{ class: container_class } %div{ class: container_class }
.prepend-top-default.append-bottom-default .md.md-file.prepend-top-default.append-bottom-default
.wiki
= render_wiki_content(@wiki_home) = render_wiki_content(@wiki_home)
- else - else
- can_create_wiki = can?(current_user, :create_wiki, @project) - can_create_wiki = can?(current_user, :create_wiki, @project)
......
.diff-file.file-holder .diff-file.file-holder
.diff-content .diff-content
- if markup?(@blob.name) - if markup?(@blob.name)
.file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) } .file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
= markup(@blob.name, @content) = markup(@blob.name, @content)
- else - else
.file-content.code.js-syntax-highlight .file-content.code.js-syntax-highlight
......
- blob = viewer.blob - blob = viewer.blob
- context = blob.respond_to?(:rendered_markup) ? { rendered: blob.rendered_markup } : {} - context = blob.respond_to?(:rendered_markup) ? { rendered: blob.rendered_markup } : {}
.file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) } .file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
= markup(blob.name, blob.data, context) = markup(blob.name, blob.data, context)
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
%h2.title= markdown_field(@issue, :title) %h2.title= markdown_field(@issue, :title)
- if @issue.description.present? - if @issue.description.present?
.description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' } .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
.wiki= markdown_field(@issue, :description) .md= markdown_field(@issue, :description)
%textarea.hidden.js-task-list-field= @issue.description %textarea.hidden.js-task-list-field= @issue.description
= edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago') = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
%div %div
- if @merge_request.description.present? - if @merge_request.description.present?
.description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' } .description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
.wiki .md
= markdown_field(@merge_request, :description) = markdown_field(@merge_request, :description)
%textarea.hidden.js-task-list-field %textarea.hidden.js-task-list-field
= @merge_request.description = @merge_request.description
......
...@@ -54,8 +54,7 @@ ...@@ -54,8 +54,7 @@
%div %div
- if @milestone.description.present? - if @milestone.description.present?
.description .description.md
.wiki
= markdown_field(@milestone, :description) = markdown_field(@milestone, :description)
= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
......
...@@ -20,8 +20,7 @@ ...@@ -20,8 +20,7 @@
%p %p
= s_("TagsPage|Can't find HEAD commit for this tag") = s_("TagsPage|Can't find HEAD commit for this tag")
- if release && release.description.present? - if release && release.description.present?
.description.prepend-top-default .description.md.prepend-top-default
.wiki
= markdown_field(release, :description) = markdown_field(release, :description)
.row-fixed-content.controls.flex-row .row-fixed-content.controls.flex-row
......
...@@ -39,8 +39,7 @@ ...@@ -39,8 +39,7 @@
.append-bottom-default.prepend-top-default .append-bottom-default.prepend-top-default
- if @release.description.present? - if @release.description.present?
.description .description.md
.wiki
= markdown_field(@release, :description) = markdown_field(@release, :description)
- else - else
= s_('TagsPage|This tag has no release notes.') = s_('TagsPage|This tag has no release notes.')
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
= (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
.prepend-top-default.append-bottom-default .prepend-top-default.append-bottom-default
.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) } .md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
= render_wiki_content(@page) = render_wiki_content(@page)
= render 'sidebar' = render 'sidebar'
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
%i.fa.fa-file %i.fa.fa-file
%strong= snippet.file_name %strong= snippet.file_name
- if markup?(snippet.file_name) - if markup?(snippet.file_name)
.file-content.wiki .file-content.md.md-file
- snippet_chunks.each do |chunk| - snippet_chunks.each do |chunk|
- unless chunk[:data].empty? - unless chunk[:data].empty?
= markup(snippet.file_name, chunk[:data]) = markup(snippet.file_name, chunk[:data])
......
...@@ -42,8 +42,7 @@ ...@@ -42,8 +42,7 @@
= markdown_field(milestone, :title) = markdown_field(milestone, :title)
- if milestone.group_milestone? && milestone.description.present? - if milestone.group_milestone? && milestone.description.present?
%div %div
.description .description.md
.wiki
= markdown_field(milestone, :description) = markdown_field(milestone, :description)
- if milestone.complete?(current_user) && milestone.active? - if milestone.complete?(current_user) && milestone.active?
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
- if @snippet.description.present? - if @snippet.description.present?
.description.qa-snippet-description .description.qa-snippet-description
.wiki .md
= markdown_field(@snippet, :description) = markdown_field(@snippet, :description)
%textarea.hidden.js-task-list-field %textarea.hidden.js-task-list-field
= @snippet.description = @snippet.description
......
...@@ -13,7 +13,7 @@ describe 'User views an open merge request' do ...@@ -13,7 +13,7 @@ describe 'User views an open merge request' do
end end
it 'renders both the title and the description' do it 'renders both the title and the description' do
node = find('.wiki h1 a#user-content-description-header') node = find('.md h1 a#user-content-description-header')
expect(node[:href]).to end_with('#description-header') expect(node[:href]).to end_with('#description-header')
# Work around a weird Capybara behavior where calling `parent` on a node # Work around a weird Capybara behavior where calling `parent` on a node
......
...@@ -136,7 +136,7 @@ describe "User creates wiki page" do ...@@ -136,7 +136,7 @@ describe "User creates wiki page" do
click_button("Create page") click_button("Create page")
end end
page.within ".wiki" do page.within ".md" do
expect(page).to have_selector(".katex", count: 3).and have_content("2+2 is 4") expect(page).to have_selector(".katex", count: 3).and have_content("2+2 is 4")
end end
end end
......
...@@ -79,7 +79,7 @@ describe 'Task Lists' do ...@@ -79,7 +79,7 @@ describe 'Task Lists' do
visit_issue(project, issue) visit_issue(project, issue)
wait_for_requests wait_for_requests
expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox") expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector('a.btn-close') expect(page).to have_selector('a.btn-close')
end end
...@@ -87,14 +87,14 @@ describe 'Task Lists' do ...@@ -87,14 +87,14 @@ describe 'Task Lists' do
visit_issue(project, issue) visit_issue(project, issue)
wait_for_requests wait_for_requests
expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox") expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
logout(:user) logout(:user)
login_as(user2) login_as(user2)
visit current_path visit current_path
wait_for_requests wait_for_requests
expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox") expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
end end
it 'provides a summary on Issues#index' do it 'provides a summary on Issues#index' do
...@@ -231,7 +231,7 @@ describe 'Task Lists' do ...@@ -231,7 +231,7 @@ describe 'Task Lists' do
container = '.detail-page-description .description.js-task-list-container' container = '.detail-page-description .description.js-task-list-container'
expect(page).to have_selector(container) expect(page).to have_selector(container)
expect(page).to have_selector("#{container} .wiki .task-list .task-list-item .task-list-item-checkbox") expect(page).to have_selector("#{container} .md .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector("#{container} .js-task-list-field") expect(page).to have_selector("#{container} .js-task-list-field")
expect(page).to have_selector('form.js-issuable-update') expect(page).to have_selector('form.js-issuable-update')
expect(page).to have_selector('a.btn-close') expect(page).to have_selector('a.btn-close')
......
<a class="btn-close"></a> <a class="btn-close"></a>
<div class="detail-page-description"> <div class="detail-page-description">
<div class="description js-task-list-container"> <div class="description js-task-list-container">
<div class="wiki"> <div class="md">
<ul class="task-list"> <ul class="task-list">
<li class="task-list-item"> <li class="task-list-item">
<input class="task-list-item-checkbox" type="checkbox"> <input class="task-list-item-checkbox" type="checkbox">
......
...@@ -75,7 +75,7 @@ describe('Issuable output', () => { ...@@ -75,7 +75,7 @@ describe('Issuable output', () => {
.then(() => { .then(() => {
expect(document.querySelector('title').innerText).toContain('this is a title (#1)'); expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>'); expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>'); expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>this is a description!</p>');
expect(vm.$el.querySelector('.js-task-list-field').value).toContain( expect(vm.$el.querySelector('.js-task-list-field').value).toContain(
'this is a description', 'this is a description',
); );
...@@ -92,7 +92,7 @@ describe('Issuable output', () => { ...@@ -92,7 +92,7 @@ describe('Issuable output', () => {
.then(() => { .then(() => {
expect(document.querySelector('title').innerText).toContain('2 (#1)'); expect(document.querySelector('title').innerText).toContain('2 (#1)');
expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>'); expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>'); expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>42</p>');
expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42'); expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
expect(vm.$el.querySelector('.edited-text')).toBeTruthy(); expect(vm.$el.querySelector('.edited-text')).toBeTruthy();
expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch( expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch(
......
...@@ -43,12 +43,12 @@ describe('Description component', () => { ...@@ -43,12 +43,12 @@ describe('Description component', () => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect( expect(
vm.$el.querySelector('.wiki').classList.contains('issue-realtime-pre-pulse'), vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse'),
).toBeTruthy(); ).toBeTruthy();
setTimeout(() => { setTimeout(() => {
expect( expect(
vm.$el.querySelector('.wiki').classList.contains('issue-realtime-trigger-pulse'), vm.$el.querySelector('.md').classList.contains('issue-realtime-trigger-pulse'),
).toBeTruthy(); ).toBeTruthy();
done(); done();
......
RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".wiki"| RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".md"|
match do |actual| match do |actual|
node = find("#{parent} h#{level} a#user-content-#{id}") node = find("#{parent} h#{level} a#user-content-#{id}")
......
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