Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/68013
Change subject: Story 789: First time user upload tutorial revamp
......................................................................
Story 789: First time user upload tutorial revamp
Make consistent with Commons experience
* JavaScript now runs at top of page
* New assets
Change-Id: I10885b1b950e9c32242975e9c0c70f28435b0efd
---
M MobileFrontend.i18n.php
M includes/Resources.php
A javascripts/specials/overlays/CarouselOverlay.js
M javascripts/specials/uploads.js
M javascripts/widgets/carousel.js
M less/specials/uploads.less
M stylesheets/specials/images/uploads/SplashScreen1.png
M stylesheets/specials/images/uploads/SplashScreen2.png
M stylesheets/specials/images/uploads/SplashScreen3.png
M stylesheets/specials/uploads.css
M templates/specials/uploads/carousel.html
11 files changed, 146 insertions(+), 48 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/13/68013/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 129e3ae..f303e98 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -154,9 +154,12 @@
'mobile-frontend-listed-image-no-description' => 'No description',
'mobile-frontend-donate-photo-upload-success' => 'Success! Your image
can now be used on {{SITENAME}}!',
'mobile-frontend-donate-photo-first-upload-success' => 'Success! Thanks
for your first contribution!',
- 'mobile-frontend-first-upload-wizard-page-1' => '{{SITENAME}} needs
your photos to bring its pages to life!',
- 'mobile-frontend-first-upload-wizard-page-2' => 'Please only donate
photos that you took yourself.',
- 'mobile-frontend-first-upload-wizard-page-3' => 'Your donated photos
can be shared, reused, and remixed by millions.',
+ 'mobile-frontend-first-upload-wizard-new-page-1-header' => 'Contribute
your images. Help {{SITENAME}} articles come to life!',
+ 'mobile-frontend-first-upload-wizard-new-page-1' => 'Images on
{{SITENAME}} come from Wikimedia Commons',
+ 'mobile-frontend-first-upload-wizard-new-page-2-header' => 'Your images
help educate people around the world',
+ 'mobile-frontend-first-upload-wizard-new-page-2' => 'Avoid copyrighted
materials you found from the internet as well as images of posters, book
covers, etc.',
+ 'mobile-frontend-first-upload-wizard-new-page-3-header' => 'Do you
think you have got it?',
+ 'mobile-frontend-first-upload-wizard-new-page-3-ok' => 'Yes!',
// watchlist
'mobile-frontend-watchlist-add' => 'Added $1 to your watchlist',
@@ -535,9 +538,13 @@
'mobile-frontend-listed-image-no-description' => 'What to show when no
description available',
'mobile-frontend-donate-photo-upload-success' => 'On upload page -
notification shown after a successful upload',
'mobile-frontend-donate-photo-first-upload-success' => 'On upload page
- notification shown after a successful upload when it is the first upload by
that user',
- 'mobile-frontend-first-upload-wizard-page-1' => 'Message shown to users
who have never uploaded a photo to commons. Explain why photos are important.',
- 'mobile-frontend-first-upload-wizard-page-2' => 'Explains important of
the photos being owned by the person uploading them.',
- 'mobile-frontend-first-upload-wizard-page-3' => 'Explains implications
of uploading a photo.',
+ 'mobile-frontend-first-upload-wizard-new-page-1-header' => 'Call to
action asking the user to upload an image',
+ 'mobile-frontend-first-upload-wizard-new-page-1' => 'Informative
statement about where images come from.',
+ 'mobile-frontend-first-upload-wizard-new-page-2-header' => 'Guidance on
why images might be uploaded on Special:Uploads',
+ 'mobile-frontend-first-upload-wizard-new-page-2' => 'Guidance on
avoiding copyright materials shown to first time users on Special:Uploads',
+ 'mobile-frontend-first-upload-wizard-new-page-3-header' => 'Question
asking user if they understood the tutorial',
+ 'mobile-frontend-first-upload-wizard-new-page-3-ok' => 'Label for
button which escapes overlay and starts upload',
+
'mobile-frontend-watchlist-add' => 'Notification message when you add
an article to your watchlist
*$1 - the title of the article',
'mobile-frontend-watchlist-removed' => 'Notification message when you
remove an article from your watchlist
diff --git a/includes/Resources.php b/includes/Resources.php
index bab9a98..7ac3378 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -631,17 +631,22 @@
'mobile-frontend-photo-upload-generic',
'mobile-frontend-donate-photo-upload-success',
'mobile-frontend-donate-photo-first-upload-success',
- 'mobile-frontend-donate-image-summary',
'mobile-frontend-listed-image-no-description',
'mobile-frontend-photo-upload-user-count',
- 'mobile-frontend-first-upload-wizard-page-1',
- 'mobile-frontend-first-upload-wizard-page-2',
- 'mobile-frontend-first-upload-wizard-page-3',
+ 'mobile-frontend-first-upload-wizard-new-page-1-header',
+ 'mobile-frontend-first-upload-wizard-new-page-1',
+ 'mobile-frontend-first-upload-wizard-new-page-2-header',
+ 'mobile-frontend-first-upload-wizard-new-page-2',
+ 'mobile-frontend-first-upload-wizard-new-page-3-header',
+ 'mobile-frontend-first-upload-wizard-new-page-3',
+ 'mobile-frontend-first-upload-wizard-new-page-3-ok',
),
'scripts' => array(
'javascripts/widgets/carousel.js',
+ 'javascripts/specials/overlays/CarouselOverlay.js',
'javascripts/specials/uploads.js',
),
+ 'position' => 'top',
),
'mobile.uploads.styles' => $wgMFMobileSpecialPageResourceBoilerplate +
array(
'styles' => array(
diff --git a/javascripts/specials/overlays/CarouselOverlay.js
b/javascripts/specials/overlays/CarouselOverlay.js
new file mode 100644
index 0000000..985433e
--- /dev/null
+++ b/javascripts/specials/overlays/CarouselOverlay.js
@@ -0,0 +1,20 @@
+( function( M ) {
+ var Overlay = M.require( 'Overlay' ),
+ Carousel = M.require( 'widgets/carousel' ),
+ CarouselOverlay = Overlay.extend( {
+ template: '',
+ className: 'overlay-carousel mw-mf-overlay',
+ initialize: function( options ) {
+ this._super( options );
+ this.carousel = new Carousel( { pages:
options.pages } );
+ },
+ postRender: function( options ) {
+ this.$el.empty();
+ this.carousel.appendTo( this.$el );
+ this._super( options );
+ }
+ } );
+
+M.define( 'overlays/CarouselOverlay', CarouselOverlay );
+
+}( mw.mobileFrontend ) );
\ No newline at end of file
diff --git a/javascripts/specials/uploads.js b/javascripts/specials/uploads.js
index fb03234..bfcb890 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -3,7 +3,7 @@
photo = M.require( 'photo' ),
popup = M.require( 'notifications' ),
View = M.require( 'view' ),
- Carousel = M.require( 'widgets/carousel' ),
+ CarouselOverlay = M.require( 'overlays/CarouselOverlay' ),
carousel,
m;
@@ -106,14 +106,26 @@
if ( pages.length === 0 ) {
$( '.ctaUploadPhoto h2' ).hide(); // hide the
count if 0 uploads have been made
- carousel = new Carousel( {
+ carousel = new CarouselOverlay( {
pages: [
- { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-1' ), className: 'page-1', id: 1 },
- { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-2' ), className: 'page-2', id: 2 },
- { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-3' ), className: 'page-3', id: 3 }
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1-header' ),
+ text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1' ),
+ className: 'page-1',
id: 1
+ },
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2-header' ),
+ text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2' ),
+ className: 'page-2',
id: 2
+ },
+ {
+ 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
+ }
]
} );
- carousel.insertBefore( '.ctaUploadPhoto' );
+ carousel.show();
$( function() {
window.scrollTo( 0, $( '.header'
).offset().top );
} );
@@ -157,10 +169,9 @@
showGallery( username );
}
}
-
+ $( init );
return {
- getDescription: getDescription,
- init: init
+ getDescription: getDescription
};
}() );
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
index f54e5a6..2296c30 100644
--- a/javascripts/widgets/carousel.js
+++ b/javascripts/widgets/carousel.js
@@ -4,6 +4,7 @@
Carousel = View.extend( {
template: M.template.get( 'specials/uploads/carousel' ),
+ className: 'carousel',
postRender: function() {
var self = this, $pages;
$pages = this.$( '.page' );
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 87c1636..84d7a9b 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -1,16 +1,21 @@
@import "../mf-mixins.less";
/* carousel css */
+.overlay-carousel {
+ height: 100%;
+}
+
.carousel {
@indicatorHeight: 10px;
@indicatorPadding: 4px;
@buttonPadding: 4px;
position: relative;
- background-color: #E7E7E7;
- box-shadow: 0px 3px 3px #AAA;
+ background-color: #006398;
+ color: white;
+ height: 100%;
- button {
+ > button {
padding: 0;
visibility: hidden;
border: none;
@@ -20,7 +25,7 @@
top: 0;
width: @contentMarginLeft;
bottom: @indicatorHeight + @indicatorPadding;
- .background( url(images/uploads/chevron_left.png) );
+ .background( url(images/uploads/chevron_left.png), no-repeat,
center 8px );
background-size: auto 20px;
&.prev {
@@ -37,17 +42,36 @@
}
}
- @imageSize: 80px;
+ button.cancel {
+ display: block;
+ margin: 10px auto 0 auto;
+ color: #006398;
+ padding: 12px;
+ border: none;
+ background-color: #F0F0F0;
+ font-weight: bold;
+ .border-radius( 0 );
+ }
+
+ @imageSize: 130px;
.page {
padding: @imageSize + 32px @contentMarginRight + @buttonPadding
0 @contentMarginLeft + @buttonPadding;
text-align: center;
- font-size: 1.2em;
line-height: 1.3;
font-family: @fontFamilyHeading;
background-size: auto @imageSize;
background-repeat: no-repeat;
background-position: center 24px;
min-height: 70px;
+
+ .caption {
+ font-weight: bold;
+ margin-top: 24px;
+ }
+
+ .further-info {
+ font-size: 0.9em;
+ }
&.page-1 {
background-image: url(images/uploads/SplashScreen1.png);
@@ -63,6 +87,10 @@
}
ul {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
padding: @indicatorPadding 0 24px 0;
text-align: center;
diff --git a/stylesheets/specials/images/uploads/SplashScreen1.png
b/stylesheets/specials/images/uploads/SplashScreen1.png
index 9ebbd65..d6e92e5 100644
--- a/stylesheets/specials/images/uploads/SplashScreen1.png
+++ b/stylesheets/specials/images/uploads/SplashScreen1.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/SplashScreen2.png
b/stylesheets/specials/images/uploads/SplashScreen2.png
index 807b860..1fe047b 100644
--- a/stylesheets/specials/images/uploads/SplashScreen2.png
+++ b/stylesheets/specials/images/uploads/SplashScreen2.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/SplashScreen3.png
b/stylesheets/specials/images/uploads/SplashScreen3.png
index d2d011d..622177d 100644
--- a/stylesheets/specials/images/uploads/SplashScreen3.png
+++ b/stylesheets/specials/images/uploads/SplashScreen3.png
Binary files differ
diff --git a/stylesheets/specials/uploads.css b/stylesheets/specials/uploads.css
index 1892760..272768a 100644
--- a/stylesheets/specials/uploads.css
+++ b/stylesheets/specials/uploads.css
@@ -1,10 +1,14 @@
/* carousel css */
+.overlay-carousel {
+ height: 100%;
+}
.carousel {
position: relative;
- background-color: #E7E7E7;
- box-shadow: 0px 3px 3px #AAA;
+ background-color: #006398;
+ color: white;
+ height: 100%;
}
-.carousel button {
+.carousel > button {
padding: 0;
visibility: hidden;
border: none;
@@ -14,29 +18,47 @@
top: 0;
width: 23px;
bottom: 14px;
- background: url(images/uploads/chevron_left.png) center center no-repeat;
+ background: url(images/uploads/chevron_left.png) center 8px no-repeat;
background-size: auto 20px;
}
-.carousel button.prev {
+.carousel > button.prev {
left: 4px;
}
-.carousel button.next {
+.carousel > button.next {
right: 4px;
background-image: url(images/uploads/chevron_right.png);
}
-.carousel button.active {
+.carousel > button.active {
visibility: visible;
}
+.carousel button.cancel {
+ display: block;
+ margin: 10px auto 0 auto;
+ color: #006398;
+ padding: 12px;
+ border: none;
+ background-color: #F0F0F0;
+ font-weight: bold;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
.carousel .page {
- padding: 112px 27px 0 27px;
+ padding: 162px 27px 0 27px;
text-align: center;
- font-size: 1.2em;
line-height: 1.3;
font-family: Georgia, serif;
- background-size: auto 80px;
+ background-size: auto 130px;
background-repeat: no-repeat;
background-position: center 24px;
min-height: 70px;
+}
+.carousel .page .caption {
+ font-weight: bold;
+ margin-top: 24px;
+}
+.carousel .page .further-info {
+ font-size: 0.9em;
}
.carousel .page.page-1 {
background-image: url(images/uploads/SplashScreen1.png);
@@ -48,6 +70,10 @@
background-image: url(images/uploads/SplashScreen3.png);
}
.carousel ul {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
padding: 4px 0 24px 0;
text-align: center;
}
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
index a3cf517..4c55575 100644
--- a/templates/specials/uploads/carousel.html
+++ b/templates/specials/uploads/carousel.html
@@ -1,14 +1,14 @@
-<div class="carousel">
- <button class='prev'></button>
- {{#pages}}
- <div class="page {{className}}">
- {{text}}
- </div>
- {{/pages}}
- <ul>
- {{#pages}}
- <li>{{id}}</li>
- {{/pages}}
- </ul>
- <button class='next'></button>
+<button class='prev'></button>
+{{#pages}}
+<div class="page {{className}}">
+ <p class="caption">{{caption}}</p>
+ <p class="further-info">{{text}}</p>
+ {{#cancel}}<button class="cancel">{{cancel}}</button>{{/cancel}}
</div>
+{{/pages}}
+<ul>
+{{#pages}}
+ <li>{{id}}</li>
+{{/pages}}
+</ul>
+<button class='next'></button>
--
To view, visit https://gerrit.wikimedia.org/r/68013
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I10885b1b950e9c32242975e9c0c70f28435b0efd
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
