JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/68124
Change subject: Uploads tutorial CSS fixes
......................................................................
Uploads tutorial CSS fixes
Make sliding smoother by using translate3d, small fixes to line-height,
make got it button centered in Android.
Change-Id: I0208d0b4c223b10e31dbe4e520fcf2c035ecb6a0
---
M less/mf-mixins.less
M less/specials/uploads.less
M stylesheets/specials/uploads.css
3 files changed, 59 insertions(+), 27 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/24/68124/1
diff --git a/less/mf-mixins.less b/less/mf-mixins.less
index 0e858bf..72b90c2 100644
--- a/less/mf-mixins.less
+++ b/less/mf-mixins.less
@@ -1,9 +1,5 @@
@import "mf-variables.less";
-.background( @imageOrColor, @repeat: no-repeat, @position: center center ) {
- background: @imageOrColor @position @repeat;
-}
-
.watchlist-heading() {
font: inherit;
margin: 0;
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 5472f3a..d075115 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -26,18 +26,19 @@
overflow: hidden;
position: absolute;
top: 0;
- width: @contentMarginLeft;
+ width: @searchBarPaddingLeft;
bottom: @indicatorHeight + @indicatorPadding;
- .background( url(images/uploads/chevron_left.png), no-repeat,
center 8px );
- background-size: auto 20px;
&.prev {
left: @buttonPadding;
+ background: url(images/uploads/chevron_left.png) 20%
8px no-repeat;
+ .background-size( auto, 20px );
}
&.next {
right: @buttonPadding;
- background-image: url(images/uploads/chevron_right.png);
+ background: url(images/uploads/chevron_right.png) 80%
8px no-repeat;
+ .background-size( auto, 20px );
}
&.active {
@@ -46,8 +47,6 @@
}
button.cancel {
- display: block;
- margin: 10px auto 0 auto;
color: #006398;
padding: 12px;
border: none;
@@ -60,7 +59,6 @@
.page {
padding: @imageSize + 32px 0 0 0;
text-align: center;
- line-height: 1.3;
background-size: auto @imageSize;
background-repeat: no-repeat;
background-position: center 24px;
@@ -76,9 +74,14 @@
left: @contentMarginLeft;
}
+ p, strong {
+ line-height: 1.5;
+ }
+
strong {
+ display: block;
font-size: 1.1em;
- margin: 32px 26px 8px;
+ margin: 32px 26px 16px;
}
p {
@@ -113,7 +116,7 @@
overflow: hidden;
width: 10px;
height: @indicatorHeight;
- .background( url(images/uploads/Indicator_default.png)
);
+ background: url(images/uploads/Indicator_default.png)
50% 50% no-repeat;
&.active {
background-image:
url(images/uploads/Indicator_active.png);
@@ -155,8 +158,19 @@
}
.animations {
- .slider {
- .transition( @property: 'left, right', @duration: .5s,
@timingFunction: ease );
+ .slideable {
+ .slider {
+ left: 0;
+ .transition( @duration: .5s );
+
+ &.slider-left {
+ .transform( translate3d(-100%, 0, 0) )
+ }
+
+ &.slider-right {
+ .transform( translate3d(100%, 0, 0) )
+ }
+ }
}
}
diff --git a/stylesheets/specials/uploads.css b/stylesheets/specials/uploads.css
index 0f75386..5abf576 100644
--- a/stylesheets/specials/uploads.css
+++ b/stylesheets/specials/uploads.css
@@ -22,24 +22,33 @@
overflow: hidden;
position: absolute;
top: 0;
- width: 23px;
+ width: 40px;
bottom: 14px;
- background: url(images/uploads/chevron_left.png) center 8px no-repeat;
- background-size: auto 20px;
}
.carousel > button.prev {
left: 4px;
+ background: url(images/uploads/chevron_left.png) 20% 8px no-repeat;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: auto 20px;
+ -o-background-size: auto 20px;
+ -webkit-background-size: auto 20px;
+ background-size: auto 20px;
}
.carousel > button.next {
right: 4px;
- background-image: url(images/uploads/chevron_right.png);
+ background: url(images/uploads/chevron_right.png) 80% 8px no-repeat;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: auto 20px;
+ -o-background-size: auto 20px;
+ -webkit-background-size: auto 20px;
+ background-size: auto 20px;
}
.carousel > button.active {
visibility: visible;
}
.carousel button.cancel {
- display: block;
- margin: 10px auto 0 auto;
color: #006398;
padding: 12px;
border: none;
@@ -52,7 +61,6 @@
.carousel .page {
padding: 162px 0 0 0;
text-align: center;
- line-height: 1.3;
background-size: auto 130px;
background-repeat: no-repeat;
background-position: center 24px;
@@ -67,9 +75,14 @@
visibility: visible;
left: 23px;
}
+.carousel .page p,
.carousel .page strong {
+ line-height: 1.5;
+}
+.carousel .page strong {
+ display: block;
font-size: 1.1em;
- margin: 32px 26px 8px;
+ margin: 32px 26px 16px;
}
.carousel .page p {
font-size: 0.9em;
@@ -98,7 +111,7 @@
overflow: hidden;
width: 10px;
height: 10px;
- background: url(images/uploads/Indicator_default.png) center center
no-repeat;
+ background: url(images/uploads/Indicator_default.png) 50% 50% no-repeat;
}
.carousel ul li.active {
background-image: url(images/uploads/Indicator_active.png);
@@ -130,15 +143,24 @@
.slideable .slider.slider-right {
left: 100%;
}
-.animations .slider {
+.animations .slideable .slider {
+ left: 0;
-webkit-backface-visibility: hidden;
- -webkit-transition-property: 'left, right';
- transition-property: 'left, right';
+ -webkit-transition-property: all;
+ transition-property: all;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
+.animations .slideable .slider.slider-left {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+}
+.animations .slideable .slider.slider-right {
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+}
ul.mobileUserGallery {
list-style: none;
margin: 20px 23px 0 23px;
--
To view, visit https://gerrit.wikimedia.org/r/68124
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0208d0b4c223b10e31dbe4e520fcf2c035ecb6a0
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
