jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/346756 )
Change subject: Bundle styles from mediawiki.skinning.content.parsoid ...................................................................... Bundle styles from mediawiki.skinning.content.parsoid Adds styles from another ResourceLoader module, mediawiki.skinning. content.parsoid, to our bundled CSS for better output parity with pure MediaWiki HTML. Relevant here, this injects the expected incremented counter when displaying external links with otherwise empty inner content. Also adds another class, mw-body-content, to the content div in order for the desired CSS rule to take effect. Testing note: Please test with a local MCS or appservice.wmflabs.org as this requires a change recently merged to mobileapps master but not yet deployed to production. Bug: T162116 Change-Id: I8cd87c97181b385c21b466e275f0a5785cea96db --- M app/src/main/assets/index.html M app/src/main/assets/preview.css M app/src/main/assets/styles.css M scripts/make-css-assets.bash 4 files changed, 308 insertions(+), 8 deletions(-) Approvals: Niedzielski: Looks good to me, approved jenkins-bot: Verified diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html index 9d625ba..95b6e14 100644 --- a/app/src/main/assets/index.html +++ b/app/src/main/assets/index.html @@ -9,7 +9,7 @@ <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body class="stable"> -<div id="content" class="content"></div> +<div id="content" class="content mw-body-content"></div> <div id="loading_sections"></div> </body> </html> \ No newline at end of file diff --git a/app/src/main/assets/preview.css b/app/src/main/assets/preview.css index dd41696..142879f 100644 --- a/app/src/main/assets/preview.css +++ b/app/src/main/assets/preview.css @@ -622,32 +622,32 @@ 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%; @@ -1316,4 +1316,154 @@ font-family: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif; font-weight: bold; padding: 15px 0 0 !important; +}/** + * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser. + */ +/*csslint regex-selectors:false */ +/* + * Auto-numbered external links + * Parsoid renders those as link without content, and lets CSS do the + * counting. This way the counting style can be customized, and counts update + * automatically when content is modified. + */ +.mw-body-content { + counter-reset: mw-numbered-ext-link; +} +.mw-body-content a[rel~='mw:ExtLink']:empty:after { + content: '[' counter(mw-numbered-ext-link) ']'; + counter-increment: mw-numbered-ext-link; +} +/** + * References + * + * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags. + * + * Markup: + * Cake is good<sup>[2]</sup> + * The cake is a lie<span class="reference">[1]</span> + * + * Styleguide 1.1. + */ +span.reference { + font-size: 80%; + line-height: 1; + vertical-align: super; + unicode-bidi: -moz-isolate; + unicode-bidi: isolate; +} +sup, +sub { + line-height: 1; +} +/** + * Block media items + */ +figure[typeof*='mw:Image'], +figure[typeof*='mw:Video'], +figure[typeof*='mw:Audio'] { + margin: 0; +} +figure[typeof*='mw:Image'] a, +figure[typeof*='mw:Video'] a, +figure[typeof*='mw:Audio'] a { + border: 0; +} +figure[typeof*='mw:Image'].mw-halign-right, +figure[typeof*='mw:Video'].mw-halign-right, +figure[typeof*='mw:Audio'].mw-halign-right { + /* @noflip */ + margin: 0.5em 0 1.3em 1.4em; + /* @noflip */ + clear: right; + /* @noflip */ + float: right; +} +figure[typeof*='mw:Image'].mw-halign-left, +figure[typeof*='mw:Video'].mw-halign-left, +figure[typeof*='mw:Audio'].mw-halign-left { + /* @noflip */ + margin: 0.5em 1.4em 1.3em 0; + /* @noflip */ + clear: left; + /* @noflip */ + float: left; +} +figure[typeof*='mw:Image'].mw-halign-none, +figure[typeof*='mw:Video'].mw-halign-none, +figure[typeof*='mw:Audio'].mw-halign-none { + margin: 0; + clear: none; + float: none; +} +figure[typeof*='mw:Image'].mw-halign-center, +figure[typeof*='mw:Video'].mw-halign-center, +figure[typeof*='mw:Audio'].mw-halign-center { + margin: 0 auto 0.5em auto; + display: table; + clear: none; + float: none; +} +figure[typeof*='mw:Image'] > figcaption, +figure[typeof*='mw:Video'] > figcaption, +figure[typeof*='mw:Audio'] > figcaption { + display: table-caption; + caption-side: bottom; + /* In mw-core the font-size is duplicated, 94% in thumbiner + * and again 94% in thumbcaption. 88.4% for font size of the + * caption results in the same behavior. */ + font-size: 88.4%; + line-height: 1.4em; + text-align: left; + border: 1px solid #c8ccd1; + border-top: 0; + /* taken from .thumbcaption, plus .thumbinner */ + padding: 0 6px 6px 6px; + background-color: #f8f9fa; +} +figure[typeof*='mw:Image'] > figcaption table, +figure[typeof*='mw:Video'] > figcaption table, +figure[typeof*='mw:Audio'] > figcaption table { + /* reset caption side for tables inside figcaptions */ + caption-side: top; +} +figure[typeof~='mw:Image/Thumb'], +figure[typeof~='mw:Video/Thumb'], +figure[typeof~='mw:Audio/Thumb'], +figure[typeof~='mw:Image/Frame'], +figure[typeof~='mw:Video/Frame'], +figure[typeof~='mw:Audio/Frame'] { + display: table; + overflow: auto; + text-align: center; + border: 1px solid #c8ccd1; + border-bottom: 0; + border-collapse: collapse; + background-color: #f8f9fa; + margin: 0.5em 0 1.3em 1.4em; + clear: right; + float: right; +} +figure[typeof~='mw:Image/Thumb'] > *:first-child > img, +figure[typeof~='mw:Video/Thumb'] > *:first-child > video, +figure[typeof~='mw:Audio/Thumb'] > *:first-child > video, +figure[typeof~='mw:Image/Frame'] > *:first-child > img, +figure[typeof~='mw:Video/Frame'] > *:first-child > video, +figure[typeof~='mw:Audio/Frame'] > *:first-child > video { + border: 1px solid #c8ccd1; + margin: 3px; + background: #fff; +} +/* Same as img.thumbborder in content.css */ +.mw-image-border > *:first-child > img, +.mw-image-border > *:first-child > video { + border: 1px solid #eaecf0; +} +/* Hide the caption for frameless and plain floated images */ +figure[typeof~='mw:Image/Frameless'] > figcaption, +figure[typeof~='mw:Video/Frameless'] > figcaption, +figure[typeof~='mw:Audio/Frameless'] > figcaption, +figure[typeof~='mw:Image'] > figcaption, +figure[typeof~='mw:Video'] > figcaption, +figure[typeof~='mw:Audio'] > figcaption { + display: none; } \ No newline at end of file diff --git a/app/src/main/assets/styles.css b/app/src/main/assets/styles.css index 0c23533..14a286b 100644 --- a/app/src/main/assets/styles.css +++ b/app/src/main/assets/styles.css @@ -1451,4 +1451,154 @@ .gallerytext, figcaption { text-align: center; +}/** + * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser. + */ +/*csslint regex-selectors:false */ +/* + * Auto-numbered external links + * Parsoid renders those as link without content, and lets CSS do the + * counting. This way the counting style can be customized, and counts update + * automatically when content is modified. + */ +.mw-body-content { + counter-reset: mw-numbered-ext-link; +} +.mw-body-content a[rel~='mw:ExtLink']:empty:after { + content: '[' counter(mw-numbered-ext-link) ']'; + counter-increment: mw-numbered-ext-link; +} +/** + * References + * + * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags. + * + * Markup: + * Cake is good<sup>[2]</sup> + * The cake is a lie<span class="reference">[1]</span> + * + * Styleguide 1.1. + */ +span.reference { + font-size: 80%; + line-height: 1; + vertical-align: super; + unicode-bidi: -moz-isolate; + unicode-bidi: isolate; +} +sup, +sub { + line-height: 1; +} +/** + * Block media items + */ +figure[typeof*='mw:Image'], +figure[typeof*='mw:Video'], +figure[typeof*='mw:Audio'] { + margin: 0; +} +figure[typeof*='mw:Image'] a, +figure[typeof*='mw:Video'] a, +figure[typeof*='mw:Audio'] a { + border: 0; +} +figure[typeof*='mw:Image'].mw-halign-right, +figure[typeof*='mw:Video'].mw-halign-right, +figure[typeof*='mw:Audio'].mw-halign-right { + /* @noflip */ + margin: 0.5em 0 1.3em 1.4em; + /* @noflip */ + clear: right; + /* @noflip */ + float: right; +} +figure[typeof*='mw:Image'].mw-halign-left, +figure[typeof*='mw:Video'].mw-halign-left, +figure[typeof*='mw:Audio'].mw-halign-left { + /* @noflip */ + margin: 0.5em 1.4em 1.3em 0; + /* @noflip */ + clear: left; + /* @noflip */ + float: left; +} +figure[typeof*='mw:Image'].mw-halign-none, +figure[typeof*='mw:Video'].mw-halign-none, +figure[typeof*='mw:Audio'].mw-halign-none { + margin: 0; + clear: none; + float: none; +} +figure[typeof*='mw:Image'].mw-halign-center, +figure[typeof*='mw:Video'].mw-halign-center, +figure[typeof*='mw:Audio'].mw-halign-center { + margin: 0 auto 0.5em auto; + display: table; + clear: none; + float: none; +} +figure[typeof*='mw:Image'] > figcaption, +figure[typeof*='mw:Video'] > figcaption, +figure[typeof*='mw:Audio'] > figcaption { + display: table-caption; + caption-side: bottom; + /* In mw-core the font-size is duplicated, 94% in thumbiner + * and again 94% in thumbcaption. 88.4% for font size of the + * caption results in the same behavior. */ + font-size: 88.4%; + line-height: 1.4em; + text-align: left; + border: 1px solid #c8ccd1; + border-top: 0; + /* taken from .thumbcaption, plus .thumbinner */ + padding: 0 6px 6px 6px; + background-color: #f8f9fa; +} +figure[typeof*='mw:Image'] > figcaption table, +figure[typeof*='mw:Video'] > figcaption table, +figure[typeof*='mw:Audio'] > figcaption table { + /* reset caption side for tables inside figcaptions */ + caption-side: top; +} +figure[typeof~='mw:Image/Thumb'], +figure[typeof~='mw:Video/Thumb'], +figure[typeof~='mw:Audio/Thumb'], +figure[typeof~='mw:Image/Frame'], +figure[typeof~='mw:Video/Frame'], +figure[typeof~='mw:Audio/Frame'] { + display: table; + overflow: auto; + text-align: center; + border: 1px solid #c8ccd1; + border-bottom: 0; + border-collapse: collapse; + background-color: #f8f9fa; + margin: 0.5em 0 1.3em 1.4em; + clear: right; + float: right; +} +figure[typeof~='mw:Image/Thumb'] > *:first-child > img, +figure[typeof~='mw:Video/Thumb'] > *:first-child > video, +figure[typeof~='mw:Audio/Thumb'] > *:first-child > video, +figure[typeof~='mw:Image/Frame'] > *:first-child > img, +figure[typeof~='mw:Video/Frame'] > *:first-child > video, +figure[typeof~='mw:Audio/Frame'] > *:first-child > video { + border: 1px solid #c8ccd1; + margin: 3px; + background: #fff; +} +/* Same as img.thumbborder in content.css */ +.mw-image-border > *:first-child > img, +.mw-image-border > *:first-child > video { + border: 1px solid #eaecf0; +} +/* Hide the caption for frameless and plain floated images */ +figure[typeof~='mw:Image/Frameless'] > figcaption, +figure[typeof~='mw:Video/Frameless'] > figcaption, +figure[typeof~='mw:Audio/Frameless'] > figcaption, +figure[typeof~='mw:Image'] > figcaption, +figure[typeof~='mw:Video'] > figcaption, +figure[typeof~='mw:Audio'] > figcaption { + display: none; } \ No newline at end of file diff --git a/scripts/make-css-assets.bash b/scripts/make-css-assets.bash index 12751ad..b160dc4 100755 --- a/scripts/make-css-assets.bash +++ b/scripts/make-css-assets.bash @@ -2,6 +2,6 @@ PREFIX="https://www.mediawiki.org/w" BASE_PATH="`dirname $0`/.." -wget "$PREFIX/load.php?debug=true&lang=en&modules=skins.minerva.base.reset|skins.minerva.content.styles|ext.cite.style|mediawiki.page.gallery.styles|mobile.app.pagestyles.android&only=styles&skin=vector&version=&*" -O "$BASE_PATH/app/src/main/assets/styles.css" -wget "$PREFIX/load.php?debug=true&lang=en&modules=skins.minerva.base.reset|skins.minerva.content.styles|ext.cite.style|mediawiki.page.gallery.styles|mobile.app.preview.android|mobile.app.preview&only=styles&skin=vector&version=&*" -O "$BASE_PATH/app/src/main/assets/preview.css" +wget "$PREFIX/load.php?debug=true&lang=en&modules=skins.minerva.base.reset|skins.minerva.content.styles|ext.cite.style|mediawiki.page.gallery.styles|mobile.app.pagestyles.android|mediawiki.skinning.content.parsoid&only=styles&skin=vector&version=&*" -O "$BASE_PATH/app/src/main/assets/styles.css" +wget "$PREFIX/load.php?debug=true&lang=en&modules=skins.minerva.base.reset|skins.minerva.content.styles|ext.cite.style|mediawiki.page.gallery.styles|mobile.app.preview.android|mobile.app.preview|mediawiki.skinning.content.parsoid&only=styles&skin=vector&version=&*" -O "$BASE_PATH/app/src/main/assets/preview.css" wget "$PREFIX/load.php?debug=true&lang=en&modules=mobile.app.pagestyles.android.night&only=styles&skin=vector&version=&*" -O "$BASE_PATH/app/src/main/assets/dark.css" -- To view, visit https://gerrit.wikimedia.org/r/346756 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I8cd87c97181b385c21b466e275f0a5785cea96db Gerrit-PatchSet: 2 Gerrit-Project: apps/android/wikipedia Gerrit-Branch: master Gerrit-Owner: Mholloway <mhollo...@wikimedia.org> Gerrit-Reviewer: BearND <bsitzm...@wikimedia.org> Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org> Gerrit-Reviewer: Dbrant <dbr...@wikimedia.org> Gerrit-Reviewer: Mholloway <mhollo...@wikimedia.org> Gerrit-Reviewer: Mhurd <mh...@wikimedia.org> Gerrit-Reviewer: Niedzielski <sniedziel...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits