Only load gallery styling rules when galleries are on the page
* Double load styling rules in legacy modules so we have time for cached pages to catch up ** Double loading styles is acceptable for 30 days. There is no better way. * Load gallery css when gallery tag invoked. To test: * Visit a page with a gallery tag and purge it, note styles are present. * Visit a page without a gallery tag and purge it, note styles are not present Bug: T98878 Change-Id: Ib1aef04dc4fece78e6615386ecaef6a9f368f49e
This commit is contained in:
parent
0373da7eb3
commit
c845586dc7
6 changed files with 150 additions and 141 deletions
|
|
@ -5326,6 +5326,7 @@ class Parser {
|
|||
$ig->setParser( $this );
|
||||
$ig->setHideBadImages();
|
||||
$ig->setAttributes( Sanitizer::validateTagAttributes( $params, 'table' ) );
|
||||
$this->getOutput()->addModuleStyles( 'mediawiki.page.gallery.styles' );
|
||||
|
||||
if ( isset( $params['showfilename'] ) ) {
|
||||
$ig->setShowFilename( true );
|
||||
|
|
|
|||
|
|
@ -1416,9 +1416,18 @@ return array(
|
|||
'mediawiki.page.gallery' => array(
|
||||
'scripts' => 'resources/src/mediawiki.page/mediawiki.page.gallery.js',
|
||||
'dependencies' => array(
|
||||
'mediawiki.page.gallery.styles',
|
||||
'jquery.throttle-debounce',
|
||||
)
|
||||
),
|
||||
'mediawiki.page.gallery.styles' => array(
|
||||
'styles' => array(
|
||||
'resources/src/mediawiki.page/mediawiki.page.gallery.print.css' => array( 'media' => 'print' ),
|
||||
'resources/src/mediawiki.page/mediawiki.page.gallery.css',
|
||||
),
|
||||
'position' => 'top',
|
||||
'targets' => array( 'desktop', 'mobile' ),
|
||||
),
|
||||
'mediawiki.page.ready' => array(
|
||||
'scripts' => 'resources/src/mediawiki.page/mediawiki.page.ready.js',
|
||||
'dependencies' => array(
|
||||
|
|
@ -1700,6 +1709,8 @@ return array(
|
|||
'mediawiki.legacy.commonPrint' => array(
|
||||
'position' => 'top',
|
||||
'styles' => array(
|
||||
// @todo: Remove mediawiki.page.gallery when cache has cleared
|
||||
'resources/src/mediawiki.page/mediawiki.page.gallery.print.css' => array( 'media' => 'print' ),
|
||||
'resources/src/mediawiki.legacy/commonPrint.css' => array( 'media' => 'print' )
|
||||
),
|
||||
'group' => 'print',
|
||||
|
|
@ -1713,6 +1724,8 @@ return array(
|
|||
'mediawiki.legacy.shared' => array(
|
||||
'position' => 'top',
|
||||
'styles' => array(
|
||||
// @todo: Remove when mediawiki.page.gallery in cached html.
|
||||
'resources/src/mediawiki.page/mediawiki.page.gallery.css',
|
||||
'resources/src/mediawiki.legacy/shared.css' => array( 'media' => 'screen' )
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -284,45 +284,6 @@ img.thumbborder {
|
|||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
/**
|
||||
* Galleries (see shared.css for more info)
|
||||
*/
|
||||
li.gallerybox {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.gallery, li.gallerybox {
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
ul.gallery {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.gallerycaption {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb {
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
div.gallerytext {
|
||||
overflow: hidden;
|
||||
font-size: 94%;
|
||||
padding: 2px 4px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table rendering
|
||||
* As on shared.css but with white background.
|
||||
|
|
|
|||
|
|
@ -787,108 +787,6 @@ table.mw_metadata ul.metadata-langlist {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Galleries */
|
||||
/* These display attributes look nonsensical, but are needed to support IE and FF2 */
|
||||
/* Don't forget to update commonPrint.css */
|
||||
li.gallerybox {
|
||||
vertical-align: top;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.gallery,
|
||||
li.gallerybox {
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
ul.gallery {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.gallerycaption {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb {
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.gallerytext {
|
||||
overflow: hidden;
|
||||
font-size: 94%;
|
||||
padding: 2px 4px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* new gallery stuff */
|
||||
ul.mw-gallery-nolines li.gallerybox div.thumb {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.mw-gallery-nolines li.gallerybox div.gallerytext {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* height constrained gallery */
|
||||
|
||||
ul.mw-gallery-packed li.gallerybox div.thumb,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox div.thumb,
|
||||
ul.mw-gallery-packed-hover li.gallerybox div.thumb {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed li.gallerybox div.thumb img,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox div.thumb img,
|
||||
ul.mw-gallery-packed-hover li.gallerybox div.thumb img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover li.gallerybox,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover div.gallerytextwrapper {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
|
||||
ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
|
||||
position: absolute;
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 5px 10px;
|
||||
bottom: 0;
|
||||
left: 0; /* Needed for IE */
|
||||
height: auto;
|
||||
font-weight: bold;
|
||||
margin: 2px; /* correspond to style on div.thumb */
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover,
|
||||
ul.mw-gallery-packed-overlay,
|
||||
ul.mw-gallery-packed {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mw-ajax-loader {
|
||||
background-image: url(images/ajax-loader.gif);
|
||||
background-position: center center;
|
||||
|
|
|
|||
101
resources/src/mediawiki.page/mediawiki.page.gallery.css
Normal file
101
resources/src/mediawiki.page/mediawiki.page.gallery.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
/* Galleries */
|
||||
/* These display attributes look nonsensical, but are needed to support IE and FF2 */
|
||||
/* Don't forget to update commonPrint.css */
|
||||
li.gallerybox {
|
||||
vertical-align: top;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.gallery,
|
||||
li.gallerybox {
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
ul.gallery {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.gallerycaption {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb {
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.gallerytext {
|
||||
overflow: hidden;
|
||||
font-size: 94%;
|
||||
padding: 2px 4px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* new gallery stuff */
|
||||
ul.mw-gallery-nolines li.gallerybox div.thumb {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.mw-gallery-nolines li.gallerybox div.gallerytext {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* height constrained gallery */
|
||||
|
||||
ul.mw-gallery-packed li.gallerybox div.thumb,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox div.thumb,
|
||||
ul.mw-gallery-packed-hover li.gallerybox div.thumb {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed li.gallerybox div.thumb img,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox div.thumb img,
|
||||
ul.mw-gallery-packed-hover li.gallerybox div.thumb img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover li.gallerybox,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover div.gallerytextwrapper {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
|
||||
ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
|
||||
ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
|
||||
position: absolute;
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 5px 10px;
|
||||
bottom: 0;
|
||||
left: 0; /* Needed for IE */
|
||||
height: auto;
|
||||
font-weight: bold;
|
||||
margin: 2px; /* correspond to style on div.thumb */
|
||||
}
|
||||
|
||||
ul.mw-gallery-packed-hover,
|
||||
ul.mw-gallery-packed-overlay,
|
||||
ul.mw-gallery-packed {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
li.gallerybox {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.gallery, li.gallerybox {
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
ul.gallery {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.gallerycaption {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb {
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
div.gallerytext {
|
||||
overflow: hidden;
|
||||
font-size: 94%;
|
||||
padding: 2px 4px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
Loading…
Reference in a new issue