jenkins-bot has submitted this change and it was merged.
Change subject: Story 394: Show CTA on nearby when no photo
......................................................................
Story 394: Show CTA on nearby when no photo
Default when no page image to show a camera image to
tempt people to upload photos
This completes story 394
Change-Id: I7588246bbdaa90be221d7cb531373eb5b1233bf2
---
M javascripts/specials/nearby.js
A javascripts/tablet/common.js
M less/specials/nearby.less
A stylesheets/specials/images/camera.png
M stylesheets/specials/nearby.css
M templates/articleList.html
6 files changed, 39 insertions(+), 3 deletions(-)
Approvals:
awjrichards: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/specials/nearby.js b/javascripts/specials/nearby.js
index ccb61be..d579516 100644
--- a/javascripts/specials/nearby.js
+++ b/javascripts/specials/nearby.js
@@ -69,8 +69,10 @@
if ( page.coordinates ) { // FIXME: protecting us
against an api bug 47133
if ( page.thumbnail ) {
thumb = page.thumbnail;
- page.pageimage = thumb.source;
+ page.listThumbStyleAttribute =
'background-image: url(' + thumb.source + ')';
page.pageimageClass = thumb.width >
thumb.height ? 'listThumbH' : 'listThumbV';
+ } else {
+ page.pageimageClass = 'needsPhoto';
}
page.url = M.history.getArticleUrl( page.title
);
diff --git a/javascripts/tablet/common.js b/javascripts/tablet/common.js
new file mode 100644
index 0000000..b877f7e
--- /dev/null
+++ b/javascripts/tablet/common.js
@@ -0,0 +1,20 @@
+( function( M, $ ) {
+
+var api = M.require( 'api' );
+
+// load page image for this article
+api.get( {
+ titles: mw.config.get( 'wgTitle' ),
+ prop: 'pageimages',
+ action: 'query',
+ pithumbsize: 400
+} ).done( function( resp ) {
+ var pages = $.map( resp.query.pages, function( p ) {
+ return p;
+ } );
+ $( '#cover-photo' ).css( {
+ 'background-image': 'url(' + pages[0].thumbnail.source + ')'
+ } );
+} );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/specials/nearby.less b/less/specials/nearby.less
index 0244deb..585aa30 100644
--- a/less/specials/nearby.less
+++ b/less/specials/nearby.less
@@ -1,7 +1,12 @@
-@import "../mf-variables.less";
+@import "../mf-mixins.less";
ul.a-to-z {
li {
+ .listThumb.needsPhoto {
+ background-image: url(images/camera.png);
+ .background-size( 50%, auto );
+ }
+
.proximity {
position: absolute;
right: @searchBarPaddingRight;
diff --git a/stylesheets/specials/images/camera.png
b/stylesheets/specials/images/camera.png
new file mode 100644
index 0000000..5903a17
--- /dev/null
+++ b/stylesheets/specials/images/camera.png
Binary files differ
diff --git a/stylesheets/specials/nearby.css b/stylesheets/specials/nearby.css
index 9a0e9be..20c494c 100644
--- a/stylesheets/specials/nearby.css
+++ b/stylesheets/specials/nearby.css
@@ -1,3 +1,12 @@
+ul.a-to-z li .listThumb.needsPhoto {
+ background-image: url(images/camera.png);
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: 50% auto;
+ -o-background-size: 50% auto;
+ -webkit-background-size: 50% auto;
+ background-size: 50% auto;
+}
ul.a-to-z li .proximity {
position: absolute;
right: 40px;
diff --git a/templates/articleList.html b/templates/articleList.html
index 55eaf05..57e4d9d 100644
--- a/templates/articleList.html
+++ b/templates/articleList.html
@@ -2,7 +2,7 @@
{{#pages}}
<li title="{{title}}">
<a href="{{url}}" class="title">
- <div class="listThumb {{pageimageClass}}"
style="background-image: url({{pageimage}})"></div>
+ <div class="listThumb {{pageimageClass}}"
style="{{listThumbStyleAttribute}}"></div>
<h2>{{title}}</h2>
<div class="mw-mf-time">{{modified}}</div>
<span class="proximity">{{proximity}}</span>
--
To view, visit https://gerrit.wikimedia.org/r/59175
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7588246bbdaa90be221d7cb531373eb5b1233bf2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: awjrichards <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
