0
Fork 0
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:
Rish 2018-08-31 11:05:27 +01:00
parent c9b8ddde4b
commit d29e376367
8 changed files with 18 additions and 18 deletions

View file

@ -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);

View file

@ -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');

View file

@ -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}`;
}

View file

@ -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');
});
});
});

View file

@ -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>');
});
});

View file

@ -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 () {

View file

@ -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>');
});
});
});

View file

@ -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 () {