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 {
const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
if (isIOS) return;
$(document).on('copy', '.md, .wiki', e => {
$(document).on('copy', '.md', e => {
CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
});
$(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
......@@ -99,7 +99,7 @@ export class CopyAsGFM {
}
static transformGFMSelection(documentFragment) {
const gfmElements = documentFragment.querySelectorAll('.md, .wiki');
const gfmElements = documentFragment.querySelectorAll('.md');
switch (gfmElements.length) {
case 0: {
return documentFragment;
......
......@@ -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...
let foundMessage = !!documentFragment.querySelector('.md, .wiki');
let foundMessage = !!documentFragment.querySelector('.md');
// ... Or come from a message
if (!foundMessage) {
......@@ -46,7 +46,7 @@ export default class ShortcutsIssuable extends Shortcuts {
let node = e;
do {
// Text nodes don't define the `matches` method
if (node.matches && node.matches('.md, .wiki')) {
if (node.matches && node.matches('.md')) {
foundMessage = true;
}
node = node.parentNode;
......
......@@ -140,7 +140,7 @@ export default {
'issue-realtime-pre-pulse': preAnimation,
'issue-realtime-trigger-pulse': pulseAnimation,
}"
class="wiki"
class="md"
v-html="descriptionHtml"
></div>
<textarea
......
......@@ -123,7 +123,7 @@
}
}
&.wiki {
&.md {
padding: $gl-padding;
@include media-breakpoint-up(md) {
......
@mixin md-typography {
/**
* Apply Markdown typography
*
*/
.md:not(.use-csslab) {
color: $gl-text-color;
word-wrap: break-word;
......@@ -28,6 +32,14 @@
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 {
// Remove bottom padding because
// <p> already has $gl-padding bottom
......@@ -367,28 +379,6 @@ code {
@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
*
......
......@@ -37,12 +37,4 @@
.documentation {
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 @@
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 {
padding: 10px 0;
}
......
......@@ -179,9 +179,3 @@ ul.wiki-pages-list.content-list {
}
}
}
.wiki:not(.use-csslab) {
table {
@include markdown-table;
}
}
.wiki h1,
.wiki h2,
.wiki h3,
.wiki h4,
.wiki h5,
.wiki h6 {
.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
margin-top: 17px;
}
.wiki h1 {
.md h1 {
font-size: 30px;
}
.wiki h2 {
.md h2 {
font-size: 22px;
}
.wiki h3 {
.md h3 {
font-size: 18px;
font-weight: 600;
}
......
......@@ -29,7 +29,7 @@
.row.prepend-top-default
.col-md-8
.documentation-index.wiki
.documentation-index.md
= markdown(@help_index)
.col-md-4
.card
......
- page_title 'Instance Configuration'
.wiki.documentation
.documentation.md
%h1 Instance Configuration
%p
......
- page_title @path.split("/").reverse.map(&:humanize)
.documentation.wiki.prepend-top-default
.documentation.md.prepend-top-default
= markdown @markdown
......@@ -513,7 +513,7 @@
%h2#markdown Markdown
%h4
%code .md or .wiki and others
%code .md
Markdown rendering has a bit different css and presented in next UI elements:
......
- if @wiki_home.present?
%div{ class: container_class }
.prepend-top-default.append-bottom-default
.wiki
.md.md-file.prepend-top-default.append-bottom-default
= render_wiki_content(@wiki_home)
- else
- can_create_wiki = can?(current_user, :create_wiki, @project)
......
.diff-file.file-holder
.diff-content
- 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)
- else
.file-content.code.js-syntax-highlight
......
- blob = viewer.blob
- 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)
......@@ -72,7 +72,7 @@
%h2.title= markdown_field(@issue, :title)
- if @issue.description.present?
.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
= edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
......
......@@ -5,7 +5,7 @@
%div
- if @merge_request.description.present?
.description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
.wiki
.md
= markdown_field(@merge_request, :description)
%textarea.hidden.js-task-list-field
= @merge_request.description
......
......@@ -54,8 +54,7 @@
%div
- if @milestone.description.present?
.description
.wiki
.description.md
= markdown_field(@milestone, :description)
= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
......
......@@ -20,8 +20,7 @@
%p
= s_("TagsPage|Can't find HEAD commit for this tag")
- if release && release.description.present?
.description.prepend-top-default
.wiki
.description.md.prepend-top-default
= markdown_field(release, :description)
.row-fixed-content.controls.flex-row
......
......@@ -39,8 +39,7 @@
.append-bottom-default.prepend-top-default
- if @release.description.present?
.description
.wiki
.description.md
= markdown_field(@release, :description)
- else
= s_('TagsPage|This tag has no release notes.')
......@@ -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
.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 'sidebar'
......@@ -18,7 +18,7 @@
%i.fa.fa-file
%strong= snippet.file_name
- if markup?(snippet.file_name)
.file-content.wiki
.file-content.md.md-file
- snippet_chunks.each do |chunk|
- unless chunk[:data].empty?
= markup(snippet.file_name, chunk[:data])
......
......@@ -42,8 +42,7 @@
= markdown_field(milestone, :title)
- if milestone.group_milestone? && milestone.description.present?
%div
.description
.wiki
.description.md
= markdown_field(milestone, :description)
- if milestone.complete?(current_user) && milestone.active?
......
......@@ -22,7 +22,7 @@
- if @snippet.description.present?
.description.qa-snippet-description
.wiki
.md
= markdown_field(@snippet, :description)
%textarea.hidden.js-task-list-field
= @snippet.description
......
......@@ -13,7 +13,7 @@ describe 'User views an open merge request' do
end
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')
# Work around a weird Capybara behavior where calling `parent` on a node
......
......@@ -136,7 +136,7 @@ describe "User creates wiki page" do
click_button("Create page")
end
page.within ".wiki" do
page.within ".md" do
expect(page).to have_selector(".katex", count: 3).and have_content("2+2 is 4")
end
end
......
......@@ -79,7 +79,7 @@ describe 'Task Lists' do
visit_issue(project, issue)
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')
end
......@@ -87,14 +87,14 @@ describe 'Task Lists' do
visit_issue(project, issue)
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)
login_as(user2)
visit current_path
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
it 'provides a summary on Issues#index' do
......@@ -231,7 +231,7 @@ describe 'Task Lists' do
container = '.detail-page-description .description.js-task-list-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('form.js-issuable-update')
expect(page).to have_selector('a.btn-close')
......
<a class="btn-close"></a>
<div class="detail-page-description">
<div class="description js-task-list-container">
<div class="wiki">
<div class="md">
<ul class="task-list">
<li class="task-list-item">
<input class="task-list-item-checkbox" type="checkbox">
......
......@@ -75,7 +75,7 @@ describe('Issuable output', () => {
.then(() => {
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('.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(
'this is a description',
);
......@@ -92,7 +92,7 @@ describe('Issuable output', () => {
.then(() => {
expect(document.querySelector('title').innerText).toContain('2 (#1)');
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('.edited-text')).toBeTruthy();
expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch(
......
......@@ -43,12 +43,12 @@ describe('Description component', () => {
Vue.nextTick(() => {
expect(
vm.$el.querySelector('.wiki').classList.contains('issue-realtime-pre-pulse'),
vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse'),
).toBeTruthy();
setTimeout(() => {
expect(
vm.$el.querySelector('.wiki').classList.contains('issue-realtime-trigger-pulse'),
vm.$el.querySelector('.md').classList.contains('issue-realtime-trigger-pulse'),
).toBeTruthy();
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|
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