mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RelatedArticles
synced 2024-12-24 13:54:02 +00:00
71de06a682
Changes: - Removes redundant styles now inside Codex - With the new component, it's not possible to display 3 cards in a single line at a tablet resolution, so the media query responsible is bumped to apply only at the desktop threshold - Decisions are documented in ADR Bug: T286835 Change-Id: I493e8e601ccc31b3cf1f16c0b5a8975f12ef336c
41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
/* eslint-disable indent, quotes */
|
|
// eslint-disable-next-line spaced-comment
|
|
/// <reference path="./codex.ts" />
|
|
|
|
/**
|
|
* @param {Object} options
|
|
* @param {string} options.heading
|
|
* @param {boolean} options.isContainerSmall
|
|
* @param {Codex.ListTitleObject[]} options.cards
|
|
* @return {string}
|
|
*/
|
|
const RelatedArticles = ( options ) => {
|
|
return [
|
|
`<div class="read-more-container ${( options.isContainerSmall ) ? 'read-more-container-small' : 'read-more-container-large'}">`,
|
|
`<aside class="noprint">`,
|
|
( options.heading ) ?
|
|
`<h2 class="read-more-container-heading">${options.heading}</h2>` : ``,
|
|
`<ul class="read-more-container-card-list">`,
|
|
options.cards.map( ( card ) => `<li title="${card.label}">
|
|
<a href="${card.url}"><span class="cdx-card">
|
|
<span class="cdx-card__thumbnail cdx-thumbnail">
|
|
${( card.thumbnail && card.thumbnail.url ) ?
|
|
`<span class="cdx-thumbnail__image" style="background-image: url('${card.thumbnail.url}')"></span>` :
|
|
`<span class="cdx-thumbnail__placeholder">
|
|
<span class="cdx-thumbnail__placeholder__icon"></span>
|
|
</span>`}
|
|
</span>
|
|
<span class="cdx-card__text">
|
|
<span class="cdx-card__text__title">${card.label}</span>
|
|
<span class="cdx-card__text__description">${card.description}</span>
|
|
</span>
|
|
</a>
|
|
</li>` ).join( '\n' ),
|
|
`</ul>`,
|
|
`</aside>`,
|
|
`</div>`
|
|
].join( '\n' );
|
|
};
|
|
|
|
module.exports = RelatedArticles;
|