jenkins-bot has submitted this change and it was merged.
Change subject: Bug 49462: Position fixed cleanup
......................................................................
Bug 49462: Position fixed cleanup
Only set position fixed once on position-fixed elements
In overlay to disable position fixed on the bar when textarea is
focused simply remove the position fixed class
Update templates which are missing position-fixed class
Change-Id: I43068c06d8d4ba18e5ab76f9341b6bafa3645177
---
M javascripts/modules/editor/EditorOverlay.js
M less/common/mf-common.less
M less/common/notifications.less
M less/common/overlays.less
M less/modules/editor.less
M less/specials/mobilediff.less
M stylesheets/common/mf-common.css
M stylesheets/common/notifications.css
M stylesheets/common/overlays.css
M stylesheets/modules/editor.css
M stylesheets/specials/mobilediff.css
M templates/overlays/editPreview.html
M templates/overlays/editor.html
M templates/overlays/talkSectionAdd.html
M templates/photoUploadPreview.html
15 files changed, 37 insertions(+), 35 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index dc71101..a40d1d3 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -95,10 +95,10 @@
if ( ( /ipad|iphone/i ).test( navigator.userAgent ) ) {
this.$content.
on( 'focus', function() {
- self.$( '.buttonBar'
).addClass( 'unpinned' );
+ self.$( '.buttonBar'
).removeClass( 'position-fixed' );
} ).
on( 'blur', function() {
- self.$( '.buttonBar'
).removeClass( 'unpinned' );
+ self.$( '.buttonBar'
).addClass( 'position-fixed' );
} );
}
diff --git a/less/common/mf-common.less b/less/common/mf-common.less
index 4efebdb..af3a6ee 100644
--- a/less/common/mf-common.less
+++ b/less/common/mf-common.less
@@ -266,3 +266,13 @@
.client-js .jsonly {
display: block;
}
+
+.supportsPositionFixed {
+ .position-fixed {
+ position: fixed;
+ // workaround for:
+ // http://code.google.com/p/chromium/issues/detail?id=20574
+ // (otherwise hidden drawer causes .buttonBar to render
incorrectly)
+ .transform( translate3d(0,0,0) );
+ }
+}
diff --git a/less/common/notifications.less b/less/common/notifications.less
index fa26c2a..3d3ea0f 100644
--- a/less/common/notifications.less
+++ b/less/common/notifications.less
@@ -4,7 +4,6 @@
/* Notifications */
#mf-notification,
.drawer {
- position: fixed;
/* -2px to avoid a weird glitch in some browsers where the popup moves
* slightly when scrolling */
bottom: -2px;
diff --git a/less/common/overlays.less b/less/common/overlays.less
index 4bd857c..47bb3ef 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -43,13 +43,6 @@
}
}
-html.animations .mw-mf-overlay .buttonBar {
- // workaround for:
- // http://code.google.com/p/chromium/issues/detail?id=20574
- // (otherwise hidden drawer causes .buttonBar to render incorrectly)
- .transform( translate3d(0,0,0) );
-}
-
.mw-mf-overlay {
display: none;
position: absolute;
@@ -114,7 +107,6 @@
}
.buttonBar {
- position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid #ccc;
diff --git a/less/modules/editor.less b/less/modules/editor.less
index 0262bc7..1d27bcc 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -44,10 +44,6 @@
.buttonBar {
box-shadow: 0 -10px 10px 0 #fff;
-
- &.unpinned {
- position: absolute;
- }
}
.confirm-bar, .saving-bar {
@@ -65,8 +61,13 @@
}
}
-// hide the bar (and give more editing space) when the keyboard is visible
-@media (max-height: 400px) {
+/*
+hide the bar (and give more editing space) when the keyboard is visible
+Note: Although an iPhone in portrait mode has a height of 480px, when you take
into account
+the navigation bar which has height of about 124px the screen shrinks to 356px
+http://www.zingdesign.com/responsive-website-design-cheatsheet1/
+*/
+@media (max-height: 355px) {
.editor-overlay .buttonBar {
position: absolute;
}
diff --git a/less/specials/mobilediff.less b/less/specials/mobilediff.less
index 66dce19..c80f528 100644
--- a/less/specials/mobilediff.less
+++ b/less/specials/mobilediff.less
@@ -175,7 +175,6 @@
.supportsPositionFixed {
#mw-mf-diffview {
#mw-mf-userinfo {
- position: fixed;
bottom: 0;
left: 0;
right: 0;
diff --git a/stylesheets/common/mf-common.css b/stylesheets/common/mf-common.css
index 5ee885a..1affd10 100644
--- a/stylesheets/common/mf-common.css
+++ b/stylesheets/common/mf-common.css
@@ -222,3 +222,8 @@
.client-js .jsonly {
display: block;
}
+.supportsPositionFixed .position-fixed {
+ position: fixed;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
diff --git a/stylesheets/common/notifications.css
b/stylesheets/common/notifications.css
index 7243503..cd0057c 100644
--- a/stylesheets/common/notifications.css
+++ b/stylesheets/common/notifications.css
@@ -1,7 +1,6 @@
/* Notifications */
#mf-notification,
.drawer {
- position: fixed;
/* -2px to avoid a weird glitch in some browsers where the popup moves
* slightly when scrolling */
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index 82a60eb..a5c2ad6 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -31,10 +31,6 @@
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
-html.animations .mw-mf-overlay .buttonBar {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
-}
.mw-mf-overlay {
display: none;
position: absolute;
@@ -114,7 +110,6 @@
margin: auto;
}
.mw-mf-overlay .buttonBar {
- position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid #ccc;
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index d2d81b7..2a66cbb 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -35,9 +35,6 @@
.editor-overlay .buttonBar {
box-shadow: 0 -10px 10px 0 #ffffff;
}
-.editor-overlay .buttonBar.unpinned {
- position: absolute;
-}
.editor-overlay .confirm-bar,
.editor-overlay .saving-bar {
display: none;
@@ -55,7 +52,13 @@
.editor-overlay .saving-bar p:first-child {
margin: 18px 16px 0;
}
-@media (max-height: 400px) {
+/*
+hide the bar (and give more editing space) when the keyboard is visible
+Note: Although an iPhone in portrait mode has a height of 480px, when you take
into account
+the navigation bar which has height of about 124px the screen shrinks to 356px
+http://www.zingdesign.com/responsive-website-design-cheatsheet1/
+*/
+@media (max-height: 355px) {
.editor-overlay .buttonBar {
position: absolute;
}
diff --git a/stylesheets/specials/mobilediff.css
b/stylesheets/specials/mobilediff.css
index 0af29ed..5ebf31a 100644
--- a/stylesheets/specials/mobilediff.css
+++ b/stylesheets/specials/mobilediff.css
@@ -157,7 +157,6 @@
margin-top: 8px;
}
.supportsPositionFixed #mw-mf-diffview #mw-mf-userinfo {
- position: fixed;
bottom: 0;
left: 0;
right: 0;
diff --git a/templates/overlays/editPreview.html
b/templates/overlays/editPreview.html
index 5fc9ac4..fe3a736 100644
--- a/templates/overlays/editPreview.html
+++ b/templates/overlays/editPreview.html
@@ -5,6 +5,6 @@
<div class="content">
<div class="spinner loading"></div>
</div>
-<div class="buttonBar initial-bar">
+<div class="position-fixed buttonBar initial-bar">
<button class="cancel">{{closeMsg}}</button>
</div>
diff --git a/templates/overlays/editor.html b/templates/overlays/editor.html
index ce92a16..98ed2be 100644
--- a/templates/overlays/editor.html
+++ b/templates/overlays/editor.html
@@ -7,18 +7,18 @@
</div>
<div class="spinner loading"></div>
<textarea cols="40" rows="10"></textarea>
-<div class="buttonBar initial-bar">
+<div class="position-fixed buttonBar initial-bar">
<button class="cancel">{{cancelMsg}}</button>
<button class="preview">{{previewMsg}}</button>
<button class="save" disabled>{{saveMsg}}</button>
</div>
-<div class="buttonBar confirm-bar">
+<div class="position-fixed buttonBar confirm-bar">
<p class="count"></p>
<p>{{{licenseMsg}}}</p>
<button class="cancel">{{cancelMsg}}</button>
<button class="preview">{{previewMsg}}</button>
<button class="confirm-save">{{confirmMsg}}</button>
</div>
-<div class="buttonBar saving-bar loading">
+<div class="position-fixed buttonBar saving-bar loading">
<p>{{waitMsg}}</p>
</div>
diff --git a/templates/overlays/talkSectionAdd.html
b/templates/overlays/talkSectionAdd.html
index 3556e95..f8b35b7 100644
--- a/templates/overlays/talkSectionAdd.html
+++ b/templates/overlays/talkSectionAdd.html
@@ -8,7 +8,7 @@
<h3><input type="text" class="search"
placeholder="{{topicTitlePlaceHolder}}"></h3>
<textarea cols="40" rows="10"
placeholder="{{topicContentPlaceHolder}}"></textarea>
</div>
-<div class="buttonBar confirm-bar">
+<div class="position-fixed buttonBar confirm-bar">
<p class="count"></p>
<p>{{{licenseMsg}}}</p>
<button class="cancel">{{cancelMsg}}</button>
diff --git a/templates/photoUploadPreview.html
b/templates/photoUploadPreview.html
index c5fdbb6..5508c60 100644
--- a/templates/photoUploadPreview.html
+++ b/templates/photoUploadPreview.html
@@ -4,7 +4,7 @@
<textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
<div class="license">{{{license}}}</div>
</div>
-<div class="buttonBar position-fixed">
+<div class="position-fixed buttonBar">
<button class="cancel">{{cancelButton}}</button>
<button class="submit" disabled>{{submitButton}}</button>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/68597
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I43068c06d8d4ba18e5ab76f9341b6bafa3645177
Gerrit-PatchSet: 1
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
