Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/330381 )
Change subject: Search input shown on tablet resolutions
......................................................................
Search input shown on tablet resolutions
Non-Js browser test has been re-enabled
Bug: T152458
Change-Id: I55c93e81dde786622a17488bbcb0e81b97dec732
---
M includes/skins/MinervaTemplate.php
M includes/skins/minerva.mustache
M resources/skins.minerva.base.styles/ui.less
M resources/skins.minerva.tablet.styles/common.less
M tests/browser/features/no_javascript_site.feature
5 files changed, 37 insertions(+), 50 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/81/330381/1
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index a4d7e17..5a26001 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -279,9 +279,10 @@
'banners' => $data['banners'],
'wgScript' => $data['wgScript'],
'isAnon' => $data['username'] === null,
+ 'search' => $data['search'],
'headelement' => $data[ 'headelement' ],
'menuButton' => $data['menuButton'],
- 'headinghtml' => $data['site-heading-html'],
+ 'headinghtml' => $data['footer-site-heading-html'],
'searchButton' => Html::element( 'a', [
'href' => SpecialPage::getTitleFor( 'Search'
)->getLocalURL(),
'id' => 'searchIcon',
diff --git a/includes/skins/minerva.mustache b/includes/skins/minerva.mustache
index 4866084..e2ee020 100644
--- a/includes/skins/minerva.mustache
+++ b/includes/skins/minerva.mustache
@@ -12,7 +12,12 @@
<form class="header" action="{{wgScript}}">
<div>{{{menuButton}}}</div>
<div class="main">
- <h1>{{{headinghtml}}}</h1>
+ <h1>{{{headinghtml}}}
+ <div class="search-box">
+ <input class="search"
id="searchInput" type="search" name="search"
+
value="{{search}}">
+ </div>
+ </h1>
</div>
<div>{{{searchButton}}}</div>
{{^isAnon}}<div>{{{secondaryButton}}}</div>{{/isAnon}}
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index a92565c..e85cff5 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -19,7 +19,19 @@
border-bottom: 1px solid transparent;
}
+#searchIcon {
+ input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ color: transparent;
+ }
+}
+
.search-box {
+ display: none;
// FIXME: remove when micro.tap in stable and rule from common-js.less
too
-webkit-tap-highlight-color: rgba( 255, 255, 255, 0 );
@@ -108,6 +120,10 @@
font-size: 1.25em;
margin-left: 5px;
+ .search-box {
+ font-size: 0.8em;
+ }
+
img {
height: 18px;
width: auto;
@@ -127,10 +143,15 @@
font-weight: bold;
letter-spacing: 0.1px;
color: @colorGray5;
- margin-left: 6px;
+ margin: 4px 6px 0;
padding: 5px 3px;
text-transform: uppercase;
}
+ }
+
+ .search {
+ width: 375px;
+ margin-left: 95px;
}
}
@@ -169,52 +190,6 @@
}
/* Search */
-
-.client-use-basic-search,
-.client-nojs {
- .search-box {
- .fulltext-search, // FIXME: remove `.fulltext-search` selector
when cache clears
- .button-wrapper {
- background-color: @colorProgressive;
- border-radius: @borderRadius;
- cursor: pointer;
- float: right;
- margin-left: 0.5em;
- padding: 0.375em 0;
-
- .fulltext-search {
- opacity: 0; // the enclosing div is an icon,
no need to show the text
- padding: 0;
- }
- }
- .input-wrapper {
- overflow: hidden;
-
- .search {
- margin-right: 0;
- // Given no clear icon is needed in basic
search mode, maximise space for placeholder text
- padding-right: 0.1em;
- width: 100%;
- }
- }
- // FIXME: remove when cache clears
- > .search,
- > .fulltext-search {
- display: inline-block;
- float: none;
- }
- // FIXME: remove when cache clears
- > .search {
- max-width: 180px;
- }
- }
-
- .content h2 {
- border-bottom: solid 1px @colorGray14;
- }
-
-}
-
input.search {
// FIXME: input's cannot have child elements so not possible to use
mw-ui-icon-before here
// How can we avoid multiple use of magnifying glass icon?
diff --git a/resources/skins.minerva.tablet.styles/common.less
b/resources/skins.minerva.tablet.styles/common.less
index ac34e0d..2fd741b 100644
--- a/resources/skins.minerva.tablet.styles/common.less
+++ b/resources/skins.minerva.tablet.styles/common.less
@@ -7,6 +7,12 @@
@paddingVertical: 1.4em;
@media all and ( min-width: @deviceWidthTablet ) {
+ .header {
+ .search-box {
+ display: block;
+ }
+ }
+
.toc-mobile {
// Reset the rule for mobile mode (but not for .client-nojs)
display: block;
diff --git a/tests/browser/features/no_javascript_site.feature
b/tests/browser/features/no_javascript_site.feature
index e7642d1..d6f2992 100644
--- a/tests/browser/features/no_javascript_site.feature
+++ b/tests/browser/features/no_javascript_site.feature
@@ -30,7 +30,7 @@
And I click on the main navigation button
Then I should not see a link to "Nearby" in the main navigation menu
- @smoke @integration @skip
+ @smoke @integration
Scenario: Search with JavaScript disabled
Given the page "Selenium search test" exists
When I type into search box "Test is used by Selenium web driver"
--
To view, visit https://gerrit.wikimedia.org/r/330381
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I55c93e81dde786622a17488bbcb0e81b97dec732
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: branding
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
