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 <jgon...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits