JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/82556
Change subject: Story 1096: Beta section editing tutorial a/b test
......................................................................
Story 1096: Beta section editing tutorial a/b test
Make ContentOverlay not a full screen overlay so that it can be placed
anywhere in the page. Consulted with designers.
Change-Id: Ief06fa2bbafa709bc7ae0eec40de8f8eff01757a
---
M javascripts/common/ContentOverlay.js
M javascripts/common/Overlay.js
M javascripts/modules/editor/editor.js
M javascripts/modules/mf-toggle.js
M javascripts/modules/tutorials/newbie.js
M less/common/overlays.less
M less/common/pageactions.less
M less/modules/tutorials.less
M stylesheets/common/overlays.css
M stylesheets/common/pageactions.css
M stylesheets/modules/tutorials.css
11 files changed, 75 insertions(+), 49 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/56/82556/1
diff --git a/javascripts/common/ContentOverlay.js
b/javascripts/common/ContentOverlay.js
index 83f8d04..2f5b2e2 100644
--- a/javascripts/common/ContentOverlay.js
+++ b/javascripts/common/ContentOverlay.js
@@ -3,6 +3,7 @@
var Overlay = M.require( 'Overlay' ), ContentOverlay;
ContentOverlay = Overlay.extend( {
+ fullScreen: false,
appendTo: '#mw-mf-page-center',
postRender: function( options ) {
this._super( options );
@@ -13,9 +14,9 @@
addPointerArrow: function( $pa ) {
var tb = 'solid 10px transparent',
paOffset = $pa.offset(),
- h = $pa.outerHeight();
+ h = $pa.outerHeight( true );
- this.$el.css( 'top', paOffset.top + h + 8 );
+ this.$el.css( 'top', paOffset.top + h );
$( '<div>' ).css( {
'border-bottom': 'solid 10px #006398',
'border-right': tb,
diff --git a/javascripts/common/Overlay.js b/javascripts/common/Overlay.js
index 273b6f3..f343c67 100644
--- a/javascripts/common/Overlay.js
+++ b/javascripts/common/Overlay.js
@@ -10,6 +10,7 @@
template: M.template.get( 'overlay' ),
className: 'mw-mf-overlay',
closeOnBack: false,
+ fullScreen: true,
appendTo: '#mw-mf-viewport',
initialize: function( options ) {
var self = this;
@@ -52,22 +53,25 @@
}
this.$el.appendTo( this.appendTo );
this.scrollTop = document.body.scrollTop;
- $( 'html' ).addClass( 'overlay-enabled' );
+ if ( this.fullScreen ) {
+ $( 'html' ).addClass( 'overlay-enabled' );
+ // skip the URL bar if possible
+ window.scrollTo( 0, 1 );
+ } else {
+ $( '#mw-mf-page-center' ).one( M.tapEvent(
'click' ), $.proxy( this, 'hide' ) );
+ }
$( 'body' ).removeClass( 'navigation-enabled' );
-
- // skip the URL bar if possible
- window.scrollTo( 0, 1 );
},
hide: function() {
// FIXME: allow zooming outside the overlay again
// M.unlockViewport();
this.$el.detach();
- if ( !this.parent ) {
+ if ( this.parent ) {
+ this.parent.show();
+ } else if ( this.fullScreen ) {
$( 'html' ).removeClass( 'overlay-enabled' );
// return to last known scroll position
window.scrollTo( document.body.scrollLeft,
this.scrollTop );
- } else {
- this.parent.show();
}
return true;
}
diff --git a/javascripts/modules/editor/editor.js
b/javascripts/modules/editor/editor.js
index 5a43d9f..262eb5e 100644
--- a/javascripts/modules/editor/editor.js
+++ b/javascripts/modules/editor/editor.js
@@ -11,10 +11,11 @@
campaign: 'mobile_editPageActionCta'
},
content: mw.msg( 'mobile-frontend-editor-cta' )
- } );
+ } ),
+ isTestA = mw.config.get( 'wgUserId' ) % 2 === 0;
function addEditButton( section, container ) {
- return $( '<a class="edit-page inline" href="#editor-' +
section + '">' ).
+ return $( '<a class="edit-page" href="#editor-' + section +
'">' ).
text( mw.msg( 'mobile-frontend-editor-edit' ) ).
prependTo( container ).
// FIXME change when micro.tap.js in stable
@@ -24,14 +25,17 @@
} );
}
- function addCtaButton( sectionHash, container ) {
+ function addCtaButton( hash, container, returnToQuery ) {
addEditButton( '', container ).
// FIXME change when micro.tap.js in stable
on( M.tapEvent( 'mouseup' ), function( ev ) {
ev.preventDefault();
// need to use toggle() because we do
ev.stopPropagation() (in addEditButton())
drawer.
- render( { queryParams: { returnto:
mw.config.get( 'wgPageName' ) + '#' + sectionHash } } ).
+ render( { queryParams: {
+ returnto: mw.config.get(
'wgPageName' ) + '#' + hash,
+ returntoquery: returnToQuery
+ } } ).
toggle();
} ).
// needed until we use tap everywhere to prevent the
link from being followed
@@ -90,8 +94,18 @@
} );
$( 'h2 .mw-editsection' ).each( function() {
- var $heading = $( this ).parent();
- addCtaButton( $heading.attr( 'id' ), $heading );
+ var $heading = $( this ).parent(), section;
+
+ if ( mw.config.get( 'wgMFMode' ) === 'stable' ) {
+ addCtaButton( $heading.attr( 'id' ), $heading );
+ } else {
+ if ( !isTestA ) {
+ section = extractSectionIdFromEditLink(
$( this ).find( 'a' ) );
+ addCtaButton( 'editor-' + section,
$heading );
+ } else {
+ addCtaButton( $heading.attr( 'id' ),
$heading, 'article_action=edit' );
+ }
+ }
} );
}
diff --git a/javascripts/modules/mf-toggle.js b/javascripts/modules/mf-toggle.js
index eb5bc6f..3f62a30 100644
--- a/javascripts/modules/mf-toggle.js
+++ b/javascripts/modules/mf-toggle.js
@@ -13,6 +13,8 @@
if ( $p.length > 0 && !$p.hasClass( 'openSection' ) ) {
wm_toggle_section( $p.attr( 'id' ).split( '_' )[1] );
+ // scroll again after opening section (opening section
makes the page longer)
+ $( 'html, body' ).scrollTop( $target.offset().top );
}
}
diff --git a/javascripts/modules/tutorials/newbie.js
b/javascripts/modules/tutorials/newbie.js
index 2c9223f..c2b1a3d 100644
--- a/javascripts/modules/tutorials/newbie.js
+++ b/javascripts/modules/tutorials/newbie.js
@@ -15,28 +15,32 @@
}
$( function() {
- var photoOverlay, editOverlay;
+ var photoOverlay, editOverlay, target;
if ( shouldShowEditTutorial() ) {
+ if ( window.location.hash ) {
+ target = window.location.hash + ' .edit-page';
+ } else {
+ target = '#ca-edit .edit-page';
+ }
+
editOverlay = new PageActionOverlay( {
- target: $( '#ca-edit' ),
- noArrow: true,
+ target: target,
className: 'slide active editing',
summary: mw.msg(
'mobile-frontend-editor-tutorial-summary', mw.config.get( 'wgTitle' ) ),
confirmMsg: mw.msg(
'mobile-frontend-editor-tutorial-confirm' )
} );
editOverlay.show();
$( '#ca-edit' ).on( 'mousedown', $.proxy( editOverlay,
'hide' ) );
- $( '.tutorial .actionable' ).click( function( ev ) {
- ev.preventDefault();
+ editOverlay.$( '.actionable' ).on( M.tapEvent( 'click'
), function() {
// Hide the tutorial
editOverlay.hide();
// Load the editing interface
- window.location.href = $( '#ca-edit
a.edit-page' ).attr( 'href' );
+ window.location.href = $( target ).attr( 'href'
);
} );
} else if ( shouldShowUploadTutorial() ) {
photoOverlay = new LeadPhotoTutorialOverlay( {
- target: $( '#ca-upload' ),
+ target: $( '#ca-upload input' ),
funnel: 'newbie'
} );
photoOverlay.show();
diff --git a/less/common/overlays.less b/less/common/overlays.less
index 35c67d0..0fabfb1 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -1,10 +1,6 @@
@import "../mixins.less";
.overlay-enabled {
- .mw-mf-overlay {
- display: block;
- }
-
#mw-mf-page-center,
#content_wrapper {
// without this when overlay is open the content is visible
underneath the overlay
@@ -15,6 +11,13 @@
#footer {
display: none !important;
}
+
+ .mw-mf-overlay {
+ // use height instead of bottom 0 so that overlay expands when
there's
+ // more content, don't use min-height because of
+ //
http://stackoverflow.com/questions/3808512/the-inherited-height-of-a-child-div-from-a-parent-with-a-min-height-attribute
+ height: 100%;
+ }
}
html[dir="rtl"] {
@@ -24,15 +27,10 @@
}
.mw-mf-overlay {
- display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
- // use height instead of bottom 0 so that overlay expands when there's
- // more content, don't use min-height because of
- //
http://stackoverflow.com/questions/3808512/the-inherited-height-of-a-child-div-from-a-parent-with-a-min-height-attribute
- height: 100%;
background-color: white;
z-index: 4;
diff --git a/less/common/pageactions.less b/less/common/pageactions.less
index 179e2ef..159aa36 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -17,7 +17,9 @@
}
#page-actions {
- padding: 8px @contentMarginRight 8px @contentMarginLeft - 8;
+ @verticalMargin: 8px;
+
+ padding: @verticalMargin @contentMarginRight @verticalMargin
@contentMarginLeft - 8;
// end hacks
border-bottom: solid 1px #CACACA;
height: 30px;
@@ -50,6 +52,10 @@
left: 0;
width: 100%;
height: 100%;
+ margin-bottom: @verticalMargin;
+ // remove input default styling
+ padding: 0;
+ border: 0;
}
}
}
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 25de761..9b7f968 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -25,23 +25,20 @@
background-color: @colorTutorial;
color: white;
height: 100%;
+ box-shadow: 0 1px 5px 0 rgba(117, 117, 117, .8);
@imageHeight: 180px;
.slide {
- padding: (@imageHeight - 20) 0 0 0;
text-align: center;
background-size: auto @imageHeight;
background-repeat: no-repeat;
background-position: center -10px;
- top: 10px;
- left: 0;
- bottom: 0;
+ padding: 10px 0;
width: 100%;
- position: absolute;
p {
line-height: 1.4;
- margin: 0 26px 1em;
+ margin: 0 0 1em;
}
// FIXME: exists because of inconsistency in new user uploads
tutorial workflow
@@ -64,6 +61,7 @@
}
.photo-upload {
+ padding-top: (@imageHeight - 20);
background-image: url(images/tutorials/photos.png);
}
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index 1ecbe4a..5decba0 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -5,9 +5,6 @@
* Please edit the corresponding less file instead.
* See README.mediawiki for details on installing.
*/
-.overlay-enabled .mw-mf-overlay {
- display: block;
-}
.overlay-enabled #mw-mf-page-center,
.overlay-enabled #content_wrapper {
height: 100%;
@@ -16,17 +13,18 @@
.overlay-enabled #footer {
display: none !important;
}
+.overlay-enabled .mw-mf-overlay {
+ height: 100%;
+}
html[dir="rtl"] .mw-mf-overlay .header .cancel {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.mw-mf-overlay {
- display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
- height: 100%;
background-color: white;
z-index: 4;
}
diff --git a/stylesheets/common/pageactions.css
b/stylesheets/common/pageactions.css
index 15b4792..fc0594e 100644
--- a/stylesheets/common/pageactions.css
+++ b/stylesheets/common/pageactions.css
@@ -51,6 +51,9 @@
left: 0;
width: 100%;
height: 100%;
+ margin-bottom: 8px;
+ padding: 0;
+ border: 0;
}
.watch-this-article {
background-image: url(images/pagemenu/watch.png);
diff --git a/stylesheets/modules/tutorials.css
b/stylesheets/modules/tutorials.css
index 444132d..3cc2899 100644
--- a/stylesheets/modules/tutorials.css
+++ b/stylesheets/modules/tutorials.css
@@ -22,22 +22,19 @@
background-color: #006398;
color: white;
height: 100%;
+ box-shadow: 0 1px 5px 0 rgba(117, 117, 117, 0.8);
}
.tutorial .slide {
- padding: 160px 0 0 0;
text-align: center;
background-size: auto 180px;
background-repeat: no-repeat;
background-position: center -10px;
- top: 10px;
- left: 0;
- bottom: 0;
+ padding: 10px 0;
width: 100%;
- position: absolute;
}
.tutorial .slide p {
line-height: 1.4;
- margin: 0 26px 1em;
+ margin: 0 0 1em;
}
.tutorial .slide button.actionable,
.tutorial .slide button,
@@ -54,6 +51,7 @@
color: white;
}
.tutorial .photo-upload {
+ padding-top: 160px;
background-image: url(images/tutorials/photos.png);
}
.tutorial .editing {
--
To view, visit https://gerrit.wikimedia.org/r/82556
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ief06fa2bbafa709bc7ae0eec40de8f8eff01757a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
