mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-08 02:52:39 -05:00
Added kg-card class to mobiledoc cards
No issue
This commit is contained in:
parent
c9b8ddde4b
commit
d29e376367
8 changed files with 18 additions and 18 deletions
|
@ -9,7 +9,7 @@ module.exports = {
|
|||
let {payload, env: {dom}} = opts;
|
||||
|
||||
let figure = dom.createElement('figure');
|
||||
figure.setAttribute('class', 'kg-embed-card');
|
||||
figure.setAttribute('class', 'kg-card kg-embed-card');
|
||||
|
||||
let html = dom.createRawHTMLSection(payload.html);
|
||||
figure.appendChild(html);
|
||||
|
|
|
@ -30,7 +30,7 @@ module.exports = {
|
|||
}
|
||||
|
||||
let figure = dom.createElement('figure');
|
||||
figure.setAttribute('class', 'kg-gallery-card kg-width-wide');
|
||||
figure.setAttribute('class', 'kg-card kg-gallery-card kg-width-wide');
|
||||
|
||||
let container = dom.createElement('div');
|
||||
container.setAttribute('class', 'kg-gallery-container');
|
||||
|
|
|
@ -11,7 +11,7 @@ module.exports = {
|
|||
}
|
||||
|
||||
let figure = dom.createElement('figure');
|
||||
let figureClass = 'kg-image-card';
|
||||
let figureClass = 'kg-card kg-image-card';
|
||||
if (payload.cardWidth) {
|
||||
figureClass = `${figureClass} kg-width-${payload.cardWidth}`;
|
||||
}
|
||||
|
|
|
@ -1387,10 +1387,10 @@ describe('1.0', function () {
|
|||
posts.length.should.eql(2);
|
||||
|
||||
posts[0].mobiledoc.should.eql('{"version":"0.3.1","markups":[],"atoms":[],"cards":[["markdown",{"cardName":"markdown","markdown":"## Post Content"}],["image",{"src":"source2","cardWidth":"not-wide"}]],"sections":[[10,0],[10,1]]}');
|
||||
posts[0].html.should.eql('<h2 id="postcontent">Post Content</h2>\n<figure class="kg-image-card kg-width-not-wide"><img src="source2" class="kg-image"></figure>');
|
||||
posts[0].html.should.eql('<h2 id="postcontent">Post Content</h2>\n<figure class="kg-card kg-image-card kg-width-not-wide"><img src="source2" class="kg-image"></figure>');
|
||||
|
||||
posts[1].mobiledoc.should.eql('{"version":"0.3.1","markups":[],"atoms":[],"cards":[["image",{"src":"source","cardWidth":"wide"}],["markdown",{"cardName":"markdown","markdown":"# Post Content"}]],"sections":[[10,0],[10,1]]}');
|
||||
posts[1].html.should.eql('<figure class="kg-image-card kg-width-wide"><img src="source" class="kg-image"></figure><h1 id="postcontent">Post Content</h1>\n');
|
||||
posts[1].html.should.eql('<figure class="kg-card kg-image-card kg-width-wide"><img src="source" class="kg-image"></figure><h1 id="postcontent">Post Content</h1>\n');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -14,7 +14,7 @@ describe('Embed card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-embed-card"><h1>HEADING</h1><p>PARAGRAPH</p></figure>');
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-card kg-embed-card"><h1>HEADING</h1><p>PARAGRAPH</p></figure>');
|
||||
});
|
||||
|
||||
it('Plain content renders', function () {
|
||||
|
@ -27,7 +27,7 @@ describe('Embed card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-embed-card">CONTENT</figure>');
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-card kg-embed-card">CONTENT</figure>');
|
||||
});
|
||||
|
||||
it('Invalid HTML returns', function () {
|
||||
|
@ -40,7 +40,7 @@ describe('Embed card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-embed-card"><h1>HEADING<</figure>');
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-card kg-embed-card"><h1>HEADING<</figure>');
|
||||
});
|
||||
|
||||
it('Renders nothing when payload is undefined', function () {
|
||||
|
@ -67,6 +67,6 @@ describe('Embed card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-embed-card">Testing<figcaption><strong>Caption</strong></figcaption></figure>');
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-card kg-embed-card">Testing<figcaption><strong>Caption</strong></figcaption></figure>');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -74,7 +74,7 @@ describe('Gallery card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo01-9.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo02-10.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo03-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo04-7.jpg" width="3200" height="1600" alt="Alt test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo05-4.jpg" width="3200" height="1600" title="Title test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo06-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo07-5.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo09-8.jpg" width="3200" height="1600"></div></div></div><figcaption>Test caption</figcaption></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo01-9.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo02-10.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo03-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo04-7.jpg" width="3200" height="1600" alt="Alt test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo05-4.jpg" width="3200" height="1600" title="Title test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo06-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo07-5.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo09-8.jpg" width="3200" height="1600"></div></div></div><figcaption>Test caption</figcaption></figure>');
|
||||
});
|
||||
|
||||
it('renders nothing with no images', function () {
|
||||
|
|
|
@ -14,7 +14,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
});
|
||||
|
||||
it('renders an image with caption', function () {
|
||||
|
@ -28,7 +28,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image"><figcaption><b>Test caption</b></figcaption></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image"><figcaption><b>Test caption</b></figcaption></figure>');
|
||||
});
|
||||
|
||||
it('renders an image with alt text', function () {
|
||||
|
@ -42,7 +42,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image" alt="example image"></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image" alt="example image"></figure>');
|
||||
});
|
||||
|
||||
it('renders an image with title attribute', function () {
|
||||
|
@ -56,7 +56,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image" title="example image"></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image" title="example image"></figure>');
|
||||
});
|
||||
|
||||
it('renders nothing with no src', function () {
|
||||
|
@ -85,7 +85,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
});
|
||||
|
||||
it('wide', function () {
|
||||
|
@ -99,7 +99,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card kg-width-wide"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
});
|
||||
|
||||
it('full', function () {
|
||||
|
@ -113,7 +113,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-image-card kg-width-full"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card kg-width-full"><img src="https://www.ghost.org/image.png" class="kg-image"></figure>');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -56,7 +56,7 @@ describe('Mobiledoc converter', function () {
|
|||
]
|
||||
};
|
||||
|
||||
converter.render(mobiledoc, 2).should.eql('<p>One<br>Two</p><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<p>Three</p><hr><figure class="kg-image-card kg-width-wide"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image"><figcaption>Birdies</figcaption></figure><p>Four</p><h2>HTML card</h2>\n<div><p>Some HTML</p></div><figure class="kg-embed-card"><h2>Embed card</h2></figure><figure class="kg-gallery-card kg-width-wide"><div class="kg-gallery-container"></div></figure>');
|
||||
converter.render(mobiledoc, 2).should.eql('<p>One<br>Two</p><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<p>Three</p><hr><figure class="kg-card kg-image-card kg-width-wide"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image"><figcaption>Birdies</figcaption></figure><p>Four</p><h2>HTML card</h2>\n<div><p>Some HTML</p></div><figure class="kg-card kg-embed-card"><h2>Embed card</h2></figure><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"></div></figure>');
|
||||
});
|
||||
|
||||
it('removes final blank paragraph', function () {
|
||||
|
|
Loading…
Add table
Reference in a new issue