Minor fixes for second sister search AB test
authorJan Drewniak <jan.drewniak@gmail.com>
Fri, 10 Mar 2017 13:04:27 +0000 (14:04 +0100)
committerJan Drewniak <jan.drewniak@gmail.com>
Tue, 14 Mar 2017 11:26:28 +0000 (12:26 +0100)
These are a few minor fixes to improved the
UX of the new sister search sidebar.

- Making the link color on sister search results blue
- Fixing the order of the multimedia search results widget
- added a more explicit 'more results' message instead
of the current '(more)' message.
- aligning the top of the sidebar with the top of the regular
search results.
- fixing a typo in the multimedia widget.

Bug: T158935
Change-Id: Iaae603cc217b7847bebfa61b050b7c86bdd19f14

includes/widget/search/InterwikiSearchResultSetWidget.php
resources/Resources.php
resources/src/mediawiki.special/mediawiki.special.search.commonsInterwikiWidget.js
resources/src/mediawiki.special/mediawiki.special.search.interwikiwidget.styles.less

index 76b9b01..b1b8c73 100644 (file)
@@ -161,7 +161,7 @@ class InterwikiSearchResultSetWidget implements SearchResultSetWidget {
                $searchLink = Html::rawElement(
                        'a',
                        [ 'href' => $href ],
-                       $this->specialSearch->msg( 'search-interwiki-more' )->escaped()
+                       $this->specialSearch->msg( 'search-interwiki-more-results' )->escaped()
                );
 
                return Html::rawElement( 'div', [ 'class' => 'iw-result__footer' ], $searchLink );
index 0c3d27d..3c86a7d 100644 (file)
@@ -2051,7 +2051,7 @@ return [
                ],
                'targets' => [ 'desktop', 'mobile' ],
                'messages' => [
-                       'search-interwiki-more',
+                       'search-interwiki-more-results',
                        'searchprofile-images'
                ],
        ],
index 3810ac1..2a93e58 100644 (file)
@@ -3,7 +3,7 @@
        var api = new mw.Api(),
                pageUrl = new mw.Uri(),
                imagesText = new mw.Message( mw.messages, 'searchprofile-images' ),
-               moreResultsText = new mw.Message( mw.messages, 'search-interwiki-more' );
+               moreResultsText = new mw.Message( mw.messages, 'search-interwiki-more-results' );
 
        function itemTemplate( results ) {
 
@@ -28,7 +28,7 @@
 
        function itemWrapperTemplate( pageQuery, itemTemplateOutput ) {
 
-               return '<li class="iw-resultset iw-resultset--image" data-iw-resultsset-pos="0">' +
+               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>' +
@@ -67,7 +67,7 @@
                }
 
                results.sort( function( a, b ) {
-                       return b.index - a.index;
+                       return a.index - b.index;
                } );
 
                multimediaWidgetTemplate = itemWrapperTemplate( pageUrl.query.search, itemTemplate( results ) );
index 5504883..04da3db 100644 (file)
@@ -2,8 +2,13 @@
 /*==========================*/
 
 #mw-interwiki-results {
-       float: right;
        width: 30%;
+       display: inline-block;
+       margin-left: 10%;
+}
+
+.searchresults .mw-search-createlink {
+       float: left;
 }
 
 .iw-headline {
@@ -76,7 +81,6 @@ to resemble a traditional dictionary definition */
 }
 
 .iw-result__title a.extiw {
-       color: #252525;
        font-weight: bold;
 }
 
@@ -203,24 +207,17 @@ span the interwiki results across the bottom of the page.
 @media only screen and ( max-width: 768px ) {
        #mw-interwiki-results {
                width: 100%;
+               margin-left: 0;
        }
        .mw-search-results {
                max-width: none !important;
        }
-       .iw-resultset {
-               width: 45% !important;
-               margin-left: 0.5em !important;
-               margin-right: 0.5em !important;
-       }
-
-}
-
-@media only screen and ( max-width: 600px ) {
        .iw-resultset {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: none !important;
        }
+
 }
 /* stylelint-enable declaration-no-important */