jenkins-bot has submitted this change and it was merged.
Change subject: Make pointer arrow responsive
......................................................................
Make pointer arrow responsive
Bug: 60357
Change-Id: I663247dc6d1e268b0c015338f56761392f66faaa
---
M javascripts/common/application.js
M javascripts/modules/tutorials/ContentOverlay.js
M less/modules/tutorials.less
M less/tablet/common.less
M templates/modules/tutorials/PageActionOverlay.html
5 files changed, 64 insertions(+), 22 deletions(-)
Approvals:
Awjrichards: Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/common/application.js
b/javascripts/common/application.js
index 9360e1e..8808ffa 100644
--- a/javascripts/common/application.js
+++ b/javascripts/common/application.js
@@ -10,6 +10,7 @@
router = new Router(),
$viewportMeta, viewport,
currentPage,
+ inWideScreenMode = false,
ua = window.navigator.userAgent,
isAppleDevice = /ipad|iphone/i.test( ua ),
isIPhone4 = isAppleDevice && /OS 4_/.test( ua ),
@@ -110,12 +111,16 @@
*/
function loadWideScreenModules() {
var modules = [ 'tablet.styles' ];
- if ( isWideScreen() && $( 'body' ).hasClass( 'skin-minerva' )
&& M.isBetaGroupMember() ) {
+ if ( !inWideScreenMode && isWideScreen() &&
+ $( 'body' ).hasClass( 'skin-minerva' ) &&
M.isBetaGroupMember() ) {
// Adjust screen for tablets
if ( inNamespace( '' ) ) {
modules.push( 'tablet.scripts' );
}
- mw.loader.using( modules );
+ inWideScreenMode = true;
+ mw.loader.using( modules, function() {
+ M.emit( 'resize' );
+ } );
}
}
@@ -243,7 +248,8 @@
$doc.addClass( 'touch-events' );
}
$( loadWideScreenModules );
- $( window ).on( 'resize', loadWideScreenModules );
+ $( window ).on( 'resize', $.proxy( M, 'emit', 'resize' ) );
+ M.on( 'resize', loadWideScreenModules );
loadCurrentPage();
}
diff --git a/javascripts/modules/tutorials/ContentOverlay.js
b/javascripts/modules/tutorials/ContentOverlay.js
index ba52c4c..81a148c 100644
--- a/javascripts/modules/tutorials/ContentOverlay.js
+++ b/javascripts/modules/tutorials/ContentOverlay.js
@@ -9,6 +9,7 @@
* @extends Overlay
*/
ContentOverlay = Overlay.extend( {
+ className: 'content-overlay',
/**
* @name ContentOverlay.prototype.fullScreen
* @type Boolean
@@ -25,10 +26,37 @@
*/
appendTo: '#mw-mf-page-center',
postRender: function( options ) {
+ var self = this, $target;
this._super( options );
if ( options.target ) {
- this.addPointerArrow( $( options.target ) );
+ $target = $( options.target );
+ // Ensure we position the overlay correctly but
do not show the arrow
+ self._position( $target );
+ // Ensure that any reflows due to tablet styles
have happened before showing
+ // the arrow.
+ setTimeout( function() {
+ self.addPointerArrow( $target );
+ M.on( 'resize', $.proxy( self,
'refreshPointerArrow', options.target ) );
+ }, 0 );
}
+ },
+ /**
+ * Refreshes the pointer arrow.
+ * @name ContentOverlay.prototype.refreshPointerArrow
+ * @function
+ */
+ refreshPointerArrow: function( target ) {
+ this.$pointer.remove();
+ this.addPointerArrow( $( target ) );
+ },
+ /**
+ * @param {jQuery.Object} $pa An element that should be pointed
at by the overlay
+ */
+ _position: function( $pa ) {
+ var paOffset = $pa.offset(),
+ h = $pa.outerHeight( true );
+
+ this.$el.css( 'top', paOffset.top + h );
},
/**
* @name ContentOverlay.prototype.addPointerArrow
@@ -38,16 +66,17 @@
addPointerArrow: function( $pa ) {
var tb = 'solid 10px transparent',
paOffset = $pa.offset(),
- h = $pa.outerHeight( true );
+ overlayOffset = this.$el.offset();
- this.$el.css( 'top', paOffset.top + h );
- $( '<div>' ).css( {
+ this._position( $pa );
+ this.$pointer = $( '<div>' ).css( {
'border-bottom': 'solid 10px #006398',
'border-right': tb,
'border-left': tb,
position: 'absolute',
top: -10,
- left: paOffset.left + 10
+ // remove the left offset of the overlay as
margin auto may be applied to it
+ left: paOffset.left + 10 - overlayOffset.left
} ).appendTo( this.$el );
}
} );
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 940e645..7da2039 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -3,9 +3,14 @@
/* Tutorial overlay styling */
-.tutorial,
-// Use two selectors to ensure this is more specific then .mw-mf-overlay in
cases of load order differences
-.mw-mf-overlay.tutorial {
+// For upload tutorial
+.mw-mf-overlay.tutorial,
+// For page action overlay
+.content-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
padding: 1em @contentMargin;
line-height: 1.4;
font-size: .9em;
diff --git a/less/tablet/common.less b/less/tablet/common.less
index 43d8141..70fbbf5 100644
--- a/less/tablet/common.less
+++ b/less/tablet/common.less
@@ -25,9 +25,6 @@
.pre-content {
position: relative;
padding: 20px @contentPaddingTablet 0
@contentPaddingTablet;
- max-width: @contentMaxWidth;
- margin-left: auto;
- margin-right: auto;
border: none;
h1#section_0 {
@@ -48,11 +45,18 @@
}
}
}
- .content {
+
+ // FIXME: Have a class that identifies all 4 of these
+ .drawer,
+ .pre-content,
+ .content,
+ .content-overlay {
max-width: @contentMaxWidth;
margin: 0 auto;
- padding: 1.6em @contentPaddingTablet 0
@contentPaddingTablet;
+ }
+ .content {
+ padding: 1.6em @contentPaddingTablet 0
@contentPaddingTablet;
// Classes added by thumbnails
// e.g. [[File:Scholars mate
animation.gif|frame|left|"[[Scholar's mate]]"]]
.thumb {
diff --git a/templates/modules/tutorials/PageActionOverlay.html
b/templates/modules/tutorials/PageActionOverlay.html
index 6773155..1bd72e1 100644
--- a/templates/modules/tutorials/PageActionOverlay.html
+++ b/templates/modules/tutorials/PageActionOverlay.html
@@ -1,7 +1,5 @@
-<div class="tutorial">
- <p>{{summary}}</p>
- <div class="button-bar-centered">
- <button class="button cancel inline">{{cancelMsg}}</button>
- <button class="button actionable">{{confirmMsg}}</button>
- </div>
+<p>{{summary}}</p>
+<div class="button-bar-centered">
+ <button class="button cancel inline">{{cancelMsg}}</button>
+ <button class="button actionable">{{confirmMsg}}</button>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/110648
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I663247dc6d1e268b0c015338f56761392f66faaa
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Awjrichards <[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
