Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/68014
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, 90 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/14/68014/1
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
index 2296c30..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' ).hide();
- this.$( '.page' ).eq( this.page ).show();
+ 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 84d7a9b..9a207d7 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,14 +58,23 @@
@imageSize: 130px;
.page {
- padding: @imageSize + 32px @contentMarginRight + @buttonPadding
0 @contentMarginLeft + @buttonPadding;
+ padding: @imageSize + 32px 0 0 0;
text-align: center;
line-height: 1.3;
font-family: @fontFamilyHeading;
background-size: auto @imageSize;
background-repeat: no-repeat;
background-position: center 24px;
- min-height: 70px;
+ top: 0;
+ left: 100%;
+ bottom: 0;
+ width: 100%;
+ position: absolute;
+ visibility: hidden;
+
+ &.active {
+ visibility: visible;
+ }
.caption {
font-weight: bold;
@@ -121,6 +133,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 272768a..29dbfbb 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,14 +50,22 @@
border-radius: 0;
}
.carousel .page {
- padding: 162px 27px 0 27px;
+ padding: 162px 0 0 0;
text-align: center;
line-height: 1.3;
font-family: Georgia, serif;
background-size: auto 130px;
background-repeat: no-repeat;
background-position: center 24px;
- min-height: 70px;
+ top: 0;
+ left: 100%;
+ bottom: 0;
+ width: 100%;
+ position: absolute;
+ visibility: hidden;
+}
+.carousel .page.active {
+ visibility: visible;
}
.carousel .page .caption {
font-weight: bold;
@@ -98,6 +112,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 4c55575..79060f0 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">
<p class="caption">{{caption}}</p>
<p class="further-info">{{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: newchange
Gerrit-Change-Id: I5f4be2ee5405ecc1d26e3b492fcfe8ecef3714d2
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
