JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/93014
Change subject: Story 1280 (2/2): Overhaul of image uploading overlay design
......................................................................
Story 1280 (2/2): Overhaul of image uploading overlay design
Refactor the uploads tutorial and use it for new users in all kind of
uploads.
Remove some unused PNG images, clean up tutorial CSS and fix it for RTL
languages.
Change-Id: I53d72eb1641e1b253ef5b8bb3832918fc654070a
---
M includes/Resources.php
M javascripts/modules/tutorials/PageActionOverlay.js
M javascripts/modules/uploads/PhotoUploaderButton.js
A javascripts/modules/uploads/UploadTutorial.js
D javascripts/specials/overlays/CarouselOverlay.js
M javascripts/specials/uploads.js
D javascripts/widgets/carousel.js
M less/common/overlays.less
R less/modules/images/uploads/chevronLeft.png
R less/modules/images/uploads/chevronRight.png
R less/modules/images/uploads/page1.png
R less/modules/images/uploads/page2.png
R less/modules/images/uploads/page3.png
M less/modules/tutorials.less
A less/modules/uploads/UploadTutorial.less
D less/specials/images/uploads/Tour_1.png
D less/specials/images/uploads/Tour_2.png
D less/specials/images/uploads/Tour_3.png
M less/specials/uploads.less
M less/variables.less
M templates/modules/tutorials/PageActionOverlay.html
D templates/specials/uploads/carousel.html
A templates/uploads/UploadTutorial.html
23 files changed, 298 insertions(+), 357 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/14/93014/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 533aa77..6d7aea8 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -209,9 +209,14 @@
'scripts' => array(
'javascripts/modules/uploads/PhotoApi.js',
'javascripts/modules/uploads/LeadPhoto.js',
+ 'javascripts/modules/uploads/UploadTutorial.js',
+ ),
+ 'styles' => array(
+ 'less/modules/uploads/UploadTutorial.less',
),
'templates' => array(
'uploads/LeadPhoto',
+ 'uploads/UploadTutorial',
),
'messages' => array(
// PhotoApi.js
@@ -219,6 +224,15 @@
'mobile-frontend-photo-article-donate-comment',
'mobile-frontend-photo-upload-error-filename',
'mobile-frontend-photo-upload-comment',
+
+ // UploadTutorial.js
+ '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',
),
),
@@ -856,32 +870,21 @@
'dependencies' => array(
'mobile.stable.styles',
'mobile.stable.common',
- 'mobile.uploads',
'mobile.templates',
),
'templates' => array(
- 'specials/uploads/carousel',
'specials/uploads/photo',
'specials/uploads/userGallery',
),
'messages' => array(
+ 'mobile-frontend-donate-image-nouploads',
'mobile-frontend-photo-upload-generic',
'mobile-frontend-donate-photo-upload-success',
'mobile-frontend-donate-photo-first-upload-success',
'mobile-frontend-listed-image-no-description',
'mobile-frontend-photo-upload-user-count',
- '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',
- 'mobile-frontend-donate-image-nouploads',
),
'scripts' => array(
- 'javascripts/widgets/carousel.js',
- 'javascripts/specials/overlays/CarouselOverlay.js',
'javascripts/specials/uploads.js',
),
'position' => 'top',
diff --git a/javascripts/modules/tutorials/PageActionOverlay.js
b/javascripts/modules/tutorials/PageActionOverlay.js
index 83198e6..c677e6e 100644
--- a/javascripts/modules/tutorials/PageActionOverlay.js
+++ b/javascripts/modules/tutorials/PageActionOverlay.js
@@ -5,8 +5,7 @@
PageActionOverlay = ContentOverlay.extend( {
template: M.template.get( 'modules/tutorials/PageActionOverlay'
),
defaults: {
- cancelMsg: mw.msg( 'cancel' ),
- className: 'slide active'
+ cancelMsg: mw.msg( 'cancel' )
}
} );
diff --git a/javascripts/modules/uploads/PhotoUploaderButton.js
b/javascripts/modules/uploads/PhotoUploaderButton.js
index 30364dd..f4a7b69 100644
--- a/javascripts/modules/uploads/PhotoUploaderButton.js
+++ b/javascripts/modules/uploads/PhotoUploaderButton.js
@@ -77,49 +77,58 @@
template: M.template.get( 'uploads/PhotoUploaderButton' ),
className: 'button photo',
- initialize: function( options ) {
- this._super( options );
- },
-
postRender: function() {
var self = this, $input = this.$( 'input' );
+
+ function handleFile( file ) {
+ var options = $.extend( {}, self.options, {
+ file: file,
+ parent: self
+ } ),
+ LoadingOverlay, loadingOverlay;
+
+ // FIXME: remove when new uploads overlay in
stable
+ if ( mw.config.get( 'wgMFMode' ) === 'stable' )
{
+ LoadingOverlay = M.require(
'LoadingOverlay' );
+ loadingOverlay = new LoadingOverlay();
+ loadingOverlay.show();
+
+ mw.loader.using( 'mobile.uploads',
function() {
+ var PhotoUploader = M.require(
'modules/uploads/PhotoUploader' );
+ loadingOverlay.hide();
+ new PhotoUploader( options );
+ } );
+ } else {
+ // make sure LoadingOverlayNew is
present
+ mw.loader.using( 'mobile.beta',
function() {
+ LoadingOverlay = M.require(
'LoadingOverlayNew' );
+ loadingOverlay = new
LoadingOverlay();
+ loadingOverlay.show();
+
+ mw.loader.using(
'mobile.uploadsNew', function() {
+ var PhotoUploader =
M.require( 'modules/uploadsNew/PhotoUploader' );
+ loadingOverlay.hide();
+ new PhotoUploader(
options );
+ } );
+ } );
+ }
+ }
+
+ if ( mw.config.get( 'wgMFMode' ) !== 'stable' &&
mw.config.get( 'wgUserEditCount' ) === 0 ) {
+ this.$el.on( M.tapEvent( 'click' ), function(
ev ) {
+ ev.preventDefault();
+ mw.loader.using(
'mobile.uploads.common', function() {
+ var UploadTutorial = M.require(
'modules/uploads/UploadTutorial' );
+ new UploadTutorial().on(
'file', handleFile ).show();
+ } );
+ } );
+ }
$input.
// accept must be set via attr otherwise cannot
use camera on Android
attr( 'accept', 'image/*;' ).
on( 'change', function() {
- var options = $.extend( {},
self.options, {
- file: $input[0].files[0],
- parent: self
- } ),
- LoadingOverlay, loadingOverlay;
-
- // FIXME: remove when new uploads
overlay in stable
- if ( mw.config.get( 'wgMFMode' ) ===
'stable' ) {
- LoadingOverlay = M.require(
'LoadingOverlay' );
- loadingOverlay = new
LoadingOverlay();
- loadingOverlay.show();
-
- mw.loader.using(
'mobile.uploads', function() {
- var PhotoUploader =
M.require( 'modules/uploads/PhotoUploader' );
- loadingOverlay.hide();
- new PhotoUploader(
options );
- } );
- } else {
- // make sure LoadingOverlayNew
is present
- mw.loader.using( 'mobile.beta',
function() {
- LoadingOverlay =
M.require( 'LoadingOverlayNew' );
- loadingOverlay = new
LoadingOverlay();
- loadingOverlay.show();
-
- mw.loader.using(
'mobile.uploadsNew', function() {
- var
PhotoUploader = M.require( 'modules/uploadsNew/PhotoUploader' );
-
loadingOverlay.hide();
- new
PhotoUploader( options );
- } );
- } );
- }
-
+ handleFile( $input[0].files[0] );
// clear so that change event is fired
again when user selects the same file
$input.val( '' );
} );
diff --git a/javascripts/modules/uploads/UploadTutorial.js
b/javascripts/modules/uploads/UploadTutorial.js
new file mode 100644
index 0000000..1d681d6
--- /dev/null
+++ b/javascripts/modules/uploads/UploadTutorial.js
@@ -0,0 +1,65 @@
+( function( M, $ ) {
+
+ var Overlay = M.require( 'Overlay' ), UploadTutorial;
+
+ UploadTutorial = Overlay.extend( {
+ template: M.template.get( 'uploads/UploadTutorial' ),
+ className: 'mw-mf-overlay carousel tutorial',
+
+ defaults: {
+ pages: [
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1-header' ),
+ text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1' )
+ },
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2-header' ),
+ text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2' )
+ },
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-header' ),
+ button: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-ok' )
+ }
+ ]
+ },
+
+ postRender: function( options ) {
+ var self = this, $input = this.$( 'input' );
+
+ this.page = 0;
+ this.totalPages = options.pages.length;
+ this.$( '.prev' ).on( M.tapEvent( 'click' ), $.proxy(
this, 'previous' ) );
+ this.$( '.next' ).on( M.tapEvent( 'click' ), $.proxy(
this, 'next' ) );
+ $input.
+ on( 'change', function() {
+ self.emit( 'file', $input[0].files[0] );
+ } ).
+ on( 'click', function() {
+ // need timeout for the file dialog to
open
+ setTimeout( $.proxy( self, 'hide' ), 0
);
+ } );
+ this.showCurrentPage();
+
+ this._super( options );
+ },
+
+ showCurrentPage: function() {
+ this.$( '.slide' ).removeClass( 'active' ).eq(
this.page ).addClass( 'active' );
+ this.$( '.prev' ).toggle( this.page > 0 );
+ this.$( '.next' ).toggle( this.page < this.totalPages -
1 );
+ },
+
+ next: function() {
+ this.page += 1;
+ this.showCurrentPage();
+ },
+
+ previous: function() {
+ this.page -= 1;
+ this.showCurrentPage();
+ }
+ } );
+
+ M.define( 'modules/uploads/UploadTutorial', UploadTutorial );
+
+}( mw.mobileFrontend, jQuery ));
diff --git a/javascripts/specials/overlays/CarouselOverlay.js
b/javascripts/specials/overlays/CarouselOverlay.js
deleted file mode 100644
index ad9b673..0000000
--- a/javascripts/specials/overlays/CarouselOverlay.js
+++ /dev/null
@@ -1,20 +0,0 @@
-( 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.carousel = new Carousel( { pages:
options.pages } );
- this._super( options );
- },
- 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 d2222cd..cc2d1b7 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -4,7 +4,6 @@
popup = M.require( 'notifications' ),
Api = M.require( 'api' ).Api,
View = M.require( 'view' ),
- CarouselOverlay = M.require( 'overlays/CarouselOverlay' ),
corsUrl = mw.config.get( 'wgMFPhotoUploadEndpoint' ),
pageParams = mw.config.get( 'wgPageName' ).split( '/' ),
currentUserName = mw.config.get( 'wgUserName' ),
@@ -119,7 +118,7 @@
} else {
self.$end.remove();
if ( self.isEmpty() ) {
- self.emit( 'empty' );
+ self.showEmptyMessage();
}
}
} ).fail( function() {
@@ -156,37 +155,9 @@
}
function init() {
- var $container, userGallery, emptyHandler;
+ var $container, userGallery;
userGallery = new PhotoList().appendTo( '#content_wrapper' );
- if ( currentUserName === userName ) {
- emptyHandler = function() {
- new CarouselOverlay( {
- pages: [
- {
- 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
slide-image', 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
slide-image', 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:
'photo-upload slide-image', id: 3
- }
- ]
- } ).show();
- };
- } else {
- emptyHandler = function() {
- userGallery.showEmptyMessage();
- };
- }
- userGallery.on( 'empty', emptyHandler );
if ( PhotoUploaderButton.isSupported && currentUserName ===
userName ) {
$container = $( '.ctaUploadPhoto' );
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
deleted file mode 100644
index 6e26568..0000000
--- a/javascripts/widgets/carousel.js
+++ /dev/null
@@ -1,57 +0,0 @@
-( function( M, $ ) {
-
- 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 tutorial slideable',
- postRender: function() {
- var self = this, $pages;
- $pages = this.$( '.slide' );
- this.page = 0;
- this.totalPages = $pages.length;
- this.$( 'ul li' ).on( 'click', function() {
- self.page = $( this ).index();
- self.showCurrentPage();
- } );
- this.showCurrentPage();
- this.$( 'button.prev' ).on( 'click', function() {
- self.previous();
- } );
- this.$( 'button.next' ).on( 'click', function() {
- self.next();
- } );
- },
- showCurrentPage: function() {
- 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' );
- if ( this.page > 0 ) {
- this.$( 'button.prev' ).addClass( 'active' );
- }
- if ( this.page < this.totalPages - 1 ) {
- this.$( 'button.next' ).addClass( 'active' );
- }
- },
- next: function() {
- if ( this.page < this.totalPages - 1 ) {
- this.page += 1;
- }
- this.showCurrentPage();
- },
- previous: function() {
- if ( this.page > 0 ) {
- this.page -= 1;
- }
- this.showCurrentPage();
- }
- } );
-
- M.define( 'widgets/carousel', Carousel );
-
-}( mw.mobileFrontend, jQuery ) );
diff --git a/less/common/overlays.less b/less/common/overlays.less
index 634c434..2696b38 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -44,10 +44,6 @@
}
ul {
- li {
- text-align: left;
- }
-
// LearnMoreOverlay
&.informative {
margin: 0 0 1em 16px;
diff --git a/less/specials/images/uploads/chevron_left.png
b/less/modules/images/uploads/chevronLeft.png
similarity index 100%
rename from less/specials/images/uploads/chevron_left.png
rename to less/modules/images/uploads/chevronLeft.png
Binary files differ
diff --git a/less/specials/images/uploads/chevron_right.png
b/less/modules/images/uploads/chevronRight.png
similarity index 100%
rename from less/specials/images/uploads/chevron_right.png
rename to less/modules/images/uploads/chevronRight.png
Binary files differ
diff --git a/less/specials/images/uploads/SplashScreen1.png
b/less/modules/images/uploads/page1.png
similarity index 100%
rename from less/specials/images/uploads/SplashScreen1.png
rename to less/modules/images/uploads/page1.png
Binary files differ
diff --git a/less/specials/images/uploads/SplashScreen2.png
b/less/modules/images/uploads/page2.png
similarity index 100%
rename from less/specials/images/uploads/SplashScreen2.png
rename to less/modules/images/uploads/page2.png
Binary files differ
diff --git a/less/modules/images/tutorials/photos.png
b/less/modules/images/uploads/page3.png
similarity index 100%
rename from less/modules/images/tutorials/photos.png
rename to less/modules/images/uploads/page3.png
Binary files differ
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 92c90e9..23b2cf9 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -1,74 +1,33 @@
@import "../mixins.less";
/* Tutorial overlay styling */
-@colorTutorial: #006398;
-
-// FIXME: Make this global - file inputs are notoriously difficult to style
-// We already use it in several places
-.cloaked {
- input {
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
-}
-
-// FIXME: merge some of this with .carousel
.tutorial {
- padding-left: @contentMarginRight;
- padding-right: @contentMarginRight;
+ padding: 1em @contentMarginLeft;
line-height: 1.4;
- font-size: 0.9em;
- background-color: @colorTutorial;
- color: white;
- height: 100%;
+ font-size: .9em;
+ background: @colorTutorial;
+ color: #fff;
+ text-align: center;
box-shadow: 0 1px 5px 0 rgba(117, 117, 117, .8);
- @imageHeight: 180px;
- .slide {
- text-align: center;
- background-size: auto @imageHeight;
- background-repeat: no-repeat;
- background-position: center -10px;
- padding: 10px 0;
- width: 100%;
-
- p {
- line-height: 1.4;
- margin: 0 0 1em;
- }
-
- // FIXME: exists because of inconsistency in new user uploads
tutorial workflow
- button.actionable,
- button,
- .button {
- // FIXME: without this the cloaked input seems to
interfere making cancel button start upload
- position: relative;
- // use background to override gradient in other buttons
- background: #fff;
- color: @colorTutorial;
- padding: 12px;
- border: none;
- font-weight: bold;
- }
-
- .cancel {
- background: none;
- color: white;
- }
+ p {
+ line-height: 1.4;
+ margin: 0 0 1em;
}
- .photo-upload {
- padding-top: (@imageHeight - 20);
- background-image: url(images/tutorials/photos.png);
+ button,
+ .button {
+ // FIXME: without this the cloaked input seems to interfere
making cancel button start upload
+ position: relative;
+ // use background to override gradient in other buttons
+ background: #fff;
+ color: @colorTutorial;
+ padding: 12px;
+ font-weight: bold;
}
- .editing {
- // The editing tutorial has no image
- padding-top: 20px;
+ .cancel {
+ background: none;
+ color: #fff;
}
-
}
diff --git a/less/modules/uploads/UploadTutorial.less
b/less/modules/uploads/UploadTutorial.less
new file mode 100644
index 0000000..a00729b
--- /dev/null
+++ b/less/modules/uploads/UploadTutorial.less
@@ -0,0 +1,122 @@
+@import "../../mixins.less";
+
+// FIXME: Make this global - file inputs are notoriously difficult to style
+// We already use it in several places
+.cloaked {
+ input {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+}
+
+.carousel {
+ @buttonWidth: 40px;
+
+ position: relative;
+ .box-sizing(border-box);
+ overflow: hidden;
+
+ > button {
+ text-indent: -9999px;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: @buttonWidth;
+ bottom: 0;
+ z-index: 4;
+ background: 50% 50% no-repeat;
+ .background-size( auto, 20px );
+ // remove ugly outline
+ outline: none;
+
+ &.prev {
+ left: 0;
+ background-image:
url(../images/uploads/chevronLeft.png);
+ }
+
+ &.next {
+ right: 0;
+ background-image:
url(../images/uploads/chevronRight.png);
+ }
+ }
+
+ .slide {
+ @imageHeight: 180px;
+
+ position: absolute;
+ left: 0;
+ right: 0;
+ background: 50% 0 no-repeat;
+ .background-size(auto, @imageHeight);
+ display: none;
+ padding: 0 @buttonWidth;
+
+ &.active {
+ display: block;
+ }
+
+ strong {
+ display: block;
+ font-size: 1.1em;
+ margin: 0 0 1em;
+ }
+
+ &.slide-image {
+ padding-top: @imageHeight;
+ }
+
+ &:nth-child(1) {
+ background-image: url(../images/uploads/page1.png);
+ }
+
+ &:nth-child(2) {
+ background-image: url(../images/uploads/page2.png);
+ }
+
+ &:nth-child(3) {
+ background-image: url(../images/uploads/page3.png);
+ }
+ }
+}
+
+.animations {
+ .carousel {
+ .slide {
+ display: block;
+ .transform( translate3d(-100%, 0, 0) );
+ .transition-transform( .5s );
+
+ &.active {
+ .transform( none );
+ }
+
+ &.active ~ .slide {
+ .transform( translate3d(100%, 0, 0) );
+ }
+ }
+ }
+}
+
+html[dir="rtl"] .carousel > button {
+ .transform(rotate(180deg));
+}
+
+html[dir="rtl"].animations {
+ .carousel {
+ .slide {
+ .transform( translate3d(100%, 0, 0) );
+
+ &.active {
+ .transform( none );
+ }
+
+ &.active ~ .slide {
+ .transform( translate3d(-100%, 0, 0) );
+ }
+ }
+ }
+}
diff --git a/less/specials/images/uploads/Tour_1.png
b/less/specials/images/uploads/Tour_1.png
deleted file mode 100644
index 3c5dc87..0000000
--- a/less/specials/images/uploads/Tour_1.png
+++ /dev/null
Binary files differ
diff --git a/less/specials/images/uploads/Tour_2.png
b/less/specials/images/uploads/Tour_2.png
deleted file mode 100644
index 941a412..0000000
--- a/less/specials/images/uploads/Tour_2.png
+++ /dev/null
Binary files differ
diff --git a/less/specials/images/uploads/Tour_3.png
b/less/specials/images/uploads/Tour_3.png
deleted file mode 100644
index 0f207ea..0000000
--- a/less/specials/images/uploads/Tour_3.png
+++ /dev/null
Binary files differ
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 7d8770c..f6ff83a 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -1,75 +1,15 @@
@import "../mixins.less";
-/* carousel css */
-.overlay-carousel {
- height: 100%;
-}
+ul.mobileUserGallery {
+ margin: 20px @contentMarginRight 0 @contentMarginLeft;
-// FIXME: merge some of this with .tutorial
-.carousel {
- @buttonPadding: 4px;
+ li {
+ text-align: center;
+ padding-bottom: 20px;
- position: relative;
- .box-sizing( border-box );
-
- > button {
- padding: 0;
- visibility: hidden;
- border: none;
- text-indent: -9999px;
- overflow: hidden;
- position: absolute;
- top: 0;
- width: @searchBarPaddingLeft;
- bottom: 0;
-
- &.prev {
- left: @buttonPadding;
- background: url(images/uploads/chevron_left.png) 20%
center no-repeat;
- .background-size( auto, 20px );
- }
-
- &.next {
- right: @buttonPadding;
- background: url(images/uploads/chevron_right.png) 80%
center no-repeat;
- .background-size( auto, 20px );
- }
-
- &.active {
- visibility: visible;
- }
- }
-
- .slide {
- left: 100%;
- visibility: hidden;
-
- &.active {
- visibility: visible;
- left: @contentMarginLeft;
- }
-
- p, strong {
- line-height: 1.4;
- }
-
- strong {
- display: block;
- font-size: 1.1em;
- margin: 0 26px 16px;
- }
-
- &.slide-image {
- padding-top: 146px;
- }
-
- // 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);
+ p { // description
+ color: #565656;
+ line-height: 1.2;
}
}
}
@@ -85,56 +25,5 @@
font-size: 1.25em;
margin: 0 0 .5em;
text-align: center;
- }
-}
-
-// Make things slide!
-.slideable {
- width: 100%;
- overflow: hidden;
- .slider {
- position: absolute;
- &.slider-left {
- left: -100%;
- }
- &.active {
- left: 0;
- position: relative;
- }
- &.slider-right {
- left: 100%;
- }
- }
-
-}
-
-.animations {
- .slideable {
- .slider {
- left: 0;
- .transition( .5s );
-
- &.slider-left {
- .transform( translate3d(-100%, 0, 0) )
- }
-
- &.slider-right {
- .transform( translate3d(100%, 0, 0) )
- }
- }
- }
-}
-
-ul.mobileUserGallery {
- margin: 20px @contentMarginRight 0 @contentMarginLeft;
-
- li {
- text-align: center;
- padding-bottom: 20px;
-
- p { // description
- color: #565656;
- line-height: 1.2;
- }
}
}
diff --git a/less/variables.less b/less/variables.less
index 1469c20..1ca1d09 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -21,6 +21,7 @@
@redBase : #CC0000;
@overlayContentBackground: white;
@mainMenuBackgroundColor: #4E4E4E;
+@colorTutorial: #006398;
@overlayHeadingIndent: 0.4em;
@ribbonopencolor:#4B7DCE;
diff --git a/templates/modules/tutorials/PageActionOverlay.html
b/templates/modules/tutorials/PageActionOverlay.html
index 3805b24..d3b290e 100644
--- a/templates/modules/tutorials/PageActionOverlay.html
+++ b/templates/modules/tutorials/PageActionOverlay.html
@@ -1,9 +1,7 @@
<div class="tutorial">
- <div class="{{className}}">
- <p>{{summary}}</p>
- <div class="button-bar-centered">
- <button class="cancel inline">{{cancelMsg}}</button>
- <div class="button actionable
cloaked">{{confirmMsg}}</div>
- </div>
+ <p>{{summary}}</p>
+ <div class="button-bar-centered">
+ <button class="cancel inline">{{cancelMsg}}</button>
+ <button class="actionable">{{confirmMsg}}</button>
</div>
</div>
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
deleted file mode 100644
index ee1cdab..0000000
--- a/templates/specials/uploads/carousel.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<button class='prev'></button>
-{{#pages}}
-<div class="slide {{className}} slider">
- <strong>{{caption}}</strong>
- <p>{{text}}</p>
- {{#cancel}}<button class="cancel
actionable">{{cancel}}</button>{{/cancel}}
-</div>
-{{/pages}}
-<button class='next'></button>
diff --git a/templates/uploads/UploadTutorial.html
b/templates/uploads/UploadTutorial.html
new file mode 100644
index 0000000..f8d3504
--- /dev/null
+++ b/templates/uploads/UploadTutorial.html
@@ -0,0 +1,15 @@
+<button class="prev"></button>
+<ul>
+ {{#pages}}
+ <li class="slide slide-image">
+ <strong>{{caption}}</strong>
+ <p>{{text}}</p>
+ {{#button}}
+ <div class="button cloaked">
+ {{button}}<input name="file" type="file">
+ </div>
+ {{/button}}
+ </li>
+ {{/pages}}
+</ul>
+<button class="next"></button>
--
To view, visit https://gerrit.wikimedia.org/r/93014
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I53d72eb1641e1b253ef5b8bb3832918fc654070a
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
