mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 15:53:46 +00:00
ac069fbec1
Move styles.less to index.less and import print.less from it. This keeps the reasoning about styles constrained to LESS instead of spread out over LESS _and_ ResourceLoader. The former is preferable since LESS is more standardized than ResourceLoader. The approach of moving styles.less to index.less and then referencing print.less was chosen with the intent that it'd be easier to assume styles are screen styles unless a media query says otherwise. This patch also makes the variables import common among print and screen styles. Bug: T246419 Change-Id: I981d0937aaacb7cba082c337f98c90e90b46b340
81 lines
4.1 KiB
JavaScript
81 lines
4.1 KiB
JavaScript
import mustache from 'mustache';
|
||
import { htmluserlangattributes } from './utils';
|
||
import skinTemplate from '!!raw-loader!../includes/templates/index.mustache';
|
||
import { placeholder } from './utils';
|
||
|
||
import '../resources/skins.vector.styles/index.less';
|
||
import { NAVIGATION_TEMPLATE_DATA, navTemplate, NAVIGATION_TEMPLATE_PARTIALS } from './Navigation.stories.data';
|
||
import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
|
||
|
||
const TEMPLATE_PARTIALS = Object.assign( {}, NAVIGATION_TEMPLATE_PARTIALS, {
|
||
Navigation: navTemplate,
|
||
Footer: footerTemplate
|
||
} );
|
||
|
||
export default {
|
||
title: 'Skin'
|
||
};
|
||
|
||
const HTML_INDICATORS = `<div class="mw-indicators mw-body-content">
|
||
<div id="mw-indicator-good-star" class="mw-indicator">
|
||
<a href="/wiki/Wikipedia:Good_articles"
|
||
title="This is a good article. Follow the link for more information.">
|
||
<img alt="This is a good article. Follow the link for more information."
|
||
src="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/19px-Symbol_support_vote.svg.png" decoding="async" width="19" height="20"
|
||
srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/29px-Symbol_support_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/39px-Symbol_support_vote.svg.png 2x" data-file-width="180" data-file-height="185" />
|
||
</a>
|
||
</div>
|
||
<div id="mw-indicator-pp-autoreview" class="mw-indicator">
|
||
<a href="/wiki/Wikipedia:Protection_policy#pending"
|
||
title="All edits by unregistered and new users are subject to review prior to becoming visible to unregistered users">
|
||
<img alt="Page protected with pending changes" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/20px-Pending-protection-shackle.svg.png"
|
||
decoding="async" width="20" height="20" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/30px-Pending-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/40px-Pending-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
export const vector2019LoggedOut = () => mustache.render( skinTemplate, {
|
||
'html-title': 'Vector 2019',
|
||
'page-isarticle': true,
|
||
'msg-tagline': 'From Wikipedia, the free encyclopedia',
|
||
'html-userlangattributes': htmluserlangattributes,
|
||
'msg-jumptonavigation': 'Jump to navigation',
|
||
'msg-jumptosearch': 'Jump to search',
|
||
'data-navigation': NAVIGATION_TEMPLATE_DATA.loggedOutWithVariants,
|
||
|
||
// site specific
|
||
'data-footer': FOOTER_TEMPLATE_DATA,
|
||
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'html-bodycontent': placeholder( 'Article content goes here' ),
|
||
'html-printfooter': `Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
|
||
'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 ),
|
||
|
||
// extension dependent..
|
||
'html-hook-vector-before-footer': placeholder( 'VectorBeforeFooter hook output', 100 ),
|
||
'html-dataAfterContent': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
|
||
'html-indicators': HTML_INDICATORS,
|
||
'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
|
||
}, TEMPLATE_PARTIALS );
|
||
|
||
export const vector2019LoggedIn = () => mustache.render( skinTemplate, {
|
||
'html-title': 'Vector 2019',
|
||
'page-isarticle': true,
|
||
'msg-tagline': 'From Wikipedia, the free encyclopedia',
|
||
'html-userlangattributes': htmluserlangattributes,
|
||
'msg-jumptonavigation': 'Jump to navigation',
|
||
'msg-jumptosearch': 'Jump to search',
|
||
'data-navigation': NAVIGATION_TEMPLATE_DATA.loggedInWithMoreActions,
|
||
|
||
// site specific
|
||
'data-footer': FOOTER_TEMPLATE_DATA,
|
||
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'html-bodycontent': placeholder( 'Article content goes here' ),
|
||
'html-printfooter': `Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
|
||
'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 )
|
||
}, TEMPLATE_PARTIALS );
|