jenkins-bot has submitted this change and it was merged.
Change subject: Hygiene: Cleanup the html for the cleanup templates
......................................................................
Hygiene: Cleanup the html for the cleanup templates
oooh the irony
We never got any style guidance for cleanup templates in the overlay
itself so why not just list them with cleaner html and the icon and
the text
This also means we can kill the IE stylesheet which only exists for
this purpose
Change-Id: Ibb7420c53e2eded59e72fe6b55482abb5c6ad983
---
M includes/DeviceDetection.php
M javascripts/modules/mf-cleanuptemplates.js
M less/common/mf-enwp.less
M less/common/overlays.less
M less/mf-mixins.less
M less/modules/mf-cleanuptemplates.less
M stylesheets/common/mf-enwp.css
M stylesheets/common/overlays.css
D stylesheets/devices/ie.css
M stylesheets/modules/mf-cleanuptemplates.css
M templates/articleList.html
M templates/overlays/cleanup.html
M templates/overlays/languages.html
M templates/overlays/talk.html
M tests/DeviceDetectionTest.php
15 files changed, 77 insertions(+), 115 deletions(-)
Approvals:
JGonera: Looks good to me, but someone else must approve
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/DeviceDetection.php b/includes/DeviceDetection.php
index f1adc84..04efcf7 100644
--- a/includes/DeviceDetection.php
+++ b/includes/DeviceDetection.php
@@ -215,7 +215,6 @@
),
'ie' => array (
'view_format' => 'html',
- 'css_file_name' => 'ie',
),
'iphone' => array (
'view_format' => 'html',
diff --git a/javascripts/modules/mf-cleanuptemplates.js
b/javascripts/modules/mf-cleanuptemplates.js
index b233caf..5835e75 100644
--- a/javascripts/modules/mf-cleanuptemplates.js
+++ b/javascripts/modules/mf-cleanuptemplates.js
@@ -2,27 +2,36 @@
var module = (function() {
var
+ issues = [],
Overlay = M.require( 'Overlay' ),
CleanupOverlay = Overlay.extend( {
+ defaults: $.extend( Overlay.prototype.defaults, {
+ heading: mw.msg(
'mobile-frontend-meta-data-issues-header' )
+ } ),
template: M.template.get( 'overlays/cleanup' )
} );
function run( $container, parentOverlay ) {
$container = $container || $( '#content_0' );
var $metadata = $container.find( 'table.ambox' ),
- overlay,
- $tmp = $( '<div>' );
+ overlay;
+ // clean it up a little
+ $metadata.find( '.NavFrame' ).remove();
$metadata.each( function() {
+ var $this = $( this );
+
if ( $( this ).find( 'table.ambox' ).length === 0 ) {
- $tmp.append( $( this ).clone() );
+ issues.push( {
+ icon: $this.find( '.mbox-image img'
).attr( 'src' ),
+ text: $this.find( '.mbox-text' ).html()
+ } );
}
} );
overlay = new CleanupOverlay( {
parent: parentOverlay,
- heading: mw.msg(
'mobile-frontend-meta-data-issues-header' ),
- content: $tmp.html()
+ issues: issues
} );
$( '<a class="mw-mf-cleanup">' ).click( function() {
diff --git a/less/common/mf-enwp.less b/less/common/mf-enwp.less
index 722710d..5fa11d2 100644
--- a/less/common/mf-enwp.less
+++ b/less/common/mf-enwp.less
@@ -6,6 +6,11 @@
*/
@import "../mf-variables.less";
+// Hide cleanup templates by default to non-javascript users as these stop
them from reading the article itself
+#content table.ambox {
+ display: none;
+}
+
code,
pre {
font-family: monospace;
diff --git a/less/common/overlays.less b/less/common/overlays.less
index 5e8d5bf..f6d9fc8 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -1,5 +1,6 @@
@import "../mf-mixins.less";
+// FIXME: this looks suspicious (overlay class is added to <html>)
.overlay ul {
text-align: left;
left: 0;
@@ -8,7 +9,6 @@
position: relative;
opacity: 1;
padding: 0;
- cursor: pointer;
margin: 0;
list-style: none;
@@ -144,17 +144,45 @@
}
}
+.mw-mf-overlay {
+ ul.actionable {
+ cursor: pointer;
+
+ li {
+ &:hover {
+ background-color: #ACD1E9;
+ }
+ }
+ }
+}
.mw-mf-overlay > ul {
padding: 0;
position: relative;
padding-bottom: 20px;
- cursor: pointer;
margin: 0;
background-color: white;
list-style: none;
li {
- .overlayListItem();
+ color: #666;
+ border: none;
+ position: relative;
+ border-bottom: solid 1px #999999;
+ border-bottom: solid 1px #eee;
+ padding: @searchResultPaddingVertical @searchBarPaddingLeft;
+ font-size: 0.9em;
+ > a {
+ display: block;
+ text-decoration: none;
+ color: #666;
+
+ &:active,
+ &:hover,
+ &:visited {
+ text-decoration: none;
+ color: #666;
+ }
+ }
}
}
diff --git a/less/mf-mixins.less b/less/mf-mixins.less
index e496a8f..25f749d 100644
--- a/less/mf-mixins.less
+++ b/less/mf-mixins.less
@@ -39,32 +39,6 @@
background-size: @width @height;
}
-.overlayListItem() {
- color: #666;
- border: none;
- position: relative;
- border-bottom: solid 1px #999999;
- border-bottom: solid 1px #eee;
- padding: @searchResultPaddingVertical @searchBarPaddingLeft;
- font-size: 0.9em;
- a {
- display: block;
- text-decoration: none;
- color: #666;
-
- &:active,
- &:hover,
- &:visited {
- text-decoration: none;
- color: #666;
- }
- }
-
- &:hover {
- background-color: #ACD1E9;
- }
-}
-
.text-with-shadow( @color:white ){
color: @color;
text-shadow: 0 -1px 0 fade( black, 25% );
diff --git a/less/modules/mf-cleanuptemplates.less
b/less/modules/mf-cleanuptemplates.less
index 4ec2a67..9c97d61 100644
--- a/less/modules/mf-cleanuptemplates.less
+++ b/less/modules/mf-cleanuptemplates.less
@@ -17,33 +17,8 @@
}
}
-/* styling for warning boxes (see bug 36674)*/
-td.mbox-image div {
- width: 100% !important;
-}
-
-.mbox-text div {
- text-align: center !important;
-}
-
-th.mbox-text,
-td.mbox-text,
-td.mbox-image {
+ul.cleanup img {
display: block;
- width: 100%;
- .box-sizing( border-box );
- text-align: center !important;
+ margin: 0 auto 1em auto;
}
-td.mbox-image div,
-th.mbox-text,
-td.mbox-text,
-td.mbox-image,
-table.ambox-content {
- .box-sizing( border-box );
-}
-
-table.ambox-content {
- border-left: 1px solid #AAA;
- border-bottom: 10px solid #F28500;
-}
diff --git a/stylesheets/common/mf-enwp.css b/stylesheets/common/mf-enwp.css
index e9de6b1..708d9f4 100644
--- a/stylesheets/common/mf-enwp.css
+++ b/stylesheets/common/mf-enwp.css
@@ -4,6 +4,9 @@
IMPORTANT: do not use selectors containing attribute notation e.g. [style]
[colspan]
as they are known to damage the ios app
*/
+#content table.ambox {
+ display: none;
+}
code,
pre {
font-family: monospace;
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index a68662f..684c9b5 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -6,7 +6,6 @@
position: relative;
opacity: 1;
padding: 0;
- cursor: pointer;
margin: 0;
list-style: none;
}
@@ -111,11 +110,16 @@
.mw-mf-overlay.list-overlay .mw-mf-overlay-header {
padding-left: 40px;
}
+.mw-mf-overlay ul.actionable {
+ cursor: pointer;
+}
+.mw-mf-overlay ul.actionable li:hover {
+ background-color: #ACD1E9;
+}
.mw-mf-overlay > ul {
padding: 0;
position: relative;
padding-bottom: 20px;
- cursor: pointer;
margin: 0;
background-color: white;
list-style: none;
@@ -129,17 +133,14 @@
padding: 12px 40px;
font-size: 0.9em;
}
-.mw-mf-overlay > ul li a {
+.mw-mf-overlay > ul li > a {
display: block;
text-decoration: none;
color: #666;
}
-.mw-mf-overlay > ul li a:active,
-.mw-mf-overlay > ul li a:hover,
-.mw-mf-overlay > ul li a:visited {
+.mw-mf-overlay > ul li > a:active,
+.mw-mf-overlay > ul li > a:hover,
+.mw-mf-overlay > ul li > a:visited {
text-decoration: none;
color: #666;
-}
-.mw-mf-overlay > ul li:hover {
- background-color: #ACD1E9;
}
diff --git a/stylesheets/devices/ie.css b/stylesheets/devices/ie.css
deleted file mode 100644
index a8ef09b..0000000
--- a/stylesheets/devices/ie.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* TD cannot be turned into display block on Windows Phone 7.5
-This hack hides the TD with the icon in it so that the more important
-text is readable */
-.mbox-image {
- display: none !important;
-}
diff --git a/stylesheets/modules/mf-cleanuptemplates.css
b/stylesheets/modules/mf-cleanuptemplates.css
index c02f4a1..801ee16 100644
--- a/stylesheets/modules/mf-cleanuptemplates.css
+++ b/stylesheets/modules/mf-cleanuptemplates.css
@@ -18,35 +18,7 @@
color: #565656;
background-color: #f0f0f0;
}
-/* styling for warning boxes (see bug 36674)*/
-td.mbox-image div {
- width: 100% !important;
-}
-.mbox-text div {
- text-align: center !important;
-}
-th.mbox-text,
-td.mbox-text,
-td.mbox-image {
+ul.cleanup img {
display: block;
- width: 100%;
- -moz-box-sizing: border-box;
- -o-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- text-align: center !important;
-}
-td.mbox-image div,
-th.mbox-text,
-td.mbox-text,
-td.mbox-image,
-table.ambox-content {
- -moz-box-sizing: border-box;
- -o-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-table.ambox-content {
- border-left: 1px solid #AAA;
- border-bottom: 10px solid #F28500;
+ margin: 0 auto 1em auto;
}
diff --git a/templates/articleList.html b/templates/articleList.html
index 28608aa..9235fea 100644
--- a/templates/articleList.html
+++ b/templates/articleList.html
@@ -9,7 +9,7 @@
{{#loadingMessage}}
<div class="content loading">{{loadingMessage}}</div>
{{/loadingMessage}}
-<ul class="page-list a-to-z">
+<ul class="page-list a-to-z actionable">
{{#pages}}
<li title="{{title}}">
<a href="{{url}}" class="title" name="{{anchor}}"
data-latlng="{{latitude}},{{longitude}}" data-title="{{title}}">
diff --git a/templates/overlays/cleanup.html b/templates/overlays/cleanup.html
index a1a2e27..8d35790 100644
--- a/templates/overlays/cleanup.html
+++ b/templates/overlays/cleanup.html
@@ -2,6 +2,8 @@
<button class="cancel">{{closeMsg}}</button>
<h2>{{heading}}</h2>
</div>
-<div class="content">
- {{{content}}}
-</div>
+<ul class="cleanup">
+ {{#issues}}
+ <li><img src="{{icon}}"> {{{text}}}</li>
+ {{/issues}}
+</ul>
diff --git a/templates/overlays/languages.html
b/templates/overlays/languages.html
index 27b3043..221c76a 100644
--- a/templates/overlays/languages.html
+++ b/templates/overlays/languages.html
@@ -6,7 +6,7 @@
</div>
{{#variants}}
<p class="mw-mf-overlay-header">{{{variantHeader}}}</p>
-<ul>
+<ul class="actionable">
{{#variants}}
<li>
<a href="{{url}}" hreflang="{{lang}}"
lang="{{lang}}"><span>{{langName}}</span>{{#pageName}}
({{pageName}}){{/pageName}}</a>
@@ -15,7 +15,7 @@
</ul>
{{/variants}}
<p class="mw-mf-overlay-header">{{{header}}}</p>
-<ul>
+<ul class="actionable">
{{#languages}}
<li {{#preferred}}class="preferred"{{/preferred}}>
<a href="{{url}}" hreflang="{{lang}}"
lang="{{lang}}"><span>{{langName}}</span>{{#pageName}}
({{pageName}}){{/pageName}}</a>
diff --git a/templates/overlays/talk.html b/templates/overlays/talk.html
index 430cfab..5bce514 100644
--- a/templates/overlays/talk.html
+++ b/templates/overlays/talk.html
@@ -4,7 +4,7 @@
<button class="add">+</button>
</div>
<p class="mw-mf-overlay-header">{{explanation}}</p>
-<ul>
+<ul class="actionable">
<li class="lead-discussion">
<a data-id="0">{{leadHeading}}</a>
</li>
diff --git a/tests/DeviceDetectionTest.php b/tests/DeviceDetectionTest.php
index 1869657..ed83555 100644
--- a/tests/DeviceDetectionTest.php
+++ b/tests/DeviceDetectionTest.php
@@ -85,7 +85,7 @@
array( 'android', '' ),
array( 'palm_pre', '' ),
array( 'generic', '' ),
- array( 'ie', 'mobile.device.ie' ),
+ array( 'ie', '' ),
array( 'iphone', 'mobile.device.iphone' ),
array( 'kindle', 'mobile.device.kindle' ),
array( 'blackberry', 'mobile.device.blackberry' ),
--
To view, visit https://gerrit.wikimedia.org/r/72122
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ibb7420c53e2eded59e72fe6b55482abb5c6ad983
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
