jenkins-bot has submitted this change and it was merged.
Change subject: Search boxes fixes
......................................................................
Search boxes fixes
* Remove @headerTitlePaddingH as the overlay title horizontal padding
has been removed;
* Change the content top border and the overlay header bottom
border colors to match the header chrome color;
* Change the header chrome color to #f2f2f2;
* Reserve space equal to the icon gutter width to the right of the
search bar if the secondary header icon is missing. Otherwise,
the search bar would touch the right border of the page on small
screens;
* Remove the space to the left of the search bar since the icon to
the left of it already has a 1em gutter around it.
* Add space equal to the icon gutter width to the right of the overlay
title if the title is the last element of the overlay header. This
will make the title have equal horizontal padding on both sides
since there is always a close/back icon to the left of the title;
* Regression fix: all overlay headers were added a background color
in I0c8ff9941dd7a78e416d8067b8ab5e1b8e018aa9. Only add this color
to the search overlay to be consistent with the page header. Other
overlay headers will get their white backgrounds back;
* Adjust the search bar icon vertical position;
* Add box shadow to the search box.
The above fixes are Nirzar's suggestions - design approved.
Bug: T129955
Change-Id: Idb8108cfe4cf775baac516dacccb7b9737bc518c
---
M minerva.less/minerva.variables.less
M resources/mobile.overlays/Overlay.hogan
M resources/mobile.overlays/Overlay.less
M resources/mobile.search/SearchOverlay.js
M resources/mobile.search/SearchOverlay.less
M resources/skins.minerva.base.styles/ui.less
M resources/skins.minerva.beta.styles/ui.less
7 files changed, 36 insertions(+), 17 deletions(-)
Approvals:
VolkerE: Looks good to me, but someone else must approve
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/minerva.less/minerva.variables.less
b/minerva.less/minerva.variables.less
index 51ec505..9a2b957 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -24,7 +24,6 @@
@headerBorderBottom: #e3e3e3;
// new header
-@headerTitlePaddingH: .5em;
@headerTitleFontSize: 1em;
@headerHeight: 3.35em;
@@ -42,7 +41,8 @@
@watchStarSize: 22px;
// colors
-@chromeColor: #eaecf0;
+@chromeColor: #f2f2f2;
+@headerAndContentSeparatorColor: @colorGray13;
@semiTransparent: rgba(255, 255, 255, .8);
// note this is also used for red links
@redBase: @colorErrorText;
diff --git a/resources/mobile.overlays/Overlay.hogan
b/resources/mobile.overlays/Overlay.hogan
index fb62483..3d75c8d 100644
--- a/resources/mobile.overlays/Overlay.hogan
+++ b/resources/mobile.overlays/Overlay.hogan
@@ -1,4 +1,4 @@
-<div class="overlay-header-container {{#fixedHeader}}
position-fixed{{/fixedHeader}}">
+<div class="overlay-header-container{{#fixedHeader}}
position-fixed{{/fixedHeader}}{{#headerChrome}} header-chrome{{/headerChrome}}">
<div class="overlay-header">
{{>header}}
</div>
diff --git a/resources/mobile.overlays/Overlay.less
b/resources/mobile.overlays/Overlay.less
index 3a2b7f3..ca18bc6 100644
--- a/resources/mobile.overlays/Overlay.less
+++ b/resources/mobile.overlays/Overlay.less
@@ -203,10 +203,6 @@
width: 100%;
}
- .overlay-title {
- padding: .15em @headerTitlePaddingH 0;
- }
-
.overlay-action {
a,
button {
@@ -308,6 +304,10 @@
.overlay-header-container {
top: 0;
border-bottom: 1px solid @grayLight;
+
+ &.header-chrome {
+ background-color: @chromeColor;
+ }
}
.overlay-footer-container {
@@ -375,6 +375,12 @@
}
}
+.beta {
+ .overlay-header-container {
+ border-bottom-color: @headerAndContentSeparatorColor;
+ }
+}
+
@media all and (min-width: @deviceWidthTablet) {
.overlay {
.panel {
diff --git a/resources/mobile.search/SearchOverlay.js
b/resources/mobile.search/SearchOverlay.js
index 0d0e18e..acbbaa8 100644
--- a/resources/mobile.search/SearchOverlay.js
+++ b/resources/mobile.search/SearchOverlay.js
@@ -82,7 +82,8 @@
} ).options,
prompt: mw.msg(
'mobile-frontend-search-feedback-prompt' )
},
- isBeta: context.isBetaGroupMember()
+ isBeta: context.isBetaGroupMember(),
+ headerChrome: true
} ),
/**
* @inheritdoc
diff --git a/resources/mobile.search/SearchOverlay.less
b/resources/mobile.search/SearchOverlay.less
index 115b4f7..946ba36 100644
--- a/resources/mobile.search/SearchOverlay.less
+++ b/resources/mobile.search/SearchOverlay.less
@@ -42,7 +42,7 @@
cursor: pointer;
.caption {
- padding: 1em @headerTitlePaddingH;
+ padding: 1em 0;
}
// FIXME: This is not a overlay-header so please find a more
meaningful class name
@@ -57,7 +57,7 @@
// Since search results only contain one line, shrink the space
taken up by the thumbnails
li {
- padding-left: @headerHeight + @headerTitlePaddingH;
+ padding-left: @headerHeight;
.list-thumb {
width: @headerHeight;
@@ -136,10 +136,6 @@
// FIXME: T134894
.beta {
- .overlay-header-container {
- background-color: @chromeColor;
- }
-
.search-overlay {
.overlay-header {
background-color: transparent;
@@ -158,7 +154,7 @@
.clear {
position: absolute;
top: 0;
- right: 0;
+ right: @iconGutterWidth;
}
}
}
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index 7e78d93..8aa2438 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -77,7 +77,6 @@
// Search
> form {
- padding: .15em @headerTitlePaddingH 0;
width: auto;
vertical-align: middle;
}
@@ -87,6 +86,18 @@
}
}
+.header > form,
+.overlay-header .overlay-title {
+ padding: .15em 0;
+
+ &:last-child {
+ // Reserve space to the right in case the search form in the
header or
+ // overlay title in the overlay header is the last element. Use
@iconGutterWidth
+ // because there is a hamburger or close/back icon next to this
element and
+ // the space between them is exactly that.
+ padding-right: @iconGutterWidth;
+ }
+}
// Make search input more visible for users on small screens.
// Opera Mini doesn't support placeholders.
diff --git a/resources/skins.minerva.beta.styles/ui.less
b/resources/skins.minerva.beta.styles/ui.less
index 3d0f459..c00ed0a 100644
--- a/resources/skins.minerva.beta.styles/ui.less
+++ b/resources/skins.minerva.beta.styles/ui.less
@@ -1,6 +1,10 @@
@import "minerva.variables";
@import "minerva.mixins";
+#content {
+ border-top-color: @headerAndContentSeparatorColor;
+}
+
.header-container {
background-color: @chromeColor;
}
@@ -11,10 +15,11 @@
padding: .5em 28px;
// FIXME: share this file with the similar file in
mobile.languages.structured
.background-image-svg( 'magnifying-glass.svg', '' );
- background-position: 5px center;
+ background-position: 7px center;
background-repeat: no-repeat;
background-size: 20px 20px;
border-radius: @borderRadius;
+ box-shadow: 0 1px 1px rgba( 0, 0, 0, .05 );
}
}
--
To view, visit https://gerrit.wikimedia.org/r/288193
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Idb8108cfe4cf775baac516dacccb7b9737bc518c
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
