Revised styling of sister-search sidebar.
authorJan Drewniak <jan.drewniak@gmail.com>
Fri, 7 Apr 2017 08:35:20 +0000 (10:35 +0200)
committerJan Drewniak <jan.drewniak@gmail.com>
Mon, 8 May 2017 21:00:36 +0000 (23:00 +0200)
Various improvements to the sister-search sidebar:

- using WM project favicons
- scoping CSS specific to sister-search sidebar
- making sister-search items more compact

Bug: T160724, T158938
Change-Id: I2794121ab83cbd4e2b8868150e4d61db376fa63b

24 files changed:
includes/specials/SpecialSearch.php
includes/widget/search/InterwikiSearchResultSetWidget.php
includes/widget/search/InterwikiSearchResultWidget.php
languages/i18n/en.json
resources/src/mediawiki.special/images/special.search/book-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/book-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/course-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/course-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/definition-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/definition-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/dna-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/dna-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/image-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/image-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/news-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/news-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/quotation-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/quotation-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/textbook-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/textbook-icon.svg [deleted file]
resources/src/mediawiki.special/images/special.search/travel-icon.png [deleted file]
resources/src/mediawiki.special/images/special.search/travel-icon.svg [deleted file]
resources/src/mediawiki.special/mediawiki.special.search.commonsInterwikiWidget.js
resources/src/mediawiki.special/mediawiki.special.search.interwikiwidget.styles.less

index 3a93107..ceb6b7b 100644 (file)
@@ -352,12 +352,16 @@ class SpecialSearch extends SpecialPage {
                        $out->addHTML( $dymWidget->render( $term, $textMatches ) );
                }
 
-               $out->addHTML( "<div class='searchresults'>" );
-
                $hasErrors = $textStatus && $textStatus->getErrors();
                $hasOtherResults = $textMatches &&
                        $textMatches->hasInterwikiResults( SearchResultSet::INLINE_RESULTS );
 
+               if ( $textMatches->hasInterwikiResults( SearchResultSet::SECONDARY_RESULTS ) ) {
+                       $out->addHTML( '<div class="searchresults mw-searchresults-has-iw">' );
+               } else {
+                       $out->addHTML( '<div class="searchresults">' );
+               }
+
                if ( $hasErrors ) {
                        list( $error, $warning ) = $textStatus->splitByErrorType();
                        if ( $error->getErrors() ) {
index 1911c79..3cdda02 100644 (file)
@@ -8,6 +8,7 @@ use SearchResultSet;
 use SpecialSearch;
 use Title;
 use Html;
+use OOUI;
 
 /**
  * Renders one or more SearchResultSets into a sidebar grouped by
@@ -27,8 +28,6 @@ class InterwikiSearchResultSetWidget implements SearchResultSetWidget {
        protected $iwLookup;
        /** @var $output */
        protected $output;
-       /** @var $iwPrefixDisplayTypes */
-       protected $iwPrefixDisplayTypes;
 
        public function __construct(
                SpecialSearch $specialSearch,
@@ -41,9 +40,6 @@ class InterwikiSearchResultSetWidget implements SearchResultSetWidget {
                $this->linkRenderer = $linkRenderer;
                $this->iwLookup = $iwLookup;
                $this->output = $specialSearch->getOutput();
-               $this->iwPrefixDisplayTypes = $specialSearch->getConfig()->get(
-                       'InterwikiPrefixDisplayTypes'
-               );
        }
        /**
         * @param string $term User provided search term
@@ -80,22 +76,17 @@ class InterwikiSearchResultSetWidget implements SearchResultSetWidget {
                        $position = 0;
                        $iwResultItemOutput = '';
 
-                       $iwDisplayType = isset( $this->iwPrefixDisplayTypes[$iwPrefix] )
-                               ? $this->iwPrefixDisplayTypes[$iwPrefix]
-                               : "";
-
                        foreach ( $results as $result ) {
                                $iwResultItemOutput .= $this->resultWidget->render( $result, $term, $position++ );
                        }
 
-                       $headerHtml = $this->headerHtml( $term, $iwPrefix );
                        $footerHtml = $this->footerHtml( $term, $iwPrefix );
                        $iwResultListOutput .= Html::rawElement( 'li',
                                [
-                                       'class' => 'iw-resultset iw-resultset--' . $iwDisplayType,
+                                       'class' => 'iw-resultset',
                                        'data-iw-resultset-pos' => $iwResultSetPos
                                ],
-                               $headerHtml .
+
                                $iwResultItemOutput .
                                $footerHtml
                        );
@@ -117,34 +108,6 @@ class InterwikiSearchResultSetWidget implements SearchResultSetWidget {
                );
        }
 
-       /**
-        * Generates an appropriate HTML header for the given interwiki prefix
-        *
-        * @param string $term User provided search term
-        * @param string $iwPrefix Interwiki prefix of wiki to show header for
-        * @return string HTML
-        */
-       protected function headerHtml( $term, $iwPrefix ) {
-
-               $iwDisplayType = isset( $this->iwPrefixDisplayTypes[$iwPrefix] )
-                       ? $this->iwPrefixDisplayTypes[$iwPrefix]
-                       : "";
-
-               if ( isset( $this->customCaptions[$iwPrefix] ) ) {
-                       /* customCaptions composed by loadCustomCaptions() with pre-escaped content. */
-                       $caption = $this->customCaptions[$iwPrefix];
-               } else {
-                       $interwiki = $this->iwLookup->fetch( $iwPrefix );
-                       $parsed = wfParseUrl( wfExpandUrl( $interwiki ? $interwiki->getURL() : '/' ) );
-                       $caption = $this->specialSearch->msg( 'search-interwiki-default', $parsed['host'] )->escaped();
-               }
-
-               return Html::rawElement( 'div', [ 'class' => 'iw-result__header' ],
-                       Html::rawElement( 'span', [ 'class' => 'iw-result__icon iw-result__icon--' . $iwDisplayType ] )
-                       . $caption
-               );
-       }
-
        /**
         * Generates an HTML footer for the given interwiki prefix
         *
@@ -158,13 +121,22 @@ class InterwikiSearchResultSetWidget implements SearchResultSetWidget {
                        [ 'search' => $term, 'fulltext' => 1 ]
                );
 
-               $searchLink = Html::rawElement(
-                       'a',
-                       [ 'href' => $href ],
-                       $this->specialSearch->msg( 'search-interwiki-more-results' )->escaped()
+               $interwiki = $this->iwLookup->fetch( $iwPrefix );
+               $parsed = wfParseUrl( wfExpandUrl( $interwiki ? $interwiki->getURL() : '/' ) );
+
+               if ( isset( $this->customCaptions[$iwPrefix] ) ) {
+                       $caption = $this->customCaptions[$iwPrefix];
+               } else {
+                       $caption = $this->specialSearch->msg( 'search-interwiki-default', $parsed['host'] )->escaped();
+               }
+
+               $searchLink = Html::rawElement( 'em', null,
+                       Html::rawElement( 'a', [ 'href' => $href, 'target' => '_blank' ], $caption )
                );
 
-               return Html::rawElement( 'div', [ 'class' => 'iw-result__footer' ], $searchLink );
+               return Html::rawElement( 'div',
+                       [ 'class' => 'iw-result__footer' ],
+                       $this->iwIcon( $iwPrefix ) . $searchLink );
        }
 
        protected function loadCustomCaptions() {
@@ -181,4 +153,33 @@ class InterwikiSearchResultSetWidget implements SearchResultSetWidget {
                        }
                }
        }
+
+       /**
+        * Generates a custom OOUI icon element with a favicon as the image.
+        * The favicon image URL is generated by parsing the interwiki URL
+        * and returning the default location of the favicon for that domain,
+        * which is assumed to be '/favicon.ico'.
+        *
+        * @param string $iwPrefix Interwiki prefix
+        * @return OOUI\IconWidget
+        **/
+       protected function iwIcon( $iwPrefix ) {
+
+               $interwiki = $this->iwLookup->fetch( $iwPrefix );
+               $parsed = wfParseUrl( wfExpandUrl( $interwiki ? $interwiki->getURL() : '/' ) );
+
+               $iwIconUrl = $parsed['scheme'] .
+                       $parsed['delimiter'] .
+                       $parsed['host'] .
+                       ( $parsed['port'] ? ':' . $parsed['port'] : '' ) .
+                       '/favicon.ico';
+
+               $iwIcon = new OOUI\IconWidget( [
+                       'icon' => 'favicon'
+                ] );
+
+                $iwIcon->setAttributes( [ 'style' => "background-image:url($iwIconUrl);" ] );
+
+               return $iwIcon;
+       }
 }
index 6b51db5..acd792d 100644 (file)
@@ -17,13 +17,10 @@ class InterwikiSearchResultWidget implements SearchResultWidget {
        protected $specialSearch;
        /** @var LinkRenderer */
        protected $linkRenderer;
-       /** @var $iwPrefixDisplayTypes */
-       protected $iwPrefixDisplayTypes;
 
        public function __construct( SpecialSearch $specialSearch, LinkRenderer $linkRenderer ) {
                $this->specialSearch = $specialSearch;
                $this->linkRenderer = $linkRenderer;
-               $this->iwPrefixDisplayTypes = $specialSearch->getConfig()->get( 'InterwikiPrefixDisplayTypes' );
        }
 
        /**
@@ -38,9 +35,6 @@ class InterwikiSearchResultWidget implements SearchResultWidget {
                $iwPrefix = $result->getTitle()->getInterwiki();
                $titleSnippet = $result->getTitleSnippet();
                $snippet = $result->getTextSnippet( $terms );
-               $displayType = isset( $this->iwPrefixDisplayTypes[$iwPrefix] )
-                       ? $this->iwPrefixDisplayTypes[$iwPrefix]
-                       : "";
 
                if ( $titleSnippet ) {
                        $titleSnippet = new HtmlArmor( $titleSnippet );
@@ -69,18 +63,7 @@ class InterwikiSearchResultWidget implements SearchResultWidget {
                        );
                }
 
-               switch ( $displayType ) {
-                       case 'definition':
-                               return "<div class='iw-result__content'>" .
-                                       "<span class='iw-result__title'>{$link} {$redirect}: </span>" .
-                                       $snippet .
-                               "</div>";
-                       case 'quotation':
-                               return "<div class='iw-result__content'>{$snippet}</div>" .
-                                       "<div class='iw-result__title'>{$link} {$redirect}</div>";
-                       default:
-                               return "<div class='iw-result__title'>{$link} {$redirect}</div>" .
-                                       "<div class='iw-result__content'>{$snippet}</div>";
-               }
+               return Html::rawElement( 'div', [ 'class' => 'iw-result__title' ], $link . ' ' . $redirect ) .
+                       Html::rawElement( 'div', [ 'class'=> 'iw-result__content' ], $snippet );
        }
 }
index a6d3045..e33ace2 100644 (file)
        "search-file-match": "(matches file content)",
        "search-suggest": "Did you mean: $1",
        "search-rewritten": "Showing results for $1. Search instead for $2.",
-       "search-interwiki-caption": "Sister projects",
+       "search-interwiki-caption": "Results from sister projects",
        "search-interwiki-default": "Results from $1:",
        "search-interwiki-custom": "",
        "search-interwiki-more": "(more)",
diff --git a/resources/src/mediawiki.special/images/special.search/book-icon.png b/resources/src/mediawiki.special/images/special.search/book-icon.png
deleted file mode 100644 (file)
index 07e3ec7..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/book-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/book-icon.svg b/resources/src/mediawiki.special/images/special.search/book-icon.svg
deleted file mode 100644 (file)
index 6c3fa5f..0000000
+++ /dev/null
@@ -1,36 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wikisource-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path d="M25.9612634,4.16259168 C25.9612634,3.05318514 26.8209364,1.88015355 27.8804771,1.5831456 C27.8804771,1.5831456 45.019739,-4.60039908 52.9189989,7.7430239 C52.8276879,7.87091176 53.3244937,43.6894771 53.0961715,43.801598 C38.1346526,39.2213878 27.8617804,43.2196252 27.8617804,43.2196252 C26.8121538,43.5410399 25.9612634,42.9124575 25.9612634,41.7928397 L25.9612634,4.16259168 Z" id="path-1"></path>
-        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="27.195528" height="43.7625003" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-        <path d="M1.08483248,4.15020908 C1.08483248,3.04080253 1.94450542,1.86777094 3.00404616,1.57076299 C3.00404616,1.57076299 20.1433081,-4.61278168 28.0425679,7.73064129 C27.951257,7.85852916 28.4480627,43.6770945 28.2197406,43.7892154 C13.2582217,39.2090052 2.98534945,43.2072426 2.98534945,43.2072426 C1.93572291,43.5286573 1.08483248,42.9000749 1.08483248,41.7804571 L1.08483248,4.15020908 Z" id="path-3"></path>
-        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="27.195528" height="43.7625003" fill="white">
-            <use xlink:href="#path-3"></use>
-        </mask>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wikisource">
-            <g id="Group-2" transform="translate(3.000000, 7.000000)">
-                <g id="Group">
-                    <rect id="Rectangle-3" fill="#000000" x="19.5269846" y="36.730429" width="15.1876547" height="9.47882039" rx="4.7394102"></rect>
-                    <rect id="Rectangle" fill="#000000" x="0" y="8.29396785" width="55.3264563" height="35.5455765" rx="2"></rect>
-                    <use id="Rectangle-2" stroke="#000000" mask="url(#mask-2)" stroke-width="4" fill="#FFFFFF" transform="translate(39.559027, 21.920348) scale(-1, 1) translate(-39.559027, -21.920348) " xlink:href="#path-1"></use>
-                    <use id="Rectangle-2" stroke="#000000" mask="url(#mask-4)" stroke-width="4" fill="#FFFFFF" xlink:href="#path-3"></use>
-                </g>
-                <path d="M5.94322419,22.653192 C15.2672322,19.3261075 22.9765332,23.990418 22.9765332,23.990418" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                <path d="M5.94322419,16.7331266 C15.2672322,13.4060421 22.9765332,18.0703525 22.9765332,18.0703525" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                <path d="M5.94322419,11.0846878 C15.2672322,7.75760327 22.9765332,12.4219137 22.9765332,12.4219137" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                <path d="M5.94322419,28.5732575 C15.2672322,25.246173 22.9765332,29.9104834 22.9765332,29.9104834" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                <path d="M5.94322419,34.4933229 C15.2672322,31.1662384 22.9765332,35.8305489 22.9765332,35.8305489" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                <path d="M31.8963536,26.2991517 C41.2203616,22.7867165 48.9296626,27.2977748 48.9296626,27.2977748" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                <path d="M31.8963536,32.2192172 C41.2203616,28.7067819 48.9296626,33.2178402 48.9296626,33.2178402" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                <path d="M32.1957977,11.8254134 C32.1957977,11.8254134 34.7092977,10.1127027 40.1604435,10.1337008 C45.6115894,10.1546989 47.8024685,11.8254134 47.8024685,11.8254134 L47.8024685,21.3219156 C47.8024685,21.3219156 43.8085467,20.1940894 39.931856,20.1940894 C36.0551653,20.1940894 32.1957977,21.3219156 32.1957977,21.3219156 L32.1957977,11.8254134 Z" id="Rectangle-4" fill="#000000"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/course-icon.png b/resources/src/mediawiki.special/images/special.search/course-icon.png
deleted file mode 100644 (file)
index 9aad230..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/course-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/course-icon.svg b/resources/src/mediawiki.special/images/special.search/course-icon.svg
deleted file mode 100644 (file)
index 4fab1f3..0000000
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wikiversity-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path d="M1.79361627,13.3306367 C-0.140465792,12.4757391 -0.144839204,11.0916093 1.78234628,10.2397601 L23.5026391,0.639016247 C25.4304969,-0.213130142 28.5529839,-0.214539335 30.4952998,0.64399778 L52.8863837,10.5412429 C54.8204658,11.3961405 54.8248392,12.7802702 52.8976537,13.6321195 L31.1773609,23.2328633 C29.2495031,24.0850097 26.1270161,24.0864189 24.1847002,23.2278818 L1.79361627,13.3306367 Z" id="path-1"></path>
-        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-5" y="-5" width="64" height="33.8718796">
-            <rect x="-4.66" y="-5" width="64" height="33.8718796" fill="white"></rect>
-            <use xlink:href="#path-1" fill="black"></use>
-        </mask>
-        <circle id="path-3" cx="7" cy="27" r="5"></circle>
-        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-3" y="-3" width="16" height="16">
-            <rect x="-1" y="19" width="16" height="16" fill="white"></rect>
-            <use xlink:href="#path-3" fill="black"></use>
-        </mask>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wikiversity">
-            <g id="Group-2" transform="translate(3.000000, 11.000000)">
-                <path d="M8,16 L47,16 L47,31.89585 C47,31.89585 42.2783874,38.5113751 27.5,38.8710875 C12.7216126,39.2307999 8,31.89585 8,31.89585 L8,22.2392885 L8,16 Z" id="Rectangle-3" fill="#000000"></path>
-                <g id="Rectangle">
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    <use stroke="#F2F4F7" mask="url(#mask-2)" stroke-width="10" xlink:href="#path-1"></use>
-                </g>
-                <path d="M6.1310053,41.2112479 C5.27479784,42.0096083 10.4373919,43.6053602 11.2296387,43.6053602 C13.2555121,37.7460829 11.8321108,35.5517452 11.8321108,29.1181019 L11.8321108,21.2930015 C11.8321108,21.2930015 16.5515035,18.1566713 21.2216931,16.0206053 C25.8918828,13.8845392 31.215528,12.2538646 31.3550046,12.2096604 C32.1176432,11.9679575 31.2752162,9.09848389 30.5125776,9.34018676 C30.3644648,9.38712813 27.3667572,9.04545881 26.6057472,9.30621378 C24.4302064,10.0516482 11.7945726,16.3687146 9.43776817,19.1164347 C7.08096377,21.8641549 8.67910884,38.8352994 6.1310053,41.2112479 Z" id="Path-3" fill="#F2F4F7"></path>
-                <g id="Oval-3">
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-3"></use>
-                    <use stroke="#F2F4F7" mask="url(#mask-4)" stroke-width="6" xlink:href="#path-3"></use>
-                </g>
-                <path d="M1.13550659,38.2112479 C0.245905063,39.0096083 7.57084983,40.6053602 8.39399608,40.6053602 C9.78724127,36.7270479 9.71041095,34.4853149 9.49920479,31.5470605 C9.43416647,30.6422615 9.35638589,29.6714145 9.30486594,28.5663921 C9.27092907,27.8384991 9.24838677,27.052387 9.24838677,26.1885838 C9.24838677,21.7929074 8.92187195,20.3988432 10.0589683,18.8611032 C10.5891389,18.1441327 14.9624282,15.1566713 19.814766,13.0206053 C24.6671038,10.8845392 30.1983835,9.25386462 30.3432999,9.20966036 C31.1356832,8.96795749 30.2603996,6.09848389 29.4680164,6.34018676 C29.3141268,6.38712813 27.238504,7.04545881 26.4478128,7.30621378 C24.187421,8.05164822 9.84272127,11.7529088 7.39399608,14.500629 C4.94527088,17.2483492 3.78299204,35.8352994 1.13550659,38.2112479 Z" id="Path-3" fill="#000000"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/definition-icon.png b/resources/src/mediawiki.special/images/special.search/definition-icon.png
deleted file mode 100644 (file)
index b279f4e..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/definition-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/definition-icon.svg b/resources/src/mediawiki.special/images/special.search/definition-icon.svg
deleted file mode 100644 (file)
index 1d58906..0000000
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wiktionary-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <rect id="path-1" x="0" y="0" width="38.7837838" height="45.5813953" rx="3"></rect>
-        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="38.7837838" height="45.5813953" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wiktionary">
-            <g id="Group" transform="translate(9.000000, 4.000000)">
-                <rect id="Rectangle-5" fill="#000000" x="2.21621622" y="4.55813953" width="38.7837838" height="44.4418605" rx="3"></rect>
-                <use id="Rectangle-5" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="4" fill="#000000" xlink:href="#path-1"></use>
-                <rect id="Rectangle-5" fill="#000000" x="2.21621622" y="2.27906977" width="3.32432432" height="45.5813953" rx="1.66216216"></rect>
-                <path d="M9.96584688,24.0254991 L12.5526201,16.7046287 L12.5953767,16.7046287 L15.1393934,24.0254991 L9.96584688,24.0254991 Z M11.4837056,14.8139535 L5.54054054,30.5109549 L7.61423481,30.5109549 L9.32449813,25.7842668 L15.7807422,25.7842668 L17.4482489,30.5109549 L19.6929695,30.5109549 L13.7284262,14.8139535 L11.4837056,14.8139535 Z M19.9922656,28.7521872 L19.9922656,30.5109549 L32.1351351,30.5109549 L32.1351351,28.7521872 L22.4080125,28.7521872 L31.8785956,16.5727212 L31.8785956,14.8139535 L20.7191275,14.8139535 L20.7191275,16.5727212 L29.484227,16.5727212 L19.9922656,28.7521872 Z" id="AZ" fill="#FFFFFF"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/dna-icon.png b/resources/src/mediawiki.special/images/special.search/dna-icon.png
deleted file mode 100644 (file)
index 76ae7b9..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/dna-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/dna-icon.svg b/resources/src/mediawiki.special/images/special.search/dna-icon.svg
deleted file mode 100644 (file)
index b6472d2..0000000
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wikispecies-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path d="M30.7731558,0.186194824 C30.7731558,0.186194824 35.1530541,17.902764 16.3205992,24.2966289 C-2.5118558,30.6904937 1.3758711,49.1033824 1.3758711,49.1033824" id="path-1"></path>
-        <path d="M30.7473572,49.159218 C30.7473572,49.159218 35.6539441,38.982551 16.3205992,25.0539186 C-3.01274582,11.1252862 1.37060607,0.169606006 1.37060607,0.169606006" id="path-2"></path>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wikispecies">
-            <g id="Group-3" transform="translate(29.651065, 29.732290) rotate(-18.000000) translate(-29.651065, -29.732290) translate(3.651065, -0.267710)">
-                <g id="Group-2" transform="translate(-0.000000, 0.000000)">
-                    <path d="M16.0550183,26.1396841 L28.2093366,18.8733993" id="Line"></path>
-                    <path d="M8.04887438,16.7717325 L25.4345247,6.48465118" id="Line" stroke="#000000" stroke-width="4" stroke-linecap="square"></path>
-                    <path d="M25.407947,53.9559038 L42.7935973,43.6688225" id="Line" stroke="#000000" stroke-width="4" stroke-linecap="square"></path>
-                    <path d="M15.372315,23.3571115 L32.7579654,13.0700302" id="Line" stroke="#000000" stroke-width="4" stroke-linecap="square"></path>
-                    <path d="M23.3476093,40.6564377 L35.5019275,33.3901529" id="Line"></path>
-                    <path d="M23.587979,44.4357028 L40.6040246,34.7578672" id="Line" stroke="#000000" stroke-width="4" stroke-linecap="square"></path>
-                    <g id="Group" transform="translate(26.088934, 30.408062) rotate(-27.000000) translate(-26.088934, -30.408062) translate(10.088934, 5.408062)">
-                        <g id="Path-2">
-                            <use stroke="#FFFFFF" stroke-width="10" xlink:href="#path-1"></use>
-                            <use stroke="#000000" stroke-width="5" xlink:href="#path-1"></use>
-                        </g>
-                        <g id="Path-2">
-                            <use stroke="#FFFFFF" stroke-width="10" xlink:href="#path-2"></use>
-                            <use stroke="#000000" stroke-width="5" xlink:href="#path-2"></use>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/image-icon.png b/resources/src/mediawiki.special/images/special.search/image-icon.png
deleted file mode 100644 (file)
index 1ebbc74..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/image-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/image-icon.svg b/resources/src/mediawiki.special/images/special.search/image-icon.svg
deleted file mode 100644 (file)
index b68762e..0000000
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>commons-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="commons">
-            <g id="Group" transform="translate(7.000000, 10.000000)">
-                <rect id="Rectangle-3" fill="#000000" x="0" y="7" width="47" height="32" rx="3"></rect>
-                <path d="M12.5575779,0.983966166 C12.6781522,0.440536658 13.228439,0 13.7774775,0 L33.4411152,0 C33.9942728,0 34.5376987,0.428179934 34.6610148,0.983966166 L36.1940854,7.89352671 C36.3146597,8.43695622 35.9679607,8.87749288 35.4086105,8.87749288 L11.8099821,8.87749288 C11.255602,8.87749288 10.9011913,8.44931294 11.0245073,7.89352671 L12.5575779,0.983966166 Z" id="Rectangle-3" fill="#000000"></path>
-                <ellipse id="Oval" stroke="#FFFFFF" stroke-width="3" cx="23.1981132" cy="23.2091168" rx="10.1981132" ry="10.2091168"></ellipse>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/news-icon.png b/resources/src/mediawiki.special/images/special.search/news-icon.png
deleted file mode 100644 (file)
index 6b79590..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/news-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/news-icon.svg b/resources/src/mediawiki.special/images/special.search/news-icon.svg
deleted file mode 100644 (file)
index 996bc84..0000000
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wikinews-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <rect id="path-1" x="0" y="0" width="40.3125" height="44.3773585" rx="3"></rect>
-        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="40.3125" height="44.3773585" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wikinews">
-            <g id="Group-2" transform="translate(7.000000, 2.000000)">
-                <g id="Group">
-                    <use id="Rectangle" stroke="#000000" mask="url(#mask-2)" stroke-width="8" xlink:href="#path-1"></use>
-                    <rect id="Rectangle-2" fill="#000000" x="5.87890625" y="7.10037736" width="14.2773438" height="15.0883019" rx="1"></rect>
-                    <path d="M23.9355469,8.32075472 L33.2060822,8.32075472" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                    <path d="M23.9355469,13.8679245 L33.2060822,13.8679245" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                    <path d="M23.9355469,19.4150943 L33.2060822,19.4150943" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                    <path d="M22.5550667,30.509434 L33.1506715,30.509434" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                    <path d="M7.17212403,30.509434 L17.1811761,30.509434" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                    <path d="M7.17212403,35.1320755 L17.1811761,35.1320755" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                    <path d="M22.5550667,35.1320755 L33.1506715,35.1320755" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                    <path d="M7.12514628,24.9622642 L33.2060822,24.9622642" id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square"></path>
-                </g>
-                <path d="M42.1813257,4.62264151 C43.7380365,4.62264151 45,5.85586295 45,7.39864403 L45,46.2239975 C45,47.7571413 43.7493218,49 42.1813257,49 L7.50617429,49 C5.94946346,49 4.6875,47.7667786 4.6875,46.2239975" id="Rectangle" stroke="#000000" stroke-width="4"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/quotation-icon.png b/resources/src/mediawiki.special/images/special.search/quotation-icon.png
deleted file mode 100644 (file)
index 9d3ade3..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/quotation-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/quotation-icon.svg b/resources/src/mediawiki.special/images/special.search/quotation-icon.svg
deleted file mode 100644 (file)
index 0a24b3e..0000000
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wikiquote-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wikiquote" fill="#000000">
-            <path d="M25.6795093,50 L25.6795093,29.5241523 L16.904146,29.5241523 C16.904146,26.2444546 17.52462,23.4744813 18.7655867,21.2141491 C20.0065533,18.9538169 22.3111712,17.2475134 25.6795093,16.0951872 L25.6795093,7.31982385 C22.9316545,7.67438575 20.383279,8.49429786 18.0343064,9.77958478 C15.6853338,11.0648717 13.6687932,12.6825361 11.9846241,14.6326266 C10.300455,16.5827171 8.99302762,18.8430154 8.06230261,21.4135892 C7.13157761,23.984163 6.71054166,26.7319766 6.79918214,29.6571123 L6.79918214,50 L25.6795093,50 Z M54,50 L54,29.5241523 L45.2246367,29.5241523 C45.2246367,26.2444546 45.8451107,23.4744813 47.0860774,21.2141491 C48.3270441,18.9538169 50.6316619,17.2475134 54,16.0951872 L54,7.31982385 C51.2521452,7.67438575 48.7037697,8.49429786 46.3547971,9.77958478 C44.0058245,11.0648717 41.9892839,12.6825361 40.3051148,14.6326266 C38.6209458,16.5827171 37.3135183,18.8430154 36.3827933,21.4135892 C35.4520683,23.984163 35.0310324,26.7319766 35.1196729,29.6571123 L35.1196729,50 L54,50 Z" id="“"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/textbook-icon.png b/resources/src/mediawiki.special/images/special.search/textbook-icon.png
deleted file mode 100644 (file)
index 0de2821..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/textbook-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/textbook-icon.svg b/resources/src/mediawiki.special/images/special.search/textbook-icon.svg
deleted file mode 100644 (file)
index 52446b8..0000000
+++ /dev/null
@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wikibooks-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wikibooks">
-            <g id="Group-2" transform="translate(7.000000, 6.000000)">
-                <rect id="Rectangle" fill="#000000" x="0" y="0" width="13.4872062" height="46.9333333" rx="1"></rect>
-                <rect id="Rectangle" fill="#000000" x="16.3773218" y="0" width="13.4872062" height="46.9333333" rx="1"></rect>
-                <rect id="Rectangle-2" fill="#FFFFFF" x="18.3040656" y="3.2" width="9.63371872" height="2.13333333" rx="1"></rect>
-                <rect id="Rectangle-2" fill="#FFFFFF" x="18.3040656" y="7.46666667" width="9.63371872" height="2.13333333" rx="1"></rect>
-                <rect id="Rectangle-2" fill="#FFFFFF" x="18.3040656" y="42.6666667" width="9.63371872" height="2.13333333" rx="1"></rect>
-                <g id="Group" transform="translate(41.629197, 24.582549) rotate(-15.000000) translate(-41.629197, -24.582549) translate(36.629197, 2.082549)">
-                    <rect id="Rectangle" fill="#000000" x="-9.14823772e-14" y="1.0658141e-14" width="9.63371872" height="44.8" rx="1"></rect>
-                    <rect id="Rectangle-2" fill="#FFFFFF" x="1.37624553" y="3.05454545" width="6.88122765" height="2.03636364" rx="1"></rect>
-                    <rect id="Rectangle-2" fill="#FFFFFF" x="4.12873659" y="18.3272727" width="2.0643683" height="8.14545455" rx="1"></rect>
-                    <rect id="Rectangle-2" fill="#FFFFFF" x="1.37624553" y="40.7272727" width="6.88122765" height="2.03636364" rx="1"></rect>
-                </g>
-                <rect id="Rectangle-2" fill="#FFFFFF" x="1.92674374" y="42.6666667" width="9.63371872" height="2.13333333" rx="1"></rect>
-                <rect id="Rectangle-2" fill="#FFFFFF" x="3.85348749" y="21.3333333" width="5.78023123" height="6.4" rx="1"></rect>
-                <rect id="Rectangle-2" fill="#FFFFFF" x="20.2308093" y="21.3333333" width="5.78023123" height="6.4" rx="1"></rect>
-                <rect id="Rectangle-2" fill="#FFFFFF" x="1.92674374" y="2.13333333" width="9.63371872" height="6.4" rx="1"></rect>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.special/images/special.search/travel-icon.png b/resources/src/mediawiki.special/images/special.search/travel-icon.png
deleted file mode 100644 (file)
index 9540e5b..0000000
Binary files a/resources/src/mediawiki.special/images/special.search/travel-icon.png and /dev/null differ
diff --git a/resources/src/mediawiki.special/images/special.search/travel-icon.svg b/resources/src/mediawiki.special/images/special.search/travel-icon.svg
deleted file mode 100644 (file)
index c61da34..0000000
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>wikivoyage-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="wikivoyage">
-            <circle id="Oval" stroke="#000000" stroke-width="5" cx="30.5" cy="29.5" r="22.5"></circle>
-            <polygon id="Line" fill="#000000" points="7.94117647 26 51.7647059 26 51.7647059 21 7.94117647 21"></polygon>
-            <polygon id="Line" fill="#000000" points="11 41 51.7647059 41 51.7647059 36 11 36"></polygon>
-            <path d="M33.3291453,53.239081 C33.3291453,53.239081 36.1487341,50.645866 37.4655139,48.564933 C41.2810931,42.5350981 43.5882353,36.2426616 43.5882353,29.9411765 C43.5882353,23.6228427 41.2687791,17.4752409 37.4345128,11.7108181 C36.1106408,9.72051335 34.6944337,8.91628537 33.2755423,7.32564334 C32.4145319,6.36041143 26.8207622,5.36041143 25.9597518,6.32564334 C24.5408604,7.91628537 23.1246533,9.72051335 21.8007813,11.7108181 C17.9665151,17.4752409 15.6470588,23.6228427 15.6470588,29.9411765 C15.6470588,36.2426616 17.954201,42.5350981 21.7697802,48.564933 C23.08656,50.645866 26.9061488,53.239081 26.9061488,53.239081 L33.3291453,53.239081 Z M25.9949257,45.8913313 C22.6413872,40.5916685 20.6470588,35.1523918 20.6470588,29.9411765 C20.6470588,24.7468098 22.6290732,19.4935807 25.9639246,14.4799765 C27.1264205,12.7322841 28.3724952,11.1396672 29.6176471,9.73642318 C30.8627989,11.1396672 32.1088737,12.7322841 33.2713695,14.4799765 C36.6062209,19.4935807 38.5882353,24.7468098 38.5882353,29.9411765 C38.5882353,35.1523918 36.5939069,40.5916685 33.2403685,45.8913313 C32.0874519,47.7133081 30.8528466,49.389908 29.6176471,50.8822433 C28.3824475,49.389908 27.1478422,47.7133081 25.9949257,45.8913313 Z" id="Oval" fill="#000000"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
index f3d1fea..9518283 100644 (file)
@@ -30,7 +30,6 @@
 
                return '<li class="iw-resultset iw-resultset--image" data-iw-resultset-pos="0">' +
                                '<div class="iw-result__header">' +
-                                       '<span class="iw-result__icon iw-result__icon--image"></span>' +
                                        '<strong>' + imagesText.escaped() + '</strong>' +
                                '</div>' +
                                '<div class="iw-result__content">' +
@@ -73,7 +72,7 @@
                multimediaWidgetTemplate = itemWrapperTemplate( pageUrl.query.search, itemTemplate( results ) );
                /* we really only need to wait for document ready for DOM manipulation */
                $( function () {
-                       $( '.iw-results' ).prepend( multimediaWidgetTemplate );
+                       $( '.iw-results' ).append( multimediaWidgetTemplate );
                } );
        } );
 
index 3f23dc4..92e3e1c 100644 (file)
 /* interwiki search results */
 /*==========================*/
 
-.iw-headline {
-       font-weight: bold;
-       font-size: 1rem;
-       font-size: 16px;
-       opacity: 0.7;
-}
-
-.iw-results {
-       list-style: none;
-       margin: 0;
-}
-
-.iw-resultset {
-       margin-bottom: 1.2em;
-       background-color: #f2f4f7;
-       vertical-align: top;
-       width: 100%;
-       float: left;
-       list-style-type: none;
-       word-break: break-word;
-}
-
-/* clearfix */
-.iw-result:after {
-       visibility: hidden;
-       display: block;
-       font-size: 0;
-       content: ' ';
-       clear: both;
-       height: 0;
-}
-
-* html .interwiki-result { /* IE6 */
-       zoom: 1;
-}
-*:first-child + html .iw-resultset { /* IE7 */
-       zoom: 1;
-}
-
-/* padding each .iw-resultset section seperately.
-This allows us greater flexibility in the design.
-For example changing the background color on the
-header and footer. */
-.iw-result__header,
-.iw-result__title,
-.iw-result__content,
-.iw-result__footer {
-       padding: 0.25em 0.85em;
-}
-
-/* definition titles appear inline,
-to resemble a traditional dictionary definition */
-.iw-resultset--definition .iw-result__title {
-       display: inline;
-       padding: 0;
-}
-
-.iw-resultset > div:first-child {
-       padding-top: 0.85em;
-}
-
-.iw-resultset > div:last-child {
-       padding-bottom: 0.85em;
-}
-
-.iw-result__title {
-       font-size: 16px; /* rem fallback */
-       font-size: 1rem;
-}
-
-.iw-result__title a.extiw {
-       font-weight: bold;
-}
-
-.iw-result__content:after { /* clearfix */
-       visibility: hidden;
-       display: block;
-       font-size: 0;
-       content: ' ';
-       clear: both;
-       height: 0;
-}
-
-.iw-result__footer {
-       float: right;
-}
-
-.iw-result__icon {
-       display: inline-block;
-       width: 24px;
-       height: 24px;
-       vertical-align: middle;
-       margin-right: 0.25em;
-       background: url( images/special.search/definition-icon.svg ) no-repeat 0 0;
-       background-size: 100% 100%;
-}
+@import 'mediawiki.ui/variables.less';
+@import 'mediawiki.mixins';
 
-@interwikiContentTypes: definition, travel, quotation, book, course, news, textbook, image;
+.mw-searchresults-has-iw {
 
-.generate-iwIcons();
-
-.generate-iwIcons( @i:1 ) when ( @i =< length( @interwikiContentTypes ) ) {
-       @iwIcon: extract( @interwikiContentTypes, @i );
-
-       .iw-result__icon--@{iwIcon} {
-               /*  stylelint-disable-next-line function-url-quotes */
-               background-image: url( 'images/special.search/@{iwIcon}-icon.png' );
-               /*  stylelint-disable-next-line function-url-quotes */
-               background-image: url( 'images/special.search/@{iwIcon}-icon.svg' );
+       .iw-headline {
+               font-weight: bold;
        }
 
-       .generate-iwIcons( @i + 1 );
-}
+       .iw-results {
+               list-style: none;
+               margin: 0;
+       }
 
-/* image search result */
-.iw-result__mini-gallery {
-       position: relative;
-       float: left;
-       width: 60%;
-       height: 200px;
-       box-sizing: border-box;
-       padding: 0.25rem;
-}
+       .iw-resultset {
+               .box-sizing(border-box);
+               padding: 0.5em;
+               vertical-align: top;
+               width: 100%;
+               float: left;
+               background-color: @colorGray15;
+               margin-bottom: 1em;
+               word-break: break-word;
+       }
 
-/* second and third images are small */
-.iw-result__mini-gallery:nth-child( 2 ),
-.iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
-       width: 40%;
-       height: 100px;
-}
+       .iw-result__title {
+               font-size: 108%; /* matching regular search title */
+       }
 
-.iw-result__mini-gallery__image {
-       display: block;
-       position: relative;
-       width: 100%;
-       height: 100%;
-       background-size: cover;
-       background-repeat: no-repeat;
-       background-position: center center;
-}
+       .iw-result:after,
+       .iw-result__content:after { /* clearfix */
+               visibility: hidden;
+               display: block;
+               font-size: 0;
+               content: ' ';
+               clear: both;
+               height: 0;
+       }
 
-.iw-result__mini-gallery__image > .iw-result__mini-gallery__caption { /* image gallery text */
-       visibility: hidden;
-       position: absolute;
-       bottom: 0;
-       left: 0;
-       text-align: center;
-       color: #fff;
-       text-shadow: 0 0 10px rgba( 0, 0, 0, 0.4 ); /* improves legibility on white background */
-       font-size: 0.8em;
-       padding: 5px;
-       background-color: rgba( 0, 0, 0, 0.5 );
-}
+       .iw-result__footer {
+               float: right;
+               font-size: 97%; /* matching main search result font-size */
+               margin-top: 0.5em;
+       }
+       .iw-result__footer a {
+               vertical-align: middle;
+               color: @colorGray7;
+               font-style: italic;
+       }
 
-.iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
-       visibility: visible;
-}
+       .oo-ui-icon-favicon {
+               padding-right: 1em;
+       }
 
-/* different types of interwiki result boxes */
-/* quotation box */
-.iw-resultset--quotation .iw-result__content {
-       border-left: 4px solid #afb1b5;
-       margin-left: 1em;
-       padding-top: 0;
-       margin-top: 0.25em;
-}
-.iw-resultset--quotation .iw-result__title {
-       margin-left: 1em;
-}
-.iw-result--quotation .iw-result__title:before {
-       content: ' — ';
-       display: inline-block;
-}
-.iw-result--quotation .iw-result__footer {
-       text-align: right;
-}
+       /* image search result */
+       .iw-result__mini-gallery {
+               position: relative;
+               float: left;
+               width: 100%;
+               height: 200px;
+               .box-sizing(border-box);
+               padding: 0.25rem;
+       }
 
-/* desktop only */
+       /* second and third images are small */
+       .iw-result__mini-gallery:nth-child( 2 ),
+       .iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
+               width: 50%;
+               height: 100px;
+       }
 
-@media only screen and ( min-width: @deviceWidthTablet ) {
+       .iw-result__mini-gallery__image {
+               display: block;
+               position: relative;
+               width: 100%;
+               height: 100%;
+               background-size: 100% auto;
+               background-size: cover;
+               background-repeat: no-repeat;
+               background-position: center center;
+       }
 
-       #mw-interwiki-results {
-               width: 30%;
-               display: inline-block; /* used to align iw sidebar with the top of the main search results */
-               margin-left: 10%;
+       /* image gallery text */
+       .iw-result__mini-gallery__image > .iw-result__mini-gallery__caption {
+               visibility: hidden;
+               position: absolute;
+               bottom: 0;
+               left: 0;
+               text-align: center;
+               color: #fff;
+               font-size: 0.8em;
+               padding: 0.5em;
+               background-color: rgba( 0, 0, 0, 0.5 );
        }
-       .searchresults .mw-search-createlink,
-       .searchresults .mw-search-nonefound,
-       .searchresults .mw-search-results {
-               float: left;
-               width: 60%;
+
+       .iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
+               visibility: visible;
        }
 
+       /* tablet and up */
+
+       @media only screen and ( min-width: @deviceWidthTablet ) {
+
+               #mw-interwiki-results {
+                       width: 30%;
+                       display: inline-block; /* used to align interwiki sidebar with the top of the main search results */
+                       margin-left: 10%;
+               }
+               .mw-search-createlink,
+               .mw-search-nonefound,
+               .mw-search-results {
+                       float: left;
+                       width: 60%;
+                       clear: left;
+                       max-width: 60%;
+               }
+       }
 }