Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/293884
Change subject: Make the search overlay not shift by 1px when a search query is
entered
......................................................................
Make the search overlay not shift by 1px when a search query is entered
Varying absolute positions were introduced in
If6149cb5b8236c6d701a8441ac85360ba06240b0.
Although those changes fixed the problem at hand, there always would be empty
space
above the search overlay header when a banner was present. That space would
go away once the user started typing so as to make more room for a virtual
keyboard.
When no banner is present though this created a mismatch as there was -1px
margin top
on the page header introduced to hide the border top. The overlay however still
used
the margin top 0.
The patch removes the custom JS computed values and uses the single shared -1px
value
for both the page header and the overlay header regardless of whether there is
text
in the search field.
Bug: T134955
Change-Id: I7462d593bf61f6dc990bb799dcadb45c59fd5b9a
---
M minerva.less/minerva.variables.less
M resources/mobile.overlays/Overlay.less
M resources/mobile.search/SearchOverlay.js
M resources/skins.minerva.base.styles/ui.less
M resources/skins.minerva.tablet.styles/common.less
5 files changed, 3 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/84/293884/1
diff --git a/minerva.less/minerva.variables.less
b/minerva.less/minerva.variables.less
index 992724d..c46b9e5 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -26,6 +26,7 @@
// new header
@headerTitleFontSize: 1em;
@headerHeight: 3.35em;
+@headerMarginTop: -1px; // used to hide the header border top when a banner
is not present
@titleSectionSpacingTop: 20px;
@titleSectionSpacingBottom: 25px;
diff --git a/resources/mobile.overlays/Overlay.less
b/resources/mobile.overlays/Overlay.less
index d1e4bfe..71dfc49 100644
--- a/resources/mobile.overlays/Overlay.less
+++ b/resources/mobile.overlays/Overlay.less
@@ -302,7 +302,7 @@
}
.overlay-header-container {
- top: 0;
+ top: @headerMarginTop;
border-bottom: 1px solid @grayLight;
&.header-chrome {
diff --git a/resources/mobile.search/SearchOverlay.js
b/resources/mobile.search/SearchOverlay.js
index 82f43c6..4210327 100644
--- a/resources/mobile.search/SearchOverlay.js
+++ b/resources/mobile.search/SearchOverlay.js
@@ -136,7 +136,6 @@
* are displayed.)
*/
onInputInput: function () {
- this.$( '.overlay-header-container' ).css( 'top', 0 );
this.performSearch();
this.$clear.toggle( this.$input.val() !== '' );
},
@@ -236,10 +235,6 @@
postRender: function () {
var self = this;
- // Make sure search overlay lines up with search header
when the overlay is
- // rendered. This is necessary to prevent bug 67140
while sitenotices are
- // displayed.
- this.$( '.overlay-header-container' ).css( 'top', $(
'.header' ).offset().top );
// No search happening by default
this.$( '.spinner' ).hide();
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index 9e3fd72..fa760ce 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -54,7 +54,7 @@
white-space: nowrap;
// When banners are present we want to easily distinguish between them
and the header so add border
border-top: 1px solid @colorGrayLight;
- margin-top: -1px;
+ margin-top: @headerMarginTop;
// button
> div {
diff --git a/resources/skins.minerva.tablet.styles/common.less
b/resources/skins.minerva.tablet.styles/common.less
index 41476a3..dec430e 100644
--- a/resources/skins.minerva.tablet.styles/common.less
+++ b/resources/skins.minerva.tablet.styles/common.less
@@ -164,7 +164,6 @@
}
.header {
- margin-top: -1px;
// Make sure the main menu and secondary button icon images are
aligned
// with the content.
max-width: @contentMaxWidthTablet + 2 * @iconGutterWidth;
--
To view, visit https://gerrit.wikimedia.org/r/293884
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7462d593bf61f6dc990bb799dcadb45c59fd5b9a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
