Give the search page a little UI love

Uses mediawiki.ui to make the input field more legible and modern,
as well as giving the search button a lovely shade of blue.

Screenshot: https://www.mediawiki.org/wiki/File:Search-UI-minor-tweak.png
Change-Id: I7fdd9970ed5807df94c04bec1681f33523cad173

diff --git a/includes/specials/SpecialSearch.php b/includes/specials/SpecialSearch.php
index 8c8de8e..dd32656 100644 (file)
--- a/includes/specials/SpecialSearch.php
+++ b/includes/specials/SpecialSearch.php
@@ -88,7 +88,9 @@ class SpecialSearch extends SpecialPage {
                $this->outputHeader();
                $out = $this->getOutput();
                $out->allowClickjacking();
-               $out->addModuleStyles( 'mediawiki.special' );
+               $out->addModuleStyles( array(
+                       'mediawiki.special', 'mediawiki.special.search', 'mediawiki.ui'
+               ) );
 
                // Strip underscores from title parameter; most of the time we'll want
                // text form here. But don't strip underscores from actual text params!
@@ -1093,10 +1095,14 @@ class SpecialSearch extends SpecialPage {
                $out .= Html::input( 'search', $term, 'search', array(
                        'id' => $this->profile === 'advanced' ? 'powerSearchText' : 'searchText',
                        'size' => '50',
-                       'autofocus'
+                       'autofocus',
+                       'class' => 'mw-ui-input',
                ) ) . "\n";
                $out .= Html::hidden( 'fulltext', 'Search' ) . "\n";
-               $out .= Xml::submitButton( $this->msg( 'searchbutton' )->text() ) . "\n";
+               $out .= Xml::submitButton(
+                       $this->msg( 'searchbutton' )->text(),
+                       array( 'class' => array( 'mw-ui-button', 'mw-ui-primary' ) )
+               ) . "\n";
                return $out . $this->didYouMeanHtml;
        }
 

diff --git a/resources/mediawiki.special/mediawiki.special.search.css b/resources/mediawiki.special/mediawiki.special.search.css
index 914e47e..7e6e8e6 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.search.css
+++ b/resources/mediawiki.special/mediawiki.special.search.css
@@ -12,3 +12,9 @@
 .searchresult {
        display: inline !ie;
 }
+
+/** Add some extra padding keep browser's "clear field"
+ UI from rubbing up against the side of the field */
+input[type="search"] {
+       padding-right: 0.5em;
+}