Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/289335
Change subject: WIP: Beta: enhanced search bar for non-JS users
......................................................................
WIP: Beta: enhanced search bar for non-JS users
* Repurpose an obsolete template file to create the search form;
* Use a white magnifying glass instead of the word "Search" for
the button label.
TODO: doesn't look good on firefox mobile v. 43 and 46.
Bug: T121734
Change-Id: Ia0c57dc542fa2abe0768b2fcb9cde03f6f23ec7b
---
M extension.json
M includes/skins/MinervaTemplate.php
D includes/skins/searchForm.mustache
A includes/skins/search_form.mustache
M resources/skins.minerva.base.styles/ui.less
M resources/skins.minerva.beta.styles/ui.less
A resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg
7 files changed, 108 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/35/289335/1
diff --git a/extension.json b/extension.json
index 099f62f..feb51e8 100644
--- a/extension.json
+++ b/extension.json
@@ -211,7 +211,8 @@
"prefix": "mw-ui",
"selector": ".mw-ui-icon-{name}:before",
"images": {
- "language-switcher":
"resources/skins.minerva.icons.beta.images/languageSwitcher.svg"
+ "language-switcher":
"resources/skins.minerva.icons.beta.images/languageSwitcher.svg",
+ "magnifying-glass-white":
"resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg"
}
},
"mobile.overlay.images": {
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index 60be3b6..1a1fb2c 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -35,20 +35,16 @@
* @return string
*/
protected function getSearchForm( $data ) {
- return Html::openElement( 'form',
- [
- 'action' => $data['wgScript'],
- 'class' => 'search-box',
- ]
- ) .
- $this->makeSearchInput( $this->getSearchAttributes() ) .
- $this->makeSearchButton(
- 'fulltext',
- [
- 'class' => MobileUI::buttonClass(
'progressive', 'fulltext-search no-js-only' ),
- ]
- ) .
- Html::closeElement( 'form' );
+ $args = [
+ 'action' => $data['wgScript'],
+ 'searchInput' => $this->makeSearchInput(
$this->getSearchAttributes() ),
+ 'searchButton' => $this->makeSearchButton( 'fulltext', [
+ 'class' => MobileUI::buttonClass(
'progressive', 'fulltext-search no-js-only' ),
+ ] ),
+ 'isBeta' =>
MobileContext::singleton()->isBetaGroupMember()
+ ];
+ $templateParser = new TemplateParser( __DIR__ );
+ return $templateParser->processTemplate( 'search_form', $args );
}
/**
diff --git a/includes/skins/searchForm.mustache
b/includes/skins/searchForm.mustache
deleted file mode 100644
index ecc4ef7..0000000
--- a/includes/skins/searchForm.mustache
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="header">
- {{{searchForm}}}
-</div>
diff --git a/includes/skins/search_form.mustache
b/includes/skins/search_form.mustache
new file mode 100644
index 0000000..7073ccb
--- /dev/null
+++ b/includes/skins/search_form.mustache
@@ -0,0 +1,14 @@
+<form action="{{{ action }}}" class="search-box">
+ {{# isBeta }}
+ <div class="mw-ui-icon mw-ui-icon-element
mw-ui-icon-magnifying-glass-white">
+ {{{ searchButton }}}
+ </div>
+ <span>
+ {{{ searchInput }}}
+ </span>
+ {{/isBeta}}
+ {{^ isBeta }}
+ {{{ searchInput }}}
+ {{{ searchButton }}}
+ {{/isBeta}}
+</form>
\ No newline at end of file
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index 8aa2438..e2050e3 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -114,7 +114,7 @@
.client-use-basic-search,
.client-nojs {
- .header {
+ .search-box {
.search,
.fulltext-search {
float: left;
diff --git a/resources/skins.minerva.beta.styles/ui.less
b/resources/skins.minerva.beta.styles/ui.less
index 1d2a7a3..b6eecf3 100644
--- a/resources/skins.minerva.beta.styles/ui.less
+++ b/resources/skins.minerva.beta.styles/ui.less
@@ -23,4 +23,31 @@
}
}
-
+.client-use-basic-search,
+.client-nojs {
+ .search-box {
+ div {
+ float: right;
+ border-radius: .2em;
+ margin-left: 0.5em;
+ padding: .375em 0;
+ background-color: #347bff;
+ cursor: pointer;
+ }
+ .fulltext-search {
+ opacity: 0; // the enclosing div is an icon, no need
to show the text
+ padding: 0;
+ }
+ span {
+ display: block;
+ min-width: 80px;
+ overflow: hidden;
+ }
+ .search {
+ display: block;
+ margin-right: 0;
+ padding-left: 1.5em; // space for the magnifying glass
icon
+ width: 100%;
+ }
+ }
+}
\ No newline at end of file
diff --git
a/resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg
b/resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg
new file mode 100644
index 0000000..8a64a59
--- /dev/null
+++ b/resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ id="Layer_1"
+ viewBox="0 0 24 24"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="magnifying-glass-white.svg">
+ <metadata
+ id="metadata9">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs7" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="849"
+ inkscape:window-height="603"
+ id="namedview5"
+ showgrid="false"
+ inkscape:zoom="9.8333333"
+ inkscape:cx="12"
+ inkscape:cy="12"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="Layer_1" />
+ <path
+ d="M5.9 15.2c1.2 1.2 2.7 1.8 4.4 1.8 1.5 0 2.9-.5 4-1.4l4.3 3.9s1-.3
1.3-1.4l-4.3-3.9c1.6-2.4
1.3-5.7-.8-7.8-1.2-1.2-2.7-1.8-4.4-1.8-1.7-.1-3.3.6-4.4 1.8-2.5 2.4-2.5 6.4-.1
8.8zM7 7.7s.1-.1.2-.1c.9-.9 2-1.3 3.2-1.3 1.2 0 2.4.5 3.2 1.3 1.8 1.8 1.8 4.7 0
6.4-.9.9-2 1.3-3.2 1.3-1.2 0-2.4-.5-3.2-1.3-1.8-1.7-1.8-4.5-.2-6.3z"
+ id="path3"
+ fill="#FFF" />
+</svg>
--
To view, visit https://gerrit.wikimedia.org/r/289335
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia0c57dc542fa2abe0768b2fcb9cde03f6f23ec7b
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
