jenkins-bot has submitted this change and it was merged.
Change subject: Make infoboxes (and other tables) collapsible.
......................................................................
Make infoboxes (and other tables) collapsible.
- Refresh css styles with pending changes from MobileApp extension.
Change-Id: Id0ab8550e1d2bd165a68a29a9551aee1e6d8e748
---
M wikipedia/assets/bundle.js
M wikipedia/assets/night.css
M wikipedia/assets/preview.css
M wikipedia/assets/styles.css
M wikipedia/res/values-qq/strings.xml
M wikipedia/res/values/strings.xml
M wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
M www/js/sections.js
M www/js/transforms.js
9 files changed, 383 insertions(+), 21 deletions(-)
Approvals:
BearND: Looks good to me, approved
jenkins-bot: Verified
diff --git a/wikipedia/assets/bundle.js b/wikipedia/assets/bundle.js
index 7dc88e8..b1c9e0a 100644
--- a/wikipedia/assets/bundle.js
+++ b/wikipedia/assets/bundle.js
@@ -450,8 +450,14 @@
content.innerHTML = editButton.outerHTML + payload.section.text;
content.id = "content_block_0";
+ window.string_table_infobox = payload.string_table_infobox;
+ window.string_table_other = payload.string_table_other;
+ window.string_table_close = payload.string_table_close;
+
content = transformer.transform( "leadSection", content );
content = transformer.transform( "section", content );
+ content = transformer.transform( "hideTables", content );
+
content = transformer.transform("displayDisambigLink", content);
content = transformer.transform("displayIssuesLink", content);
@@ -508,6 +514,7 @@
content.innerHTML = section.text;
content.id = "content_block_" + section.id;
content = transformer.transform( "section", content );
+ content = transformer.transform( "hideTables", content );
return [ heading, content ];
}
@@ -660,6 +667,129 @@
return leadContent;
} );
+/*
+Tries to get an array of table header (TH) contents from a given table.
+If there are no TH elements in the table, an empty array is returned.
+*/
+function getTableHeader( element ) {
+ var thArray = [];
+ if (element.children === null) {
+ return thArray;
+ }
+ for (var i = 0; i < element.children.length; i++) {
+ if (element.children[i].tagName === "TH") {
+ if (element.children[i].innerText.length > 0) {
+ thArray.push(element.children[i].innerText);
+ }
+ }
+ //if it's a table within a table, don't worry about it
+ if (element.children[i].tagName === "TABLE") {
+ continue;
+ }
+ //recurse into children of this element
+ var ret = getTableHeader(element.children[i]);
+ //did we get a list of TH from this child?
+ if (ret.length > 0) {
+ thArray = thArray.concat(ret);
+ }
+ }
+ return thArray;
+}
+
+/*
+OnClick handler function for expanding/collapsing tables and infoboxes.
+*/
+function tableCollapseClickHandler() {
+ var container = this.parentNode;
+ var divCollapsed = container.children[0];
+ var tableFull = container.children[1];
+ var divBottom = container.children[2];
+ if (tableFull.style.display !== 'none') {
+ tableFull.style.display = 'none';
+ divCollapsed.classList.remove('app_table_collapse_close');
+ divCollapsed.classList.remove('app_table_collapse_icon');
+ divCollapsed.classList.add('app_table_collapsed_open');
+ divBottom.style.display = 'none';
+ //if they clicked the bottom div, then scroll back up to the top of
the table.
+ if (this === divBottom) {
+ window.scrollTo( 0, container.offsetTop - 48 );
+ }
+ } else {
+ tableFull.style.display = 'block';
+ divCollapsed.classList.remove('app_table_collapsed_open');
+ divCollapsed.classList.add('app_table_collapse_close');
+ divCollapsed.classList.add('app_table_collapse_icon');
+ divBottom.style.display = 'block';
+ }
+}
+
+transformer.register( "hideTables", function( content ) {
+ var tables = content.querySelectorAll( "table" );
+ for (var i = 0; i < tables.length; i++) {
+ //is the table already hidden? if so, don't worry about it
+ if (tables[i].style.display === 'none' ||
tables[i].classList.contains( 'navbox' ) || tables[i].classList.contains(
'vertical-navbox' ) || tables[i].classList.contains( 'navbox-inner' )) {
+ continue;
+ }
+
+ var isInfobox = tables[i].classList.contains( 'infobox' );
+ var headerText = getTableHeader(tables[i]);
+ if (headerText.length === 0 && !isInfobox) {
+ continue;
+ }
+ var caption = "<strong>" + (isInfobox ? window.string_table_infobox :
window.string_table_other) + "</strong>";
+ caption += "<span class='app_span_collapse_text'>";
+ if (headerText.length > 0) {
+ caption += ": " + headerText[0];
+ }
+ if (headerText.length > 1) {
+ caption += ", " + headerText[1];
+ }
+ if (headerText.length > 2) {
+ caption += ", ...";
+ }
+ caption += "</span>";
+
+ //create the container div that will contain both the original table
+ //and the collapsed version.
+ var containerDiv = document.createElement( 'div' );
+ containerDiv.className = 'app_table_container';
+ tables[i].parentNode.insertBefore(containerDiv, tables[i]);
+ tables[i].parentNode.removeChild(tables[i]);
+
+ //remove top and bottom margin from the table, so that it's flush with
+ //our expand/collapse buttons
+ tables[i].style.marginTop = "0px";
+ tables[i].style.marginBottom = "0px";
+
+ //create the collapsed div
+ var collapsedDiv = document.createElement( 'div' );
+ collapsedDiv.classList.add('app_table_collapsed_container');
+ collapsedDiv.classList.add('app_table_collapsed_open');
+ collapsedDiv.innerHTML = caption;
+
+ //create the bottom collapsed div
+ var bottomDiv = document.createElement( 'div' );
+ bottomDiv.classList.add('app_table_collapsed_bottom');
+ bottomDiv.classList.add('app_table_collapse_icon');
+ bottomDiv.innerHTML = window.string_table_close;
+
+ //add our stuff to the container
+ containerDiv.appendChild(collapsedDiv);
+ containerDiv.appendChild(tables[i]);
+ containerDiv.appendChild(bottomDiv);
+
+ //set initial visibility
+ tables[i].style.display = 'none';
+ collapsedDiv.style.display = 'block';
+ bottomDiv.style.display = 'none';
+
+ //assign click handler to the collapsed divs
+ collapsedDiv.onclick = tableCollapseClickHandler;
+ bottomDiv.onclick = tableCollapseClickHandler;
+ }
+ return content;
+} );
+
transformer.register( "section", function( content ) {
if ( window.isNightMode ) {
night.invertElement ( content );
diff --git a/wikipedia/assets/night.css b/wikipedia/assets/night.css
index 28b8d49..0e99175 100644
--- a/wikipedia/assets/night.css
+++ b/wikipedia/assets/night.css
@@ -25,4 +25,15 @@
}
.content table.infobox {
background: #000;
+}
+.app_table_collapsed_container {
+ border: solid 1px #505050;
+ background-color: #202020;
+}
+.app_span_collapse_text {
+ color: #808080;
+}
+.app_table_collapsed_bottom {
+ border: solid 1px #505050;
+ background-color: #202020;
}
\ No newline at end of file
diff --git a/wikipedia/assets/preview.css b/wikipedia/assets/preview.css
index 9ef2908..3f514f3 100644
--- a/wikipedia/assets/preview.css
+++ b/wikipedia/assets/preview.css
@@ -23,6 +23,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
html,
body,
@@ -138,6 +139,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
html {
-webkit-text-size-adjust: none;
@@ -187,6 +189,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content .thumb {
margin: .6em 0;
@@ -241,6 +244,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content img {
vertical-align: middle;
@@ -290,6 +294,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
ul.gallery {
list-style: none;
@@ -337,6 +342,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
#section_0 {
line-height: 1.3;
@@ -388,6 +394,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
blockquote {
font-family: "Linux Libertine", Georgia, Times, serif;
@@ -434,6 +441,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content ol ol,
.content ol ul,
@@ -480,6 +488,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
/* Plainlinks - this can be used to switch
* off special external link styling */
@@ -504,10 +513,9 @@
a.external {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVElEQVR42n3PgQkAIAhEUXdqJ3dqJ3e6IoTPUSQcgj4EQ5IlUiLE0Jil3PECXhcHGBhZ8kg4hwxAu3MZeCGeyFnAXp4hqNQPnt7QL0nADpD6wHccLvnAKksq8iiaAAAAAElFTkSuQmCC);
background-image:
url(//bits.beta.wmflabs.org/static-master/extensions/MobileApp/../MobileFrontend/less/content/images/external-link-ltr-icon.png?2014-09-30T20:38:20Z)!ie;
- background-image: -webkit-linear-gradient(transparent,transparent),
url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cdefs%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M-.958-4.259c-1.134%200-2.056.922-2.056%202.056%200%20.394.143.736.336%201.049l-.07.056c-.373-.513-.954-.867-1.636-.867-1.134%200-2.056.922-2.056%202.056s.922%202.056%202.056%202.056c.596%200%201.121-.265%201.496-.671-.075.213-.126.433-.126.671%200%201.134.922%202.056%202.056%202.056s2.056-.922%202.056-2.056c0-.476-.189-.896-.462-1.245.813.158%201.627.477%202.224%201.399-.443-.443-.727-1.248-.727-2.336l-.378-.028.35-.014c0-1.087.27-1.893.713-2.336-.575.889-1.354%201.216-2.14%201.385.243-.337.42-.728.42-1.175%200-1.134-.922-2.056-2.056-2.056z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M0-2.828l-2.828%202.828%202.828%202.828%202.828-2.828-2.828-2.828z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M10%200l4-4-14%204%2014%204-4-4z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%20d%3D%22M.5%203.518h5.982v5.982h-5.982z%22%2F%3E%3Cpath%20d%3D%22M4.755-.16h5.234v5.39l-1.571%201.544-1.31-1.31-2.725%202.725-2.688-2.688%202.808-2.808-1.31-1.31z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M8.984.845l.022%204.884-1.817-1.817-2.881%202.881-1.227-1.227%202.881-2.881-1.85-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
- background-image: -webkit-linear-gradient(transparent,transparent),
url(//bits.beta.wmflabs.org/static-master/extensions/MobileApp/../MobileFrontend/less/content/images/external-link-ltr-icon.svg?2014-09-30T20:38:20Z)!ie;
- background-image: linear-gradient(transparent,transparent),
url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cdefs%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M-.958-4.259c-1.134%200-2.056.922-2.056%202.056%200%20.394.143.736.336%201.049l-.07.056c-.373-.513-.954-.867-1.636-.867-1.134%200-2.056.922-2.056%202.056s.922%202.056%202.056%202.056c.596%200%201.121-.265%201.496-.671-.075.213-.126.433-.126.671%200%201.134.922%202.056%202.056%202.056s2.056-.922%202.056-2.056c0-.476-.189-.896-.462-1.245.813.158%201.627.477%202.224%201.399-.443-.443-.727-1.248-.727-2.336l-.378-.028.35-.014c0-1.087.27-1.893.713-2.336-.575.889-1.354%201.216-2.14%201.385.243-.337.42-.728.42-1.175%200-1.134-.922-2.056-2.056-2.056z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M0-2.828l-2.828%202.828%202.828%202.828%202.828-2.828-2.828-2.828z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M10%200l4-4-14%204%2014%204-4-4z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%20d%3D%22M.5%203.518h5.982v5.982h-5.982z%22%2F%3E%3Cpath%20d%3D%22M4.755-.16h5.234v5.39l-1.571%201.544-1.31-1.31-2.725%202.725-2.688-2.688%202.808-2.808-1.31-1.31z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M8.984.845l.022%204.884-1.817-1.817-2.881%202.881-1.227-1.227%202.881-2.881-1.85-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
- background-image: linear-gradient(transparent,transparent),
url(//bits.beta.wmflabs.org/static-master/extensions/MobileApp/../MobileFrontend/less/content/images/external-link-ltr-icon.svg?2014-09-30T20:38:20Z)!ie;
+ /* We don't need the !ie hack because this old IE uses the fallback already
*/
+ background-image: -webkit-linear-gradient(transparent,transparent),
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGRlZnM+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNLS45NTgtNC4yNTljLTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2IDAgLjM5NC4xNDMuNzM2LjMzNiAxLjA0OWwtLjA3LjA1NmMtLjM3My0uNTEzLS45NTQtLjg2Ny0xLjYzNi0uODY3LTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2cy45MjIgMi4wNTYgMi4wNTYgMi4wNTZjLjU5NiAwIDEuMTIxLS4yNjUgMS40OTYtLjY3MS0uMDc1LjIxMy0uMTI2LjQzMy0uMTI2LjY3MSAwIDEuMTM0LjkyMiAyLjA1NiAyLjA1NiAyLjA1NnMyLjA1Ni0uOTIyIDIuMDU2LTIuMDU2YzAtLjQ3Ni0uMTg5LS44OTYtLjQ2Mi0xLjI0NS44MTMuMTU4IDEuNjI3LjQ3NyAyLjIyNCAxLjM5OS0uNDQzLS40NDMtLjcyNy0xLjI0OC0uNzI3LTIuMzM2bC0uMzc4LS4wMjguMzUtLjAxNGMwLTEuMDg3LjI3LTEuODkzLjcxMy0yLjMzNi0uNTc1Ljg4OS0xLjM1NCAxLjIxNi0yLjE0IDEuMzg1LjI0My0uMzM3LjQyLS43MjguNDItMS4xNzUgMC0xLjEzNC0uOTIyLTIuMDU2LTIuMDU2LTIuMDU2eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNMC0yLjgyOGwtMi44MjggMi44MjggMi44MjggMi44MjggMi44MjgtMi44MjgtMi44MjgtMi44Mjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSJOYU4iLz48L21hcmtlcj48bWFya2VyIG9yaWVudD0iYXV0byIgb3ZlcmZsb3c9InZpc2libGUiPjxwYXRoIGQ9Ik0xMCAwbDQtNC0xNCA0IDE0IDQtNC00eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PC9kZWZzPjxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzA2YyIgZD0iTS41IDMuNTE4aDUuOTgydjUuOTgyaC01Ljk4MnoiLz48cGF0aCBkPSJNNC43NTUtLjE2aDUuMjM0djUuMzlsLTEuNTcxIDEuNTQ0LTEuMzEtMS4zMS0yLjcyNSAyLjcyNS0yLjY4OC0yLjY4OCAyLjgwOC0yLjgwOC0xLjMxLTEuMzF6IiBmaWxsPSIjMDZmIi8+PHBhdGggZD0iTTguOTg0Ljg0NWwuMDIyIDQuODg0LTEuODE3LTEuODE3LTIuODgxIDIuODgxLTEuMjI3LTEuMjI3IDIuODgxLTIuODgxLTEuODUtMS44NTF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+ background-image: linear-gradient(transparent,transparent),
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGRlZnM+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNLS45NTgtNC4yNTljLTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2IDAgLjM5NC4xNDMuNzM2LjMzNiAxLjA0OWwtLjA3LjA1NmMtLjM3My0uNTEzLS45NTQtLjg2Ny0xLjYzNi0uODY3LTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2cy45MjIgMi4wNTYgMi4wNTYgMi4wNTZjLjU5NiAwIDEuMTIxLS4yNjUgMS40OTYtLjY3MS0uMDc1LjIxMy0uMTI2LjQzMy0uMTI2LjY3MSAwIDEuMTM0LjkyMiAyLjA1NiAyLjA1NiAyLjA1NnMyLjA1Ni0uOTIyIDIuMDU2LTIuMDU2YzAtLjQ3Ni0uMTg5LS44OTYtLjQ2Mi0xLjI0NS44MTMuMTU4IDEuNjI3LjQ3NyAyLjIyNCAxLjM5OS0uNDQzLS40NDMtLjcyNy0xLjI0OC0uNzI3LTIuMzM2bC0uMzc4LS4wMjguMzUtLjAxNGMwLTEuMDg3LjI3LTEuODkzLjcxMy0yLjMzNi0uNTc1Ljg4OS0xLjM1NCAxLjIxNi0yLjE0IDEuMzg1LjI0My0uMzM3LjQyLS43MjguNDItMS4xNzUgMC0xLjEzNC0uOTIyLTIuMDU2LTIuMDU2LTIuMDU2eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNMC0yLjgyOGwtMi44MjggMi44MjggMi44MjggMi44MjggMi44MjgtMi44MjgtMi44MjgtMi44Mjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSJOYU4iLz48L21hcmtlcj48bWFya2VyIG9yaWVudD0iYXV0byIgb3ZlcmZsb3c9InZpc2libGUiPjxwYXRoIGQ9Ik0xMCAwbDQtNC0xNCA0IDE0IDQtNC00eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PC9kZWZzPjxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzA2YyIgZD0iTS41IDMuNTE4aDUuOTgydjUuOTgyaC01Ljk4MnoiLz48cGF0aCBkPSJNNC43NTUtLjE2aDUuMjM0djUuMzlsLTEuNTcxIDEuNTQ0LTEuMzEtMS4zMS0yLjcyNSAyLjcyNS0yLjY4OC0yLjY4OCAyLjgwOC0yLjgwOC0xLjMxLTEuMzF6IiBmaWxsPSIjMDZmIi8+PHBhdGggZD0iTTguOTg0Ljg0NWwuMDIyIDQuODg0LTEuODE3LTEuODE3LTIuODgxIDIuODgxLTEuMjI3LTEuMjI3IDIuODgxLTIuODgxLTEuODUtMS44NTF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
background-repeat: no-repeat;
background-position: center right;
padding-right: 13px;
@@ -544,6 +552,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content p {
margin: .5em 0 1em 0;
@@ -558,10 +567,15 @@
}
code,
pre {
- padding: 1em;
font-family: monospace;
border: solid 1px #CCC;
white-space: pre-wrap;
+}
+code {
+ padding: 0.2em 0.5em;
+}
+pre {
+ padding: 1em;
}
sup {
vertical-align: super;
@@ -596,6 +610,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content table {
margin: 1em 0;
@@ -654,6 +669,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
/* Hide some on-wiki defined classes */
/* force portals to use a one column layout on mobile */
diff --git a/wikipedia/assets/styles.css b/wikipedia/assets/styles.css
index 5ed0e53..ff40925 100644
--- a/wikipedia/assets/styles.css
+++ b/wikipedia/assets/styles.css
@@ -23,6 +23,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
html,
body,
@@ -138,6 +139,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
html {
-webkit-text-size-adjust: none;
@@ -187,6 +189,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content .thumb {
margin: .6em 0;
@@ -241,6 +244,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content img {
vertical-align: middle;
@@ -290,6 +294,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
ul.gallery {
list-style: none;
@@ -337,6 +342,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
#section_0 {
line-height: 1.3;
@@ -388,6 +394,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
blockquote {
font-family: "Linux Libertine", Georgia, Times, serif;
@@ -434,6 +441,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content ol ol,
.content ol ul,
@@ -480,6 +488,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
/* Plainlinks - this can be used to switch
* off special external link styling */
@@ -504,10 +513,9 @@
a.external {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVElEQVR42n3PgQkAIAhEUXdqJ3dqJ3e6IoTPUSQcgj4EQ5IlUiLE0Jil3PECXhcHGBhZ8kg4hwxAu3MZeCGeyFnAXp4hqNQPnt7QL0nADpD6wHccLvnAKksq8iiaAAAAAElFTkSuQmCC);
background-image:
url(//bits.beta.wmflabs.org/static-master/extensions/MobileApp/../MobileFrontend/less/content/images/external-link-ltr-icon.png?2014-09-30T20:38:20Z)!ie;
- background-image: -webkit-linear-gradient(transparent,transparent),
url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cdefs%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M-.958-4.259c-1.134%200-2.056.922-2.056%202.056%200%20.394.143.736.336%201.049l-.07.056c-.373-.513-.954-.867-1.636-.867-1.134%200-2.056.922-2.056%202.056s.922%202.056%202.056%202.056c.596%200%201.121-.265%201.496-.671-.075.213-.126.433-.126.671%200%201.134.922%202.056%202.056%202.056s2.056-.922%202.056-2.056c0-.476-.189-.896-.462-1.245.813.158%201.627.477%202.224%201.399-.443-.443-.727-1.248-.727-2.336l-.378-.028.35-.014c0-1.087.27-1.893.713-2.336-.575.889-1.354%201.216-2.14%201.385.243-.337.42-.728.42-1.175%200-1.134-.922-2.056-2.056-2.056z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M0-2.828l-2.828%202.828%202.828%202.828%202.828-2.828-2.828-2.828z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M10%200l4-4-14%204%2014%204-4-4z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%20d%3D%22M.5%203.518h5.982v5.982h-5.982z%22%2F%3E%3Cpath%20d%3D%22M4.755-.16h5.234v5.39l-1.571%201.544-1.31-1.31-2.725%202.725-2.688-2.688%202.808-2.808-1.31-1.31z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M8.984.845l.022%204.884-1.817-1.817-2.881%202.881-1.227-1.227%202.881-2.881-1.85-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
- background-image: -webkit-linear-gradient(transparent,transparent),
url(//bits.beta.wmflabs.org/static-master/extensions/MobileApp/../MobileFrontend/less/content/images/external-link-ltr-icon.svg?2014-09-30T20:38:20Z)!ie;
- background-image: linear-gradient(transparent,transparent),
url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cdefs%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M-.958-4.259c-1.134%200-2.056.922-2.056%202.056%200%20.394.143.736.336%201.049l-.07.056c-.373-.513-.954-.867-1.636-.867-1.134%200-2.056.922-2.056%202.056s.922%202.056%202.056%202.056c.596%200%201.121-.265%201.496-.671-.075.213-.126.433-.126.671%200%201.134.922%202.056%202.056%202.056s2.056-.922%202.056-2.056c0-.476-.189-.896-.462-1.245.813.158%201.627.477%202.224%201.399-.443-.443-.727-1.248-.727-2.336l-.378-.028.35-.014c0-1.087.27-1.893.713-2.336-.575.889-1.354%201.216-2.14%201.385.243-.337.42-.728.42-1.175%200-1.134-.922-2.056-2.056-2.056z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M0-2.828l-2.828%202.828%202.828%202.828%202.828-2.828-2.828-2.828z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3Cmarker%20orient%3D%22auto%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M10%200l4-4-14%204%2014%204-4-4z%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-width%3D%22NaN%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%20d%3D%22M.5%203.518h5.982v5.982h-5.982z%22%2F%3E%3Cpath%20d%3D%22M4.755-.16h5.234v5.39l-1.571%201.544-1.31-1.31-2.725%202.725-2.688-2.688%202.808-2.808-1.31-1.31z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M8.984.845l.022%204.884-1.817-1.817-2.881%202.881-1.227-1.227%202.881-2.881-1.85-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
- background-image: linear-gradient(transparent,transparent),
url(//bits.beta.wmflabs.org/static-master/extensions/MobileApp/../MobileFrontend/less/content/images/external-link-ltr-icon.svg?2014-09-30T20:38:20Z)!ie;
+ /* We don't need the !ie hack because this old IE uses the fallback already
*/
+ background-image: -webkit-linear-gradient(transparent,transparent),
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGRlZnM+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNLS45NTgtNC4yNTljLTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2IDAgLjM5NC4xNDMuNzM2LjMzNiAxLjA0OWwtLjA3LjA1NmMtLjM3My0uNTEzLS45NTQtLjg2Ny0xLjYzNi0uODY3LTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2cy45MjIgMi4wNTYgMi4wNTYgMi4wNTZjLjU5NiAwIDEuMTIxLS4yNjUgMS40OTYtLjY3MS0uMDc1LjIxMy0uMTI2LjQzMy0uMTI2LjY3MSAwIDEuMTM0LjkyMiAyLjA1NiAyLjA1NiAyLjA1NnMyLjA1Ni0uOTIyIDIuMDU2LTIuMDU2YzAtLjQ3Ni0uMTg5LS44OTYtLjQ2Mi0xLjI0NS44MTMuMTU4IDEuNjI3LjQ3NyAyLjIyNCAxLjM5OS0uNDQzLS40NDMtLjcyNy0xLjI0OC0uNzI3LTIuMzM2bC0uMzc4LS4wMjguMzUtLjAxNGMwLTEuMDg3LjI3LTEuODkzLjcxMy0yLjMzNi0uNTc1Ljg4OS0xLjM1NCAxLjIxNi0yLjE0IDEuMzg1LjI0My0uMzM3LjQyLS43MjguNDItMS4xNzUgMC0xLjEzNC0uOTIyLTIuMDU2LTIuMDU2LTIuMDU2eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNMC0yLjgyOGwtMi44MjggMi44MjggMi44MjggMi44MjggMi44MjgtMi44MjgtMi44MjgtMi44Mjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSJOYU4iLz48L21hcmtlcj48bWFya2VyIG9yaWVudD0iYXV0byIgb3ZlcmZsb3c9InZpc2libGUiPjxwYXRoIGQ9Ik0xMCAwbDQtNC0xNCA0IDE0IDQtNC00eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PC9kZWZzPjxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzA2YyIgZD0iTS41IDMuNTE4aDUuOTgydjUuOTgyaC01Ljk4MnoiLz48cGF0aCBkPSJNNC43NTUtLjE2aDUuMjM0djUuMzlsLTEuNTcxIDEuNTQ0LTEuMzEtMS4zMS0yLjcyNSAyLjcyNS0yLjY4OC0yLjY4OCAyLjgwOC0yLjgwOC0xLjMxLTEuMzF6IiBmaWxsPSIjMDZmIi8+PHBhdGggZD0iTTguOTg0Ljg0NWwuMDIyIDQuODg0LTEuODE3LTEuODE3LTIuODgxIDIuODgxLTEuMjI3LTEuMjI3IDIuODgxLTIuODgxLTEuODUtMS44NTF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+ background-image: linear-gradient(transparent,transparent),
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGRlZnM+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNLS45NTgtNC4yNTljLTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2IDAgLjM5NC4xNDMuNzM2LjMzNiAxLjA0OWwtLjA3LjA1NmMtLjM3My0uNTEzLS45NTQtLjg2Ny0xLjYzNi0uODY3LTEuMTM0IDAtMi4wNTYuOTIyLTIuMDU2IDIuMDU2cy45MjIgMi4wNTYgMi4wNTYgMi4wNTZjLjU5NiAwIDEuMTIxLS4yNjUgMS40OTYtLjY3MS0uMDc1LjIxMy0uMTI2LjQzMy0uMTI2LjY3MSAwIDEuMTM0LjkyMiAyLjA1NiAyLjA1NiAyLjA1NnMyLjA1Ni0uOTIyIDIuMDU2LTIuMDU2YzAtLjQ3Ni0uMTg5LS44OTYtLjQ2Mi0xLjI0NS44MTMuMTU4IDEuNjI3LjQ3NyAyLjIyNCAxLjM5OS0uNDQzLS40NDMtLjcyNy0xLjI0OC0uNzI3LTIuMzM2bC0uMzc4LS4wMjguMzUtLjAxNGMwLTEuMDg3LjI3LTEuODkzLjcxMy0yLjMzNi0uNTc1Ljg4OS0xLjM1NCAxLjIxNi0yLjE0IDEuMzg1LjI0My0uMzM3LjQyLS43MjguNDItMS4xNzUgMC0xLjEzNC0uOTIyLTIuMDU2LTIuMDU2LTIuMDU2eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PG1hcmtlciBvcmllbnQ9ImF1dG8iIG92ZXJmbG93PSJ2aXNpYmxlIj48cGF0aCBkPSJNMC0yLjgyOGwtMi44MjggMi44MjggMi44MjggMi44MjggMi44MjgtMi44MjgtMi44MjgtMi44Mjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSJOYU4iLz48L21hcmtlcj48bWFya2VyIG9yaWVudD0iYXV0byIgb3ZlcmZsb3c9InZpc2libGUiPjxwYXRoIGQ9Ik0xMCAwbDQtNC0xNCA0IDE0IDQtNC00eiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iTmFOIi8+PC9tYXJrZXI+PC9kZWZzPjxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzA2YyIgZD0iTS41IDMuNTE4aDUuOTgydjUuOTgyaC01Ljk4MnoiLz48cGF0aCBkPSJNNC43NTUtLjE2aDUuMjM0djUuMzlsLTEuNTcxIDEuNTQ0LTEuMzEtMS4zMS0yLjcyNSAyLjcyNS0yLjY4OC0yLjY4OCAyLjgwOC0yLjgwOC0xLjMxLTEuMzF6IiBmaWxsPSIjMDZmIi8+PHBhdGggZD0iTTguOTg0Ljg0NWwuMDIyIDQuODg0LTEuODE3LTEuODE3LTIuODgxIDIuODgxLTEuMjI3LTEuMjI3IDIuODgxLTIuODgxLTEuODUtMS44NTF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
background-repeat: no-repeat;
background-position: center right;
padding-right: 13px;
@@ -544,6 +552,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content p {
margin: .5em 0 1em 0;
@@ -558,10 +567,15 @@
}
code,
pre {
- padding: 1em;
font-family: monospace;
border: solid 1px #CCC;
white-space: pre-wrap;
+}
+code {
+ padding: 0.2em 0.5em;
+}
+pre {
+ padding: 1em;
}
sup {
vertical-align: super;
@@ -596,6 +610,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
.content table {
margin: 1em 0;
@@ -654,6 +669,7 @@
* We do not embed the fallback image on the assumption that the gain for old
browsers
* is not worth the harm done to modern ones.
*/
+/* Caution: Does not support localisable images */
/* use -webkit prefix for older android browsers eg. nexus 1 */
/* Hide some on-wiki defined classes */
/* force portals to use a one column layout on mobile */
@@ -763,6 +779,8 @@
a.edit_section_button {
height: 32px;
width: 32px;
+ margin-left: 8px;
+ margin-bottom: 8px;
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAANlBMVEUAAAD///9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW9sbW+FiFraAAAAEXRSTlMAABAgMEBQYHCAkKCwwNDg8InUWv0AAAGfSURBVHhe7djBjsIgFIXhOwjFeltK3/9lJ4J6SG5dHGgyyaRn1dUXlb8slJ+T9//AC7zACxRiLu37EqXsDPCW9ue2cBLo8/7a/RQwFK9OTwDj3k6Hwbk6Mb/EeRDUojyaHzKMgG4pRmy/ehoAXcklT3h+buoGffU8vDJlQJtfuuG5busEY/Xc28N4EPkp7EHwUaODjSkLIr8Iu/VIELkE2Bj9psDzSBuLQoLIxX1sLEfhQHirQ9rwvLAgcoHdejx4b3IJ8PDOcCBysfklJzToipc9Piu2OKFA5LL5o/xUhAZ9Qi7W40Dkspj8as48OGXkYj0ORH73w/yC8OCMXA5y5sE2lwgPh86Bbi3h+i8506Brc3kYjwb9VkL7lh8N+jaXxXg0GBGayW8WCoSXq+dNzjyIXGx+UXhQm1yCyZkHA8JAfvBosF6h21RvU3vb86B+4lCTcxf4rkTV3PZ9IAiTcxcYvnm94P3Qi9IN6rHXDybL5SAD4IHnZQAMxtu8jIA4E+Q8BKr1xkCcybrOcwhOBsE3JOT+4G+WC7zAC7zAXxMIT+qGYJfyAAAAAElFTkSuQmCC);
background-image:
url(//bits.beta.wmflabs.org/static-master/extensions/MobileApp/less/../images/edit.png?2014-09-30T20:38:20Z)!ie;
background-size: 32px 32px;
@@ -787,12 +805,13 @@
}
div.issues_container {
- margin-top: 1em;
- margin-bottom: 2em;
- padding: 2px;
+ margin-top: 0.5em;
+ margin-bottom: 2.5em;
+ padding-top: 1px;
+ padding-bottom: 1px;
width: 100%;
display: block;
- font-size: .95em;
+ font-size: .9em;
letter-spacing: 0.02em;
color: #555555;
}
@@ -805,11 +824,6 @@
text-decoration: none;
color: #555555;
float: left;
-}
-.content-rtl a.issues_button {
- /* Flip it! */
- -webkit-transform: scaleX(-1);
- transform: scaleX(-1);
}
a.issues_button:active {
color: #b0b0b0;
@@ -827,6 +841,59 @@
color: #b0b0b0;
}
+.app_table_container {
+ display: inline;
+ width: 100%;
+}
+.app_table_collapsed_container {
+ width: 100%;
+ margin-top: 10px;
+ padding-left: 12px;
+ padding-right: 48px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ line-height: 100%;
+ border: solid 1px #b0b0b0;
+ background-color: #f0f0f0;
+ background-repeat: no-repeat;
+ background-position: 95% 50%;
+ background-size: 20px 20px;
+}
+.app_table_collapsed_open {
+ border-radius: 2px 2px 2px 2px;
+ margin-bottom: 10px;
+ background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAACg0lEQVRoQ+2YTW4TQRCFx4SfU3AXOABZ+ho+gWVbERIECyLAQBQS/kXAJBEIgdjkFt5zgGSTHRvgPas76im/8UzPjEGILumLx1VdVa+ne6aTZMmSJUuWLFmyZP+zzWazOf1+/+poNHo1HA6/g1NwPBgMrvv43wKarkHLN3BCbdRIrT4+/wGhNxA8A78MPxHb8IP/NOh9mxqMJnJGzRyT4cs6+BEEF8Cs79jiqwYC7ystAdS8zglMA2chKHhPNVoBHfSaKA2Cadbr9S7h4sgEJLwromGbUPwT1VtwRO3zRDeJQzNAwrvDRkHTtqD4HdVTcEDNzDsvMJlMLiLwwQwsYpsNfW5Tut3uBTxnu6KPYkqtPjdXyE3ivUko4ikbh/l1cOKfi/oLYNy7UDzJFSMcwIGqgOBZk0kgfw29ePao2jmwvd7ic83WyH3xcKBLkMUML8FC4TKYA964GmVwnOyx4PAwwSWqgpbCBgq3VfeD/ELcChXWlk4PE7ESr8OCS9i3+1MR85yh94uyLSqdISyAYtwmsokh94awuNf1gckpotLzJZ2WmDcFOPTv6BAnvtKBiV67VV8O0qlgQSzpnmoo+Agu+1xeg08uthT02EFO5TNGOotwK1H1wPk8Ho+vEF6bWBHRB6R0lhBz5H8BX41PghvzmLVNr1KkswIdNN22IuqCG1L79yvprEiHd00JiuSBqF0Z6YyAK/HICIphS9SMQjpjwUo8FOKWgpy7qlYs0lkH7OOyPwHPwdixqlEH6awLxG1ZsYJNlVsX6WwCt4YQPQexWyqnCdLZFG4RIf6mGtsU6WwDiN704jGhlf1vSTrbglsGExipWFskS5YsWbJk/7Bl2W+2PlDIbcw9zQAAAABJRU5ErkJggg==);
+ background-image:
url(//127.0.0.1:8080/w/extensions/MobileApp/less/../images/table_expand.png?2014-11-12T14:38:20Z)!ie;
+}
+.app_table_collapse_close {
+ border-radius: 2px 2px 0px 0px;
+ margin-bottom: 0px;
+}
+.app_table_collapse_icon {
+ background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAACfUlEQVRoQ+2YTW4TQRCFbczPKXIXOABZ+ho+gWVbCAmCBVFggCgJ/4iASSIQArHhFt5zANhkxwZ4D3VH4/Lrme4ZWwjRJX3xuLq66lV3z4yVTrZs2bJly/ZP23w+XxuTyeTGeDyeqLFVIZ2rAMK3wC8yGo2uqZhVIJ1tgeCpF+/BblxXsW2RzjZA6G0r3sMjpea0QTqbApHbVrRgS81tinQ2AcdmR4iV8IipHE2QzlRwNO4poVXwqKlcqUhnAl2IuW/FJbAtciYhnZF0sYoPhKhU7orc0UhnBFz5XSOkMbgnCuY0NaKQzhq6KLinhAg+gk/GJ+FuMrepVYt0huj3++dQ6EAJEHyYTqeXCK/NWIhd1ElqQjoVFI+VfySKKt6Bi34ur8F7N1YJdxdzopuQTotb+SeqoOB4MBhcsDnow9iJiZVwl1nT5lBIZxkmQtJntkiAWVEU51Ue4po4MnNCPI5pQjo9SNLDlr4wiUMcVon3MAaxb8xcCWo/rWtCOgkS9MDLcsIKGNdTeRSuicPS/CA4Ts/xGcwtnZyA7l+VE1XA4xUt3sM5oPUCLTm4Ouj6tUkQIuqchsD8nlthlXsBt6BLTSx8STmfYL+NeA9zxD7huLD2Pju7cOLf2kkBkl84VbgmYl+QC0+6P3/c4+3YBEqwlY1/t9SQ8hPlyL9rkl4wKLBjiq4aNvFQ1RacUDtvpJkZkCDxHVFwHbCJQmkQzNjAJvhRci6B83lLFFor3G2lpQQ1b/rgq/hyWhr0/MTY2v6nUwdq36QGo4mcUjNjzoKHw+GGeyZ/Bd/BFwRd8eN/C2i6DC2fwTdqo0Zq9ePZsmXLli1btmz/r3U6vwGPRVDI7mafNQAAAABJRU5ErkJggg==);
+ background-image:
url(//127.0.0.1:8080/w/extensions/MobileApp/less/../images/table_collapse.png?2014-11-12T14:38:20Z)!ie;
+}
+.app_span_collapse_text {
+ color: #808080;
+}
+.app_table_collapsed_bottom {
+ width: 100%;
+ color: #808080;
+ margin-top: 0px;
+ margin-bottom: 10px;
+ padding-left: 12px;
+ padding-right: 48px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ line-height: 100%;
+ border: solid 1px #b0b0b0;
+ border-radius: 0px 0px 2px 2px;
+ background-color: #f0f0f0;
+ background-repeat: no-repeat;
+ background-position: 95% 50%;
+ background-size: 20px 20px;
+}
+
/* FIXME: Copied over from
http://en.wikipedia.org/w/index.php?title=MediaWiki:Mobile.css&oldid=609508028
This fixes some styling issues in the app, primarily hlists.
Eventually fix this by supporting loading Mobile.css in the app
diff --git a/wikipedia/res/values-qq/strings.xml
b/wikipedia/res/values-qq/strings.xml
index e99401e..54f1e9f 100644
--- a/wikipedia/res/values-qq/strings.xml
+++ b/wikipedia/res/values-qq/strings.xml
@@ -342,7 +342,10 @@
<string name="error_browser_not_found"/>
<string name="app_store_description">Description of the app as put up on the
Google Play Store</string>
<string name="alpha_update_notification_title">Title for notification when
new alpha update is available.
-
+ <string name="table_infobox">Title displayed in a collapsed infobox
table.</string>
+ <string name="table_other">Title displayed in a collapsed table that is not
an infobox.</string>
+ <string name="table_close">Button title shown at the bottom of an expanded
table, to collapse it and scroll back up.</string>
+
Followed by {{msg-wm|Wikipedia-android-strings-alpha update notification
text}}.</string>
<string name="alpha_update_notification_text">Text for notification when new
alpha update is available.
diff --git a/wikipedia/res/values/strings.xml b/wikipedia/res/values/strings.xml
index d298cb0..90667b4 100644
--- a/wikipedia/res/values/strings.xml
+++ b/wikipedia/res/values/strings.xml
@@ -253,6 +253,9 @@
<string name="toc_hint">Swipe left for sections, or use the menu button on
the top right.</string>
<string name="toc_know_it">Got it</string>
<string name="error_browser_not_found">Could not open web page (no browser
app found).</string>
+ <string name="table_infobox">Quick facts</string>
+ <string name="table_other">More information</string>
+ <string name="table_close">Close</string>
<string name="app_store_description">Official Wikipedia App for Android.
Wikipedia is the free encyclopedia containing more than 32 million articles in
280 languages, and is the most comprehensive and widely used reference work
humans have ever compiled. The app has been rewritten from scratch and is
better than ever before.
diff --git
a/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
b/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
index f3d66b0..50a6fbc 100644
--- a/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
+++ b/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
@@ -34,7 +34,6 @@
import org.json.JSONObject;
import android.content.Intent;
import android.content.res.Resources;
-import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.view.ActionMode;
@@ -189,6 +188,9 @@
leadSectionPayload.put("section",
page.getSections().get(0).toJSON());
leadSectionPayload.put("string_page_similar_titles",
getString(R.string.page_similar_titles));
leadSectionPayload.put("string_page_issues",
getString(R.string.button_page_issues));
+ leadSectionPayload.put("string_table_infobox",
getString(R.string.table_infobox));
+ leadSectionPayload.put("string_table_other",
getString(R.string.table_other));
+ leadSectionPayload.put("string_table_close",
getString(R.string.table_close));
leadSectionPayload.put("isBeta", app.getReleaseType() !=
WikipediaApp.RELEASE_PROD);
bridge.sendMessage("displayLeadSection", leadSectionPayload);
diff --git a/www/js/sections.js b/www/js/sections.js
index 0450ee3..57fc1a4 100644
--- a/www/js/sections.js
+++ b/www/js/sections.js
@@ -35,8 +35,14 @@
content.innerHTML = editButton.outerHTML + payload.section.text;
content.id = "content_block_0";
+ window.string_table_infobox = payload.string_table_infobox;
+ window.string_table_other = payload.string_table_other;
+ window.string_table_close = payload.string_table_close;
+
content = transformer.transform( "leadSection", content );
content = transformer.transform( "section", content );
+ content = transformer.transform( "hideTables", content );
+
content = transformer.transform("displayDisambigLink", content);
content = transformer.transform("displayIssuesLink", content);
@@ -93,6 +99,7 @@
content.innerHTML = section.text;
content.id = "content_block_" + section.id;
content = transformer.transform( "section", content );
+ content = transformer.transform( "hideTables", content );
return [ heading, content ];
}
diff --git a/www/js/transforms.js b/www/js/transforms.js
index cc3ac84..e7287ad 100644
--- a/www/js/transforms.js
+++ b/www/js/transforms.js
@@ -53,6 +53,129 @@
return leadContent;
} );
+/*
+Tries to get an array of table header (TH) contents from a given table.
+If there are no TH elements in the table, an empty array is returned.
+*/
+function getTableHeader( element ) {
+ var thArray = [];
+ if (element.children === null) {
+ return thArray;
+ }
+ for (var i = 0; i < element.children.length; i++) {
+ if (element.children[i].tagName === "TH") {
+ if (element.children[i].innerText.length > 0) {
+ thArray.push(element.children[i].innerText);
+ }
+ }
+ //if it's a table within a table, don't worry about it
+ if (element.children[i].tagName === "TABLE") {
+ continue;
+ }
+ //recurse into children of this element
+ var ret = getTableHeader(element.children[i]);
+ //did we get a list of TH from this child?
+ if (ret.length > 0) {
+ thArray = thArray.concat(ret);
+ }
+ }
+ return thArray;
+}
+
+/*
+OnClick handler function for expanding/collapsing tables and infoboxes.
+*/
+function tableCollapseClickHandler() {
+ var container = this.parentNode;
+ var divCollapsed = container.children[0];
+ var tableFull = container.children[1];
+ var divBottom = container.children[2];
+ if (tableFull.style.display !== 'none') {
+ tableFull.style.display = 'none';
+ divCollapsed.classList.remove('app_table_collapse_close');
+ divCollapsed.classList.remove('app_table_collapse_icon');
+ divCollapsed.classList.add('app_table_collapsed_open');
+ divBottom.style.display = 'none';
+ //if they clicked the bottom div, then scroll back up to the top of
the table.
+ if (this === divBottom) {
+ window.scrollTo( 0, container.offsetTop - 48 );
+ }
+ } else {
+ tableFull.style.display = 'block';
+ divCollapsed.classList.remove('app_table_collapsed_open');
+ divCollapsed.classList.add('app_table_collapse_close');
+ divCollapsed.classList.add('app_table_collapse_icon');
+ divBottom.style.display = 'block';
+ }
+}
+
+transformer.register( "hideTables", function( content ) {
+ var tables = content.querySelectorAll( "table" );
+ for (var i = 0; i < tables.length; i++) {
+ //is the table already hidden? if so, don't worry about it
+ if (tables[i].style.display === 'none' ||
tables[i].classList.contains( 'navbox' ) || tables[i].classList.contains(
'vertical-navbox' ) || tables[i].classList.contains( 'navbox-inner' )) {
+ continue;
+ }
+
+ var isInfobox = tables[i].classList.contains( 'infobox' );
+ var headerText = getTableHeader(tables[i]);
+ if (headerText.length === 0 && !isInfobox) {
+ continue;
+ }
+ var caption = "<strong>" + (isInfobox ? window.string_table_infobox :
window.string_table_other) + "</strong>";
+ caption += "<span class='app_span_collapse_text'>";
+ if (headerText.length > 0) {
+ caption += ": " + headerText[0];
+ }
+ if (headerText.length > 1) {
+ caption += ", " + headerText[1];
+ }
+ if (headerText.length > 2) {
+ caption += ", ...";
+ }
+ caption += "</span>";
+
+ //create the container div that will contain both the original table
+ //and the collapsed version.
+ var containerDiv = document.createElement( 'div' );
+ containerDiv.className = 'app_table_container';
+ tables[i].parentNode.insertBefore(containerDiv, tables[i]);
+ tables[i].parentNode.removeChild(tables[i]);
+
+ //remove top and bottom margin from the table, so that it's flush with
+ //our expand/collapse buttons
+ tables[i].style.marginTop = "0px";
+ tables[i].style.marginBottom = "0px";
+
+ //create the collapsed div
+ var collapsedDiv = document.createElement( 'div' );
+ collapsedDiv.classList.add('app_table_collapsed_container');
+ collapsedDiv.classList.add('app_table_collapsed_open');
+ collapsedDiv.innerHTML = caption;
+
+ //create the bottom collapsed div
+ var bottomDiv = document.createElement( 'div' );
+ bottomDiv.classList.add('app_table_collapsed_bottom');
+ bottomDiv.classList.add('app_table_collapse_icon');
+ bottomDiv.innerHTML = window.string_table_close;
+
+ //add our stuff to the container
+ containerDiv.appendChild(collapsedDiv);
+ containerDiv.appendChild(tables[i]);
+ containerDiv.appendChild(bottomDiv);
+
+ //set initial visibility
+ tables[i].style.display = 'none';
+ collapsedDiv.style.display = 'block';
+ bottomDiv.style.display = 'none';
+
+ //assign click handler to the collapsed divs
+ collapsedDiv.onclick = tableCollapseClickHandler;
+ bottomDiv.onclick = tableCollapseClickHandler;
+ }
+ return content;
+} );
+
transformer.register( "section", function( content ) {
if ( window.isNightMode ) {
night.invertElement ( content );
--
To view, visit https://gerrit.wikimedia.org/r/165605
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id0ab8550e1d2bd165a68a29a9551aee1e6d8e748
Gerrit-PatchSet: 16
Gerrit-Project: apps/android/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Dbrant <[email protected]>
Gerrit-Reviewer: BearND <[email protected]>
Gerrit-Reviewer: Brion VIBBER <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
