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
