Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/64373
Change subject: Tweak the nearby preview
......................................................................
Tweak the nearby preview
* Move heading out of header
* Make the preview only show first paragraph and show the page image
* Make the listThumb class more generic so it can be used in
the preview
* Update retrievePage to allow access to lead section only
Change-Id: I372d76d54b48f50c2aeb614bc34c0ed1e9f8a033
---
M javascripts/common/history-beta.js
M javascripts/specials/overlays/preview.js
M less/specials/nearby.less
M less/specials/watchlist.less
M stylesheets/specials/nearby.css
M stylesheets/specials/watchlist.css
M templates/overlays/pagePreview.html
7 files changed, 81 insertions(+), 53 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/73/64373/1
diff --git a/javascripts/common/history-beta.js
b/javascripts/common/history-beta.js
index c0b7f52..6e0d264 100644
--- a/javascripts/common/history-beta.js
+++ b/javascripts/common/history-beta.js
@@ -2,7 +2,7 @@
var api = M.require( 'api' ),
cache = {};
- function retrievePage( pageTitle, endpoint ) {
+ function retrievePage( pageTitle, endpoint, leadOnly ) {
var cachedPage = cache[ pageTitle ],
options = endpoint ? { url: endpoint, dataType: 'jsonp'
} : {};
@@ -16,7 +16,7 @@
variant: mw.config.get( 'wgPreferredVariant' ),
redirects: 'yes', prop: 'sections|text',
noheadings: 'yes',
noimages: mw.config.get( 'wgImagesDisabled',
false ) ? 1 : undefined,
- sectionprop: 'level|line|anchor', sections:
'all'
+ sectionprop: 'level|line|anchor', sections:
leadOnly ? 0 : 'all'
}, options ).then( function( r ) {
if ( r.error || !r.mobileview.sections ) {
cachedPage.reject( r );
diff --git a/javascripts/specials/overlays/preview.js
b/javascripts/specials/overlays/preview.js
index cdfef08..1141cd0 100644
--- a/javascripts/specials/overlays/preview.js
+++ b/javascripts/specials/overlays/preview.js
@@ -11,13 +11,23 @@
template: M.template.get( 'overlays/pagePreview' ),
preRender: function( options ) {
options.heading = options.page.title;
- options.content = options.page.lead;
+ options.preview = options.page.lead;
options.url = M.history.getArticleUrl(
options.heading );
options.readMoreLink = mw.msg(
'mobile-frontend-nearby-link' );
},
initialize: function( options ) {
+ var $preview, nodes;
this._super( options );
- this.$( '.content table' ).remove();
+ $preview = this.$( '.preview' );
+ $preview.find( ' table,.dablink,.thumb'
).remove();
+ // FIXME: IMO meta data should remain hidden
from output
+ nodes = $preview.find( 'p,div' ).map( function(
i, el ) {
+ if ( $( el ).find( '#coordinates'
).length === 0 ) {
+ return el;
+ }
+ } );
+ $preview.empty();
+ $preview.append( nodes[0] );
}
} ),
module = M.require( 'nearby' ),
@@ -27,11 +37,12 @@
nearby.on( 'page-click', function( ev ) {
ev.preventDefault();
var loader = new LoadingOverlay(),
- title = $( ev.currentTarget ).find( 'h2' ).text();
+ $a = $( ev.currentTarget ),
+ title = $a.find( 'h2' ).text();
loader.show();
- M.history.retrievePage( title, endpoint ).done( function( page
) {
- var preview = new PagePreviewOverlay( { page: new Page(
page ) } );
+ M.history.retrievePage( title, endpoint, true ).done( function(
page ) {
+ var preview = new PagePreviewOverlay( { page: new Page(
page ), img: $( '<div>' ).append( $a.find( '.listThumb' ) ).html() } );
loader.hide();
preview.show();
} ).fail( function() {
diff --git a/less/specials/nearby.less b/less/specials/nearby.less
index fa80342..8ea225b 100644
--- a/less/specials/nearby.less
+++ b/less/specials/nearby.less
@@ -59,3 +59,10 @@
display: none;
}
}
+
+.mw-mf-overlay .content .listThumb {
+ width: 100px;
+ height: 100px;
+ float: left;
+ margin-right: 20px;
+}
diff --git a/less/specials/watchlist.less b/less/specials/watchlist.less
index 50649ec..e4a85c5 100644
--- a/less/specials/watchlist.less
+++ b/less/specials/watchlist.less
@@ -29,6 +29,23 @@
@thumbSpace: @thumbWidth + 15px;
@ragWidth: 8px;
+.listThumb {
+ background-repeat: no-repeat;
+ background-position: center center;
+ &.needsPhoto {
+ background-image: url(images/camera.png);
+ .background-size( 50%, auto );
+ }
+}
+
+.listThumbH {
+ .background-size(auto, 100%);
+}
+
+.listThumbV {
+ .background-size(100%, auto);
+}
+
ul.mw-mf-watchlist-results {
list-style: none;
@@ -40,19 +57,9 @@
.listThumb {
position: absolute;
- background-repeat: no-repeat;
- background-position: center center;
width: @thumbWidth;
height: 100%;
margin: 0 0 0 -@thumbSpace;
- }
-
- .listThumbH {
- .background-size(auto, 100%);
- }
-
- .listThumbV {
- .background-size(100%, auto);
}
a.title {
@@ -108,11 +115,6 @@
li {
a.title {
padding-left: (@thumbSpace - @ragWidth);
- }
-
- .listThumb.needsPhoto {
- background-image: url(images/camera.png);
- .background-size( 50%, auto );
}
}
}
diff --git a/stylesheets/specials/nearby.css b/stylesheets/specials/nearby.css
index fad9c7c..6ad7100 100644
--- a/stylesheets/specials/nearby.css
+++ b/stylesheets/specials/nearby.css
@@ -45,3 +45,9 @@
.client-js .noscript {
display: none;
}
+.mw-mf-overlay .content .listThumb {
+ width: 100px;
+ height: 100px;
+ float: left;
+ margin-right: 20px;
+}
diff --git a/stylesheets/specials/watchlist.css
b/stylesheets/specials/watchlist.css
index b477629..abeb8c9 100644
--- a/stylesheets/specials/watchlist.css
+++ b/stylesheets/specials/watchlist.css
@@ -19,6 +19,35 @@
margin: 0 1px 0 0;
border-bottom: 3px solid transparent;
}
+.listThumb {
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+.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;
+}
+.listThumbH {
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: auto 100%;
+ -o-background-size: auto 100%;
+ -webkit-background-size: auto 100%;
+ background-size: auto 100%;
+}
+.listThumbV {
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: 100% auto;
+ -o-background-size: 100% auto;
+ -webkit-background-size: 100% auto;
+ background-size: 100% auto;
+}
ul.mw-mf-watchlist-results {
list-style: none;
}
@@ -30,27 +59,9 @@
}
ul.mw-mf-watchlist-results li .listThumb {
position: absolute;
- background-repeat: no-repeat;
- background-position: center center;
width: 70px;
height: 100%;
margin: 0 0 0 -85px;
-}
-ul.mw-mf-watchlist-results li .listThumbH {
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: auto 100%;
- -o-background-size: auto 100%;
- -webkit-background-size: auto 100%;
- background-size: auto 100%;
-}
-ul.mw-mf-watchlist-results li .listThumbV {
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: 100% auto;
- -o-background-size: 100% auto;
- -webkit-background-size: 100% auto;
- background-size: 100% auto;
}
ul.mw-mf-watchlist-results li a.title {
display: block;
@@ -99,15 +110,6 @@
}
ul.a-to-z li a.title {
padding-left: 77px;
-}
-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;
}
.mw-mf-user {
padding: 1px 0 0 20px;
diff --git a/templates/overlays/pagePreview.html
b/templates/overlays/pagePreview.html
index 1a9c073..602c4ee 100644
--- a/templates/overlays/pagePreview.html
+++ b/templates/overlays/pagePreview.html
@@ -1,12 +1,12 @@
<div class="header">
<button class="cancel escapeOverlay">{{closeMsg}}</button>
- <div class="search-box">
- <h2>{{heading}}</h2>
- </div>
</div>
<p class="message">
<a href="{{url}}">{{readMoreLink}}</a>
</p>
<div class="content">
- {{{content}}}
+ {{{img}}}
+ <h2>{{heading}}</h2>
+ <div class="preview">{{{preview}}}</div>
+ <a href="{{url}}">{{readMoreLink}}</a>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/64373
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I372d76d54b48f50c2aeb614bc34c0ed1e9f8a033
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
