Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/110648
Change subject: Make pointer arrow responsive
......................................................................
Make pointer arrow responsive
Bug: 60357
Change-Id: I663247dc6d1e268b0c015338f56761392f66faaa
---
M javascripts/common/application.js
A javascripts/common/matchMedia.js
M javascripts/modules/tutorials/ContentOverlay.js
M less/modules/tutorials.less
M less/tablet/common.less
M templates/modules/tutorials/PageActionOverlay.html
6 files changed, 52 insertions(+), 18 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/48/110648/1
diff --git a/javascripts/common/application.js
b/javascripts/common/application.js
index 9360e1e..19519f7 100644
--- a/javascripts/common/application.js
+++ b/javascripts/common/application.js
@@ -115,7 +115,9 @@
if ( inNamespace( '' ) ) {
modules.push( 'tablet.scripts' );
}
- mw.loader.using( modules );
+ mw.loader.using( modules, function() {
+ M.emit( 'tablet-mode-loaded' );
+ } );
}
}
@@ -243,7 +245,10 @@
$doc.addClass( 'touch-events' );
}
$( loadWideScreenModules );
- $( window ).on( 'resize', loadWideScreenModules );
+ $( window ).on( 'resize', function() {
+ M.emit( 'resize' );
+ } );
+ M.on( 'resize', loadWideScreenModules );
loadCurrentPage();
}
diff --git a/javascripts/common/matchMedia.js b/javascripts/common/matchMedia.js
new file mode 100644
index 0000000..87077e2
--- /dev/null
+++ b/javascripts/common/matchMedia.js
@@ -0,0 +1,11 @@
+( function( $ ) {
+ mw.matchMedia = function() {
+ if ( window.matchMedia ) {
+ $( 'link[data-media]' ).each( function() {
+ if ( window.matchMedia( $( this ).data( 'media'
) ).matches ) {
+ $( this ).attr( 'href', $( this ).data(
'href' ) );
+ }
+ } );
+ }
+ };
+} ( jQuery ) );
diff --git a/javascripts/modules/tutorials/ContentOverlay.js
b/javascripts/modules/tutorials/ContentOverlay.js
index ba52c4c..af20a93 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,18 @@
*/
appendTo: '#mw-mf-page-center',
postRender: function( options ) {
+ var self = this;
this._super( options );
if ( options.target ) {
this.addPointerArrow( $( options.target ) );
}
+ // Update the arrows position when the window size
changes
+ function redraw() {
+ self.$pointer.remove();
+ self.addPointerArrow( $( options.target ) );
+ }
+ M.on( 'resize', redraw );
+ M.on( 'tablet-mode-loaded', redraw );
},
/**
* @name ContentOverlay.prototype.addPointerArrow
@@ -38,16 +47,18 @@
addPointerArrow: function( $pa ) {
var tb = 'solid 10px transparent',
paOffset = $pa.offset(),
+ overlayOffset = this.$el.offset(),
h = $pa.outerHeight( true );
this.$el.css( 'top', paOffset.top + h );
- $( '<div>' ).css( {
+ 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: newchange
Gerrit-Change-Id: I663247dc6d1e268b0c015338f56761392f66faaa
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
