Allow skins a mechanism to decide on placement of related pages

* If a footer-content element is present prepend there
* If no footer-content element given wrap the component in a container that is known to be compatible
with known skins - this has post-content class (for backwards compatiblity with
old Minerva skins) and a class to apply the correct margin to Vector

Bug: T141002
Change-Id: Iac11948f8f5fdaad45d51b905bb7494a84775710
This commit is contained in:
jdlrobson 2016-08-18 15:20:48 -07:00
parent 18c9afbeee
commit fc7799b9f3
3 changed files with 14 additions and 4 deletions

View file

@ -44,11 +44,18 @@
cards = new CardListView( getCards( pages ) );
$readMore = $( '<aside class="ra-read-more post-content noprint"></aside>' )
$readMore = $( '<aside class="ra-read-more noprint"></aside>' )
.append( $( '<h2></h2>' ).text( mw.msg( 'relatedarticles-read-more-heading' ) ) )
.append( cards.$el );
$readMore.insertAfter( '#content' );
// If a skin has marked up a footer content area prepend it there
if ( $( '.footer-content' ).length ) {
$readMore.prependTo( '.footer-content' );
} else {
$( '<div class="read-more-container post-content" />' )
.append( $readMore )
.insertAfter( '#content' );
}
// the ReadMore code is ready
mw.track( 'ext.relatedArticles.logReady', { $readMore: $readMore } );

View file

@ -5,8 +5,11 @@
}
}
.ra-read-more {
.read-more-container {
margin: 0 0 0 10em;
}
.ra-read-more {
padding: 1em;
.ext-cards-card-list {

View file

@ -1,4 +1,4 @@
.ra-read-more {
.read-more-container {
margin-top: 35px;
}