jenkins-bot has submitted this change and it was merged.
Change subject: Story 920: Show uploads tutorial after following anon cta
......................................................................
Story 920: Show uploads tutorial after following anon cta
Enable the anonymous user CTA in beta.
Refactor photo uploads tutorial css to be more generic
Create ContentOverlay - an overlay designed to appear within the page
rather than over the page
Currently shown to all users after logging in to make testing
easier
Note: currently doesn't work with the CentralAuth intermediate
screen of death (as this steals article_action=photo-upload from
query string)
Change-Id: Ic54af4d87553218b2e382544ee852508717bdf39
---
M MobileFrontend.i18n.php
M MobileFrontend.php
M includes/Resources.php
M includes/skins/SkinMobileBeta.php
A javascripts/common/ContentOverlay.js
M javascripts/common/Overlay.js
A javascripts/modules/tutorials/PageActionOverlay.js
A javascripts/modules/tutorials/newbie.js
M javascripts/specials/uploads.js
M javascripts/widgets/carousel.js
M less/common/overlays.less
A less/modules/tutorials.less
M less/specials/uploads.less
M stylesheets/common/overlays.css
R stylesheets/modules/images/tutorials/photos.png
A stylesheets/modules/newbie.css
A stylesheets/modules/tutorials.css
M stylesheets/specials/uploads.css
M templates/overlays/editor.html
M templates/overlays/talkSectionAdd.html
A templates/pageActionTutorial.html
M templates/photoUploadPreview.html
M templates/specials/uploads/carousel.html
M tests/javascripts/widgets/test_carousel.js
24 files changed, 281 insertions(+), 105 deletions(-)
Approvals:
Kaldari: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index fc0af3e..e0f8ae3 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -226,6 +226,7 @@
'mobile-frontend-photo-nag-learn-more-1' => "'''Yes!''' Photos you took
of places, objects, and events.",
'mobile-frontend-photo-nag-learn-more-2' => "'''Yes!''' Photos that can
help illustrate and enrich {{SITENAME}} pages.",
'mobile-frontend-photo-nag-learn-more-3' => "'''No.''' Photos of movie
posters, book covers or other copyrighted material. These will be deleted.",
+ 'mobile-frontend-lead-image-tutorial-summary' => 'Ensure that your
image can help illustrate the article. It should be an image that you created
which does not violate copyright.',
'mobile-frontend-image-uploading-wait' => 'Uploading image, please
wait.',
'mobile-frontend-image-uploading-long' => 'Image still uploading!
Thanks for your patience.',
'mobile-frontend-image-uploading-cancel' => '<a href="#">Cancel</a> if
this is taking too long.',
@@ -646,6 +647,7 @@
'mobile-frontend-photo-nag-learn-more-1' => 'Explain to users what is
allowed on the image they upload.',
'mobile-frontend-photo-nag-learn-more-2' => 'Explain to users that the
image they upload should be a good illustration for an article.',
'mobile-frontend-photo-nag-learn-more-3' => "Explain to users that the
image can't violate copyrights or else it will be deleted.",
+ 'mobile-frontend-lead-image-tutorial-summary' => 'Briefly summarise
that a lead image should illustrate the page whilst not violating copyright.
Shown to new users after logging in',
'mobile-frontend-image-uploading-wait' => 'Text that displays whilst an
image is being uploaded',
'mobile-frontend-image-uploading-long' => 'Text that displays whilst an
image is taking long to upload',
'mobile-frontend-image-uploading-cancel' => 'Text saying that user can
cancel the image upload. Word "cancel" should be a link.',
diff --git a/MobileFrontend.php b/MobileFrontend.php
index 7fc64a7..ac5ad1b 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -336,8 +336,9 @@
/**
* Whether or not to show the upload CTA to logged out users.
- * Note there is one exception:
- * it will show on page visits that come from the nearby page.
+ * Note there are a couple of exceptions:
+ * it will show on page visits that come from the nearby page
+ * it will be overriden in beta and alpha modes of the site
*/
$wgMFEnablePhotoUploadCTA = false;
diff --git a/includes/Resources.php b/includes/Resources.php
index 9043512..4d4d074 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -206,6 +206,7 @@
'talkSection',
// page.js
'page',
+ 'pageActionTutorial',
'languageSection',
),
'messages' => array(
@@ -249,6 +250,7 @@
'javascripts/common/application-beta.js',
'javascripts/common/history-beta.js',
'javascripts/views/page.js',
+ 'javascripts/common/ContentOverlay.js',
),
'messages' => array(
// page.js and talk.js (alpha)
@@ -279,6 +281,8 @@
'javascripts/common/user.js',
'javascripts/modules/search-pageimages.js',
'javascripts/modules/languages-preferred.js',
+ 'javascripts/modules/tutorials/PageActionOverlay.js',
+ 'javascripts/modules/tutorials/newbie.js',
),
'position' => 'bottom',
'messages' => array(
@@ -287,6 +291,9 @@
// for mf-toggle-dynamic.js
'mobile-frontend-show-button',
'mobile-frontend-hide-button',
+
+ // newbie.js
+ 'mobile-frontend-lead-image-tutorial-summary',
// for talk.js
'mobile-frontend-talk-explained',
@@ -380,6 +387,7 @@
'stylesheets/modules/mf-cleanuptemplates.css',
'stylesheets/modules/mf-watchstar.css',
'stylesheets/modules/mf-photo.css',
+ 'stylesheets/modules/tutorials.css',
),
'position' => 'top',
),
@@ -419,7 +427,7 @@
'mobile-frontend-drawer-cancel',
'mobile-frontend-overlay-escape',
- // LearnMoreOverlay.js
+ // LearnMoreOverlay.js, newbie.js
'mobile-frontend-photo-ownership-confirm',
// PhotoApi.js
diff --git a/includes/skins/SkinMobileBeta.php
b/includes/skins/SkinMobileBeta.php
index cd5798c..a5a8ea7 100644
--- a/includes/skins/SkinMobileBeta.php
+++ b/includes/skins/SkinMobileBeta.php
@@ -69,6 +69,11 @@
$this->prepareUserButton( $tpl );
}
+ public function getSkinConfigVariables() {
+ $vars = parent::getSkinConfigVariables();
+ $vars['wgMFEnablePhotoUploadCTA'] = true;
+ return $vars;
+ }
/**
* Prepares the user button.
* @param $tpl BaseTemplate
diff --git a/javascripts/common/ContentOverlay.js
b/javascripts/common/ContentOverlay.js
new file mode 100644
index 0000000..83f8d04
--- /dev/null
+++ b/javascripts/common/ContentOverlay.js
@@ -0,0 +1,31 @@
+( function( M, $ ) {
+
+ var Overlay = M.require( 'Overlay' ), ContentOverlay;
+
+ ContentOverlay = Overlay.extend( {
+ appendTo: '#mw-mf-page-center',
+ postRender: function( options ) {
+ this._super( options );
+ if ( options.target ) {
+ this.addPointerArrow( $( options.target ) );
+ }
+ },
+ addPointerArrow: function( $pa ) {
+ var tb = 'solid 10px transparent',
+ paOffset = $pa.offset(),
+ h = $pa.outerHeight();
+
+ this.$el.css( 'top', paOffset.top + h + 8 );
+ $( '<div>' ).css( {
+ 'border-bottom': 'solid 10px #006398',
+ 'border-right': tb,
+ 'border-left': tb,
+ position: 'absolute',
+ top: -10,
+ left: paOffset.left + 10
+ } ).appendTo( this.$el );
+ }
+ } );
+ M.define( 'ContentOverlay', ContentOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/common/Overlay.js b/javascripts/common/Overlay.js
index 808261b..8fdfa8e 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,
+ appendTo: 'body',
initialize: function( options ) {
var self = this;
options = options || {};
@@ -48,7 +49,7 @@
if ( this.parent ) {
this.parent.hide();
}
- this.$el.appendTo( 'body' );
+ this.$el.appendTo( this.appendTo );
this.scrollTop = document.body.scrollTop;
$( 'html' ).addClass( 'overlay' );
$( 'body' ).removeClass( 'navigation-enabled' );
diff --git a/javascripts/modules/tutorials/PageActionOverlay.js
b/javascripts/modules/tutorials/PageActionOverlay.js
new file mode 100644
index 0000000..86a17f9
--- /dev/null
+++ b/javascripts/modules/tutorials/PageActionOverlay.js
@@ -0,0 +1,15 @@
+( function( M ) {
+ var ContentOverlay = M.require( 'ContentOverlay' ),
+ PageActionOverlay;
+
+ PageActionOverlay = ContentOverlay.extend( {
+ template: M.template.get( 'pageActionTutorial' ),
+ defaults: {
+ summary: mw.msg(
'mobile-frontend-lead-image-tutorial-summary' ),
+ cancelMsg: mw.msg(
'mobile-frontend-photo-ownership-confirm' )
+ }
+ } );
+
+ M.define( 'tutorials/PageActionOverlay', PageActionOverlay );
+
+}( mw.mobileFrontend ) );
diff --git a/javascripts/modules/tutorials/newbie.js
b/javascripts/modules/tutorials/newbie.js
new file mode 100644
index 0000000..6b2e304
--- /dev/null
+++ b/javascripts/modules/tutorials/newbie.js
@@ -0,0 +1,22 @@
+( function( M, $ ) {
+ var PageActionOverlay = M.require( 'tutorials/PageActionOverlay' );
+
+ function shouldShowUploadTutorial() {
+ // FIXME: Limit audience to only users with low edit count
+ return $( '#ca-upload' ).hasClass( 'enabled' ) &&
+ window.location.search.indexOf(
'article_action=photo-upload' ) > -1;
+ }
+
+ $( function() {
+ var photoOverlay;
+
+ if ( shouldShowUploadTutorial() ) {
+ photoOverlay = new PageActionOverlay( {
+ target: $( '#ca-upload' )
+ } );
+ photoOverlay.show();
+ $( '#ca-upload' ).on( 'mousedown', $.proxy(
photoOverlay, 'hide' ) );
+ }
+ } );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/specials/uploads.js b/javascripts/specials/uploads.js
index a1feeeb..16791f0 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -172,7 +172,7 @@
{
caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-header' ),
cancel: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-ok' ),
- className: 'page-3',
id: 3
+ className:
'slide-image', id: 3
}
]
} ).show();
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
index 00a21ea8..6e26568 100644
--- a/javascripts/widgets/carousel.js
+++ b/javascripts/widgets/carousel.js
@@ -2,12 +2,13 @@
var View = M.require( 'view' ), Carousel;
+ // FIXME: the name Carousel is no longer accurate
Carousel = View.extend( {
template: M.template.get( 'specials/uploads/carousel' ),
- className: 'carousel slideable',
+ className: 'carousel tutorial slideable',
postRender: function() {
var self = this, $pages;
- $pages = this.$( '.page' );
+ $pages = this.$( '.slide' );
this.page = 0;
this.totalPages = $pages.length;
this.$( 'ul li' ).on( 'click', function() {
@@ -23,10 +24,10 @@
} );
},
showCurrentPage: function() {
- this.$( '.page' ).removeClass( 'active' ).removeClass(
'slider-left' ).removeClass( 'slider-right' );
- this.$( '.page' ).eq( this.page - 1 ).addClass(
'slider-left' );
- this.$( '.page' ).eq( this.page ).addClass( 'active' );
- this.$( '.page' ).eq( this.page + 1 ).addClass(
'slider-right' );
+ this.$( '.slide' ).removeClass( 'active' ).removeClass(
'slider-left' ).removeClass( 'slider-right' );
+ this.$( '.slide' ).eq( this.page - 1 ).addClass(
'slider-left' );
+ this.$( '.slide' ).eq( this.page ).addClass( 'active' );
+ this.$( '.slide' ).eq( this.page + 1 ).addClass(
'slider-right' );
this.$( 'ul li' ).removeClass( 'active' ).
eq( this.page ).addClass( 'active' );
this.$( 'button' ).removeClass( 'active' );
diff --git a/less/common/overlays.less b/less/common/overlays.less
index 43974ee..568fdd9 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -5,7 +5,10 @@
display: block;
}
- #mw-mf-viewport {
+ #mw-mf-page-center,
+ #content_wrapper {
+ // without this when overlay is open the content is visible
underneath the overlay
+ height: 100%;
overflow: hidden;
}
@@ -25,7 +28,7 @@
position: absolute;
top: 0;
left: 0;
- right: 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
@@ -86,12 +89,7 @@
}
}
- .buttonBar {
- bottom: 0;
- left: 0;
- right: 0;
- border-top: 1px solid #ccc;
- background-color: #f3f3f3;
+ .button-bar-centered {
text-align: center;
padding: .7em 1em;
color: #707070;
@@ -99,6 +97,14 @@
button {
margin: 0 .3em;
}
+ }
+
+ .buttonBar {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ border-top: 1px solid #ccc;
+ background-color: #f3f3f3;
p {
padding: .7em 0;
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
new file mode 100644
index 0000000..47a95cf
--- /dev/null
+++ b/less/modules/tutorials.less
@@ -0,0 +1,45 @@
+@import "../mf-mixins.less";
+/* Tutorial overlay styling */
+
+.tutorial {
+ padding-left: @contentMarginRight;
+ padding-right: @contentMarginRight;
+ line-height: 1.4;
+ font-size: 0.9em;
+ background-color: #006398;
+ color: white;
+ height: 100%;
+
+ @imageHeight: 180px;
+ .slide {
+ padding: @imageHeight 0 0 0;
+ text-align: center;
+ background-size: auto @imageHeight;
+ background-repeat: no-repeat;
+ background-position: center 0;
+ top: 10px;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ position: absolute;
+
+ p {
+ font-size: 0.9em;
+ margin: 0 26px;
+ }
+
+ .cancel {
+ color: #006398;
+ padding: 12px;
+ border: none;
+ background-color: #F0F0F0;
+ font-weight: bold;
+ border-radius: 0;
+ }
+ }
+
+ .slide-image {
+ background-image: url(images/tutorials/photos.png);
+ }
+
+}
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 3a2cc2b..842322f 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -9,11 +9,6 @@
@buttonPadding: 4px;
position: relative;
- background-color: #006398;
- color: white;
- height: 100%;
- padding-left: @contentMarginRight;
- padding-right: @contentMarginRight;
.box-sizing( border-box );
> button {
@@ -44,27 +39,8 @@
}
}
- button.cancel {
- color: #006398;
- padding: 12px;
- border: none;
- background-color: #F0F0F0;
- font-weight: bold;
- border-radius: 0;
- }
-
- @imageHeight: 180px;
- .page {
- padding: @imageHeight 0 0 0;
- text-align: center;
- background-size: auto @imageHeight;
- background-repeat: no-repeat;
- background-position: center 0;
- top: 10px;
+ .slide {
left: 100%;
- bottom: 0;
- width: 100%;
- position: absolute;
visibility: hidden;
&.active {
@@ -82,21 +58,13 @@
margin: 0 26px 16px;
}
- p {
- font-size: 0.9em;
- margin: 0 26px;
- }
-
+ // FIXME: Make page-1 and page-2 more generic and reusable?
&.page-1 {
background-image: url(images/uploads/SplashScreen1.png);
}
&.page-2 {
background-image: url(images/uploads/SplashScreen2.png);
- }
-
- &.page-3 {
- background-image: url(images/uploads/SplashScreen3.png);
}
}
}
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index 224e1f6..6eb7dcf 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -8,7 +8,9 @@
html.overlay .mw-mf-overlay {
display: block;
}
-html.overlay #mw-mf-viewport {
+html.overlay #mw-mf-page-center,
+html.overlay #content_wrapper {
+ height: 100%;
overflow: hidden;
}
html.overlay #footer {
@@ -23,7 +25,7 @@
position: absolute;
top: 0;
left: 0;
- right: 0;
+ width: 100%;
height: 100%;
background-color: white;
z-index: 4;
@@ -73,18 +75,20 @@
display: block;
margin: auto;
}
+.mw-mf-overlay .button-bar-centered {
+ text-align: center;
+ padding: .7em 1em;
+ color: #707070;
+}
+.mw-mf-overlay .button-bar-centered button {
+ margin: 0 .3em;
+}
.mw-mf-overlay .buttonBar {
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #ccc;
background-color: #f3f3f3;
- text-align: center;
- padding: .7em 1em;
- color: #707070;
-}
-.mw-mf-overlay .buttonBar button {
- margin: 0 .3em;
}
.mw-mf-overlay .buttonBar p {
padding: .7em 0;
diff --git a/stylesheets/specials/images/uploads/SplashScreen3.png
b/stylesheets/modules/images/tutorials/photos.png
similarity index 100%
rename from stylesheets/specials/images/uploads/SplashScreen3.png
rename to stylesheets/modules/images/tutorials/photos.png
Binary files differ
diff --git a/stylesheets/modules/newbie.css b/stylesheets/modules/newbie.css
new file mode 100644
index 0000000..d6e7e16
--- /dev/null
+++ b/stylesheets/modules/newbie.css
@@ -0,0 +1,44 @@
+/**
+ * DO NOT EDIT THIS FILE
+ * This is an automatically generated css file.
+ * It was generated by LESS (http://lesscss.org).
+ * Please edit the corresponding less file instead.
+ * See README.mediawiki for details on installing.
+ */
+/* Tutorial overlay styling */
+.tutorial {
+ padding-left: 23px;
+ padding-right: 23px;
+ line-height: 1.4;
+ font-size: 0.9em;
+ background-color: #006398;
+ color: white;
+ height: 100%;
+}
+.tutorial .slide {
+ padding: 180px 0 0 0;
+ text-align: center;
+ background-size: auto 180px;
+ background-repeat: no-repeat;
+ background-position: center 0;
+ top: 10px;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ position: absolute;
+}
+.tutorial .slide p {
+ font-size: 0.9em;
+ margin: 0 26px;
+}
+.tutorial .slide .cancel {
+ color: #006398;
+ padding: 12px;
+ border: none;
+ background-color: #F0F0F0;
+ font-weight: bold;
+ border-radius: 0;
+}
+.tutorial .slide-image {
+ background-image: url(images/tutorials/photos.png);
+}
diff --git a/stylesheets/modules/tutorials.css
b/stylesheets/modules/tutorials.css
new file mode 100644
index 0000000..d6e7e16
--- /dev/null
+++ b/stylesheets/modules/tutorials.css
@@ -0,0 +1,44 @@
+/**
+ * DO NOT EDIT THIS FILE
+ * This is an automatically generated css file.
+ * It was generated by LESS (http://lesscss.org).
+ * Please edit the corresponding less file instead.
+ * See README.mediawiki for details on installing.
+ */
+/* Tutorial overlay styling */
+.tutorial {
+ padding-left: 23px;
+ padding-right: 23px;
+ line-height: 1.4;
+ font-size: 0.9em;
+ background-color: #006398;
+ color: white;
+ height: 100%;
+}
+.tutorial .slide {
+ padding: 180px 0 0 0;
+ text-align: center;
+ background-size: auto 180px;
+ background-repeat: no-repeat;
+ background-position: center 0;
+ top: 10px;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ position: absolute;
+}
+.tutorial .slide p {
+ font-size: 0.9em;
+ margin: 0 26px;
+}
+.tutorial .slide .cancel {
+ color: #006398;
+ padding: 12px;
+ border: none;
+ background-color: #F0F0F0;
+ font-weight: bold;
+ border-radius: 0;
+}
+.tutorial .slide-image {
+ background-image: url(images/tutorials/photos.png);
+}
diff --git a/stylesheets/specials/uploads.css b/stylesheets/specials/uploads.css
index 7713a24..c136fce 100644
--- a/stylesheets/specials/uploads.css
+++ b/stylesheets/specials/uploads.css
@@ -11,11 +11,6 @@
}
.carousel {
position: relative;
- background-color: #006398;
- color: white;
- height: 100%;
- padding-left: 23px;
- padding-right: 23px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -52,52 +47,28 @@
.carousel > button.active {
visibility: visible;
}
-.carousel button.cancel {
- color: #006398;
- padding: 12px;
- border: none;
- background-color: #F0F0F0;
- font-weight: bold;
- border-radius: 0;
-}
-.carousel .page {
- padding: 180px 0 0 0;
- text-align: center;
- background-size: auto 180px;
- background-repeat: no-repeat;
- background-position: center 0;
- top: 10px;
+.carousel .slide {
left: 100%;
- bottom: 0;
- width: 100%;
- position: absolute;
visibility: hidden;
}
-.carousel .page.active {
+.carousel .slide.active {
visibility: visible;
left: 23px;
}
-.carousel .page p,
-.carousel .page strong {
+.carousel .slide p,
+.carousel .slide strong {
line-height: 1.4;
}
-.carousel .page strong {
+.carousel .slide strong {
display: block;
font-size: 1.1em;
margin: 0 26px 16px;
}
-.carousel .page p {
- font-size: 0.9em;
- margin: 0 26px;
-}
-.carousel .page.page-1 {
+.carousel .slide.page-1 {
background-image: url(images/uploads/SplashScreen1.png);
}
-.carousel .page.page-2 {
+.carousel .slide.page-2 {
background-image: url(images/uploads/SplashScreen2.png);
-}
-.carousel .page.page-3 {
- background-image: url(images/uploads/SplashScreen3.png);
}
.ctaUploadPhoto {
padding: 8px;
diff --git a/templates/overlays/editor.html b/templates/overlays/editor.html
index fa562d1..a1df475 100644
--- a/templates/overlays/editor.html
+++ b/templates/overlays/editor.html
@@ -7,19 +7,19 @@
<h2>{{previewMsg}}</h2>
<div class="content"></div>
</div>
-<div class="position-fixed buttonBar initial-bar">
+<div class="position-fixed buttonBar button-bar-centered initial-bar">
{{#isNewEditor}}
<div><p>{{guiderMsg}}</p></div>
{{/isNewEditor}}
<button class="cancel inline">{{cancelMsg}}</button>
<button class="continue" disabled>{{continueMsg}}</button>
</div>
-<div class="position-fixed buttonBar save-bar">
+<div class="position-fixed buttonBar button-bar-centered save-bar">
<input class="summary" placeholder="{{summaryMsg}}" />
<button class="inline back">{{keepEditingMsg}}</button>
<button class="save">{{saveMsg}}</button>
<p class="license">{{{licenseMsg}}}</p>
</div>
-<div class="position-fixed buttonBar saving-bar loading">
+<div class="position-fixed buttonBar button-bar-centered saving-bar loading">
<p>{{waitMsg}}</p>
</div>
diff --git a/templates/overlays/talkSectionAdd.html
b/templates/overlays/talkSectionAdd.html
index f8b35b7..97cdeef 100644
--- a/templates/overlays/talkSectionAdd.html
+++ b/templates/overlays/talkSectionAdd.html
@@ -8,7 +8,7 @@
<h3><input type="text" class="search"
placeholder="{{topicTitlePlaceHolder}}"></h3>
<textarea cols="40" rows="10"
placeholder="{{topicContentPlaceHolder}}"></textarea>
</div>
-<div class="position-fixed buttonBar confirm-bar">
+<div class="position-fixed buttonBar button-bar-centered confirm-bar">
<p class="count"></p>
<p>{{{licenseMsg}}}</p>
<button class="cancel">{{cancelMsg}}</button>
diff --git a/templates/pageActionTutorial.html
b/templates/pageActionTutorial.html
new file mode 100644
index 0000000..425c001
--- /dev/null
+++ b/templates/pageActionTutorial.html
@@ -0,0 +1,8 @@
+<div class="tutorial">
+ <div class="slide slide-image active">
+ <p>{{summary}}</p>
+ <div class="button-bar-centered">
+ <button class="cancel inline">{{cancelMsg}}</button>
+ </div>
+ </div>
+</div>
diff --git a/templates/photoUploadPreview.html
b/templates/photoUploadPreview.html
index bf660b8..ecf027e 100644
--- a/templates/photoUploadPreview.html
+++ b/templates/photoUploadPreview.html
@@ -6,7 +6,7 @@
<p>{{ownerStatement}} <a href="#" class="help">{{help}}</a></p>
<textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
</div>
-<div class="position-fixed buttonBar">
+<div class="position-fixed buttonBar button-bar-centered">
<button class="cancel inline">{{cancelButton}}</button>
<button class="submit" disabled>{{submitButton}}</button>
<p class="license">{{{license}}}</p>
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
index 216b913..a6e021c 100644
--- a/templates/specials/uploads/carousel.html
+++ b/templates/specials/uploads/carousel.html
@@ -1,6 +1,6 @@
<button class='prev'></button>
{{#pages}}
-<div class="page {{className}} slider">
+<div class="slide {{className}} slider">
<strong>{{caption}}</strong>
<p>{{text}}</p>
{{#cancel}}<button class="cancel">{{cancel}}</button>{{/cancel}}
diff --git a/tests/javascripts/widgets/test_carousel.js
b/tests/javascripts/widgets/test_carousel.js
index ae62a4b..4112b69 100644
--- a/tests/javascripts/widgets/test_carousel.js
+++ b/tests/javascripts/widgets/test_carousel.js
@@ -39,8 +39,8 @@
strictEqual( this.c.page, 0, 'Initialises to page 0' );
this.c.next();
this.c.showCurrentPage();
- strictEqual( this.c.$( '.page' ).eq( 0 ).hasClass( 'active' ),
false, 'First page is hidden' );
- strictEqual( this.c.$( '.page' ).eq( 1 ).hasClass( 'active' ),
true, 'Second page is visible' );
+ strictEqual( this.c.$( '.slide' ).eq( 0 ).hasClass( 'active' ),
false, 'First page is hidden' );
+ strictEqual( this.c.$( '.slide' ).eq( 1 ).hasClass( 'active' ),
true, 'Second page is visible' );
} );
}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/73550
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic54af4d87553218b2e382544ee852508717bdf39
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
