Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/332870 )
Change subject: Search input is shown on tablet resolutions
......................................................................
Search input is shown on tablet resolutions
* Re-enable browser tests, updating them to use the
new search icon and to test in mobile resolution
* return placeholder text to search inputs
* Search input not shown at mobile resolutions
* Add browser test to describe different search behaviour for tablet
Bug: T152459
Change-Id: I55c93e81dde786622a17488bbcb0e81b97dec732
---
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/search.feature
M tests/browser/features/search_loggedin.feature
A tests/browser/features/search_tablet.feature
M tests/browser/features/special.feature
M tests/browser/features/step_definitions/search_steps.rb
M tests/browser/features/support/pages/article_page.rb
9 files changed, 43 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/70/332870/1
diff --git a/includes/skins/minerva.mustache b/includes/skins/minerva.mustache
index 0593af9..a7bd521 100644
--- a/includes/skins/minerva.mustache
+++ b/includes/skins/minerva.mustache
@@ -15,6 +15,11 @@
<h1>
<span>{{{headinghtml}}}</span>
</h1>
+ <div class="search-box search-box-main">
+ <input class="search"
id="searchInput" type="search" name="search"
+
placeholder="{{placeholder}}"
+ value="{{search}}">
+ </div>
</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 ffbc386..eef9ac1 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -34,6 +34,18 @@
}
}
+.search-box-main {
+ // To enforce consistent vertical alignment we use visibility rather
than display
+ visibility: hidden;
+ // On mobile screen when hidden search box should take up no horizontal
space
+ width: 0;
+
+ .search {
+ width: 375px;
+ margin-left: 95px;
+ }
+}
+
.search-box {
// FIXME: remove when micro.tap in stable and rule from common-js.less
too
-webkit-tap-highlight-color: rgba( 255, 255, 255, 0 );
diff --git a/resources/skins.minerva.tablet.styles/common.less
b/resources/skins.minerva.tablet.styles/common.less
index 2fd741b..91c938b 100644
--- a/resources/skins.minerva.tablet.styles/common.less
+++ b/resources/skins.minerva.tablet.styles/common.less
@@ -7,12 +7,16 @@
@paddingVertical: 1.4em;
@media all and ( min-width: @deviceWidthTablet ) {
- .header {
- .search-box {
- display: block;
+ .main {
+ .search-box-main {
+ visibility: visible;
}
}
+ #searchIcon {
+ display: none;
+ }
+
.toc-mobile {
// Reset the rule for mobile mode (but not for .client-nojs)
display: block;
diff --git a/tests/browser/features/search.feature
b/tests/browser/features/search.feature
index b85c60b..b2df021 100644
--- a/tests/browser/features/search.feature
+++ b/tests/browser/features/search.feature
@@ -5,6 +5,7 @@
Given I am using the mobile site
And the page "Selenium search test" exists
And I am on the "Main Page" page
+ And I am viewing the site in mobile mode
And I click the search icon
And I see the search overlay
@@ -27,7 +28,6 @@
And I click the search in pages button
Then I should see a list of search results
- @skip
Scenario: Search with enter key
When I type into search box "Test is used by Selenium web driver"
And I press the enter key
diff --git a/tests/browser/features/search_loggedin.feature
b/tests/browser/features/search_loggedin.feature
index d3975d8..b8895eb 100644
--- a/tests/browser/features/search_loggedin.feature
+++ b/tests/browser/features/search_loggedin.feature
@@ -6,6 +6,7 @@
And the page "Selenium search test" exists
And I am logged into the mobile website
And I am on the "Main Page" page
+ And I am viewing the site in mobile mode
And I click the search icon
And I see the search overlay
And I type into search box "Selenium search tes"
diff --git a/tests/browser/features/search_tablet.feature
b/tests/browser/features/search_tablet.feature
new file mode 100644
index 0000000..ff14d4b
--- /dev/null
+++ b/tests/browser/features/search_tablet.feature
@@ -0,0 +1,10 @@
+@chrome @en.m.wikipedia.beta.wmflabs.org @firefox @integration
@test2.m.wikipedia.org @vagrant
+Feature: Search
+
+ Scenario: Clicking search input in tablet mode
+ Given I am using the mobile site
+ And the page "Selenium search test" exists
+ And I am on the "Main Page" page
+ And I am viewing the site in tablet mode
+ When I click the search input field
+ Then I see the search overlay
diff --git a/tests/browser/features/special.feature
b/tests/browser/features/special.feature
index a4c3723..24329fc 100644
--- a/tests/browser/features/special.feature
+++ b/tests/browser/features/special.feature
@@ -3,6 +3,7 @@
Background:
Given I am using the mobile site
+ And I am viewing the site in mobile mode
And I am on the "Main Page" page
@login
diff --git a/tests/browser/features/step_definitions/search_steps.rb
b/tests/browser/features/step_definitions/search_steps.rb
index 52a5a58..e0f7a49 100644
--- a/tests/browser/features/step_definitions/search_steps.rb
+++ b/tests/browser/features/step_definitions/search_steps.rb
@@ -12,8 +12,12 @@
end
end
+When(/^I click the search input field$/) do
+ on(ArticlePage).search_box_placeholder_element.when_present.click
+end
+
When(/^I click the search button$/) do
- on(ArticlePage).search_button_element.when_present.click
+ on(ArticlePage).search_icon_element.when_present.click
end
When(/^I see the search in pages button$/) do
@@ -60,7 +64,7 @@
end
Then(/^I should see the search button$/) do
- expect(on(ArticlePage).search_button_element.when_present).to be_visible
+ expect(on(ArticlePage).search_icon_element.when_present).to be_visible
end
When(/^I should see the search overlay$/) do
diff --git a/tests/browser/features/support/pages/article_page.rb
b/tests/browser/features/support/pages/article_page.rb
index 9422f34..a6b24ca 100644
--- a/tests/browser/features/support/pages/article_page.rb
+++ b/tests/browser/features/support/pages/article_page.rb
@@ -57,7 +57,6 @@
# search
button(:search_icon, css: '#searchIcon input')
- button(:search_button, css: '.search-box .button-wrapper')
p(:search_within_pages, css: '.without-results')
text_field(:search_box_placeholder, name: 'search', index: 0)
text_field(:search_box2, name: 'search', index: 1)
--
To view, visit https://gerrit.wikimedia.org/r/332870
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: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
