jenkins-bot has submitted this change and it was merged.
Change subject: Beta: Make panels of uploads tutorial slide in and out
......................................................................
Beta: Make panels of uploads tutorial slide in and out
Limited to beta due to animations being beta only
Change-Id: I5f4be2ee5405ecc1d26e3b492fcfe8ecef3714d2
---
M javascripts/widgets/carousel.js
M less/specials/uploads.less
M stylesheets/specials/uploads.css
M templates/specials/uploads/carousel.html
M tests/javascripts/widgets/test_carousel.js
5 files changed, 72 insertions(+), 9 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
index 7380648..240be95 100644
--- a/javascripts/widgets/carousel.js
+++ b/javascripts/widgets/carousel.js
@@ -4,7 +4,7 @@
Carousel = View.extend( {
template: M.template.get( 'specials/uploads/carousel' ),
- className: 'carousel',
+ className: 'carousel slideable',
postRender: function() {
var self = this, $pages;
$pages = this.$( '.page' );
@@ -23,8 +23,10 @@
} );
},
showCurrentPage: function() {
- this.$( '.page' ).removeClass( 'active' );
+ 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.$( 'ul li' ).removeClass( 'active' ).
eq( this.page ).addClass( 'active' );
this.$( 'button' ).removeClass( 'active' );
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 7d736d9..5472f3a 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -14,6 +14,9 @@
background-color: #006398;
color: white;
height: 100%;
+ padding-left: @contentMarginRight;
+ padding-right: @contentMarginRight;
+ .box-sizing( border-box );
> button {
padding: 0;
@@ -55,7 +58,7 @@
@imageSize: 130px;
.page {
- padding: @imageSize + 32px @contentMarginRight + @buttonPadding
0 @contentMarginLeft + @buttonPadding;
+ padding: @imageSize + 32px 0 0 0;
text-align: center;
line-height: 1.3;
background-size: auto @imageSize;
@@ -64,7 +67,7 @@
top: 10px;
left: 100%;
bottom: 0;
- right: @contentMarginLeft;
+ width: 100%;
position: absolute;
visibility: hidden;
@@ -131,6 +134,32 @@
}
}
+// 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 {
+ .slider {
+ .transition( @property: 'left, right', @duration: .5s,
@timingFunction: ease );
+ }
+}
+
ul.mobileUserGallery {
// FIXME: this shouldn't be needed with reset.css
list-style: none;
diff --git a/stylesheets/specials/uploads.css b/stylesheets/specials/uploads.css
index 582bb80..0f75386 100644
--- a/stylesheets/specials/uploads.css
+++ b/stylesheets/specials/uploads.css
@@ -7,6 +7,12 @@
background-color: #006398;
color: white;
height: 100%;
+ padding-left: 23px;
+ padding-right: 23px;
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
.carousel > button {
padding: 0;
@@ -44,7 +50,7 @@
border-radius: 0;
}
.carousel .page {
- padding: 162px 27px 0 27px;
+ padding: 162px 0 0 0;
text-align: center;
line-height: 1.3;
background-size: auto 130px;
@@ -53,7 +59,7 @@
top: 10px;
left: 100%;
bottom: 0;
- right: 23px;
+ width: 100%;
position: absolute;
visibility: hidden;
}
@@ -107,6 +113,32 @@
margin: 0 0 .5em;
text-align: center;
}
+.slideable {
+ width: 100%;
+ overflow: hidden;
+}
+.slideable .slider {
+ position: absolute;
+}
+.slideable .slider.slider-left {
+ left: -100%;
+}
+.slideable .slider.active {
+ left: 0;
+ position: relative;
+}
+.slideable .slider.slider-right {
+ left: 100%;
+}
+.animations .slider {
+ -webkit-backface-visibility: hidden;
+ -webkit-transition-property: 'left, right';
+ transition-property: 'left, right';
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ -webkit-transition-timing-function: ease;
+ transition-timing-function: ease;
+}
ul.mobileUserGallery {
list-style: none;
margin: 20px 23px 0 23px;
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
index fe4f3a2..7d1bc70 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}}">
+<div class="page {{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 e454014..ae62a4b 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 ).css( 'display' ),
'none', 'First page is hidden' );
- strictEqual( this.c.$( '.page' ).eq( 1 ).css( 'display' ),
'block', 'Second page is visible' );
+ 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' );
} );
}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/68014
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5f4be2ee5405ecc1d26e3b492fcfe8ecef3714d2
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
