Separate Special:Search styling info into separate module

Almost all styling of this page has little to do with the JS module.
Separating it into a styles module.
Also made the selector for the JS elements far simpler, as there was
no reason for being overly specific here.

Bug: T136363
Change-Id: I96a35f930be26b26f139120f3e5b23c33a5d019e

diff --git a/includes/specials/SpecialSearch.php b/includes/specials/SpecialSearch.php
index d474ba5..e14fcf5 100644 (file)
--- a/includes/specials/SpecialSearch.php
+++ b/includes/specials/SpecialSearch.php
@@ -105,7 +105,7 @@ class SpecialSearch extends SpecialPage {
                $out = $this->getOutput();
                $out->allowClickjacking();
                $out->addModuleStyles( [
-                       'mediawiki.special', 'mediawiki.special.search', 'mediawiki.ui', 'mediawiki.ui.button',
+                       'mediawiki.special', 'mediawiki.special.search.styles', 'mediawiki.ui', 'mediawiki.ui.button',
                        'mediawiki.ui.input', 'mediawiki.widgets.SearchInputWidget.styles',
                ] );
                $this->addHelpLink( 'Help:Searching' );

diff --git a/resources/Resources.php b/resources/Resources.php
index 2d1e921..343722d 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1894,6 +1894,10 @@ return [
                        'powersearch-togglenone',
                ],
        ],
+       'mediawiki.special.search.styles' => [
+               'styles' => 'resources/src/mediawiki.special/mediawiki.special.search.styles.css',
+               'targets' => [ 'desktop', 'mobile' ],
+       ],
        'mediawiki.special.undelete' => [
                'scripts' => 'resources/src/mediawiki.special/mediawiki.special.undelete.js',
        ],

diff --git a/resources/src/mediawiki.special/mediawiki.special.search.css b/resources/src/mediawiki.special/mediawiki.special.search.css
index 850957e..aad784e 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.search.css
+++ b/resources/src/mediawiki.special/mediawiki.special.search.css
@@ -1,181 +1,9 @@
-/* Special:Search */
-
-/*
- * Fixes sister projects box moving down the extract
- * of the first result (bug #16886).
- * It only happens when the window is small and
- * This changes slightly the layout for big screens
- * where there was space for the extracts and the
- * sister projects and thus it showed like in any
- * other browser.
- *
- * This will only affect IE 7 and lower
- */
-.searchresult {
-       display: inline !ie;
-}
-.searchresults {
-       margin: 1em 0 1em .4em;
-}
-/* needs extra specificity to override `.mw-body p` selector */
-.mw-body p.mw-search-nonefound {
-       margin: 0;
-}
-.mw-search-interwiki-header {
-       font-weight: bold;
-}
-.mw-search-nonefound + .mw-search-interwiki-header {
-       margin-top: 0;
-}
-div.searchresult {
-       font-size: 95%;
-       width: 38em;
-}
-.mw-search-results {
-       margin-left: 0;
-       float: left;
-}
-.mw-search-results li {
-       padding-bottom: 1.2em;
-       list-style: none;
-       list-style-image: none;
-}
-.mw-search-results li a {
-       font-size: 108%;
-}
-.mw-search-result-data {
-       color: #008000;
-       font-size: 97%;
-}
-.mw-search-profile-tabs {
-       background-color: #f3f3f3;
-       margin-top: 1em;
-       border: 1px solid #c0c0c0;
-}
-.mw-search-profile-tabs div.search-types {
-       float: left;
-       padding-left: 0.25em;
-}
-.mw-search-profile-tabs div.search-types ul {
-       margin: 0;
-       padding: 0;
-       list-style: none;
-}
-.mw-search-profile-tabs div.search-types ul li {
-       float: left;
-       margin: 0;
-       padding: 0;
-}
-.mw-search-profile-tabs div.search-types ul li a {
-       display: block;
-       padding: 0.5em;
-}
-.mw-search-profile-tabs div.search-types ul li.current a {
-       color: #333;
-       cursor: default;
-}
-.mw-search-profile-tabs div.search-types ul li.current a:hover {
-       text-decoration: none;
-}
-#mw-search-top-table div.results-info {
-       float: right;
-       padding: 0.5em;
-       padding-right: 0.75em;
-       color: #666;
-       font-size: 95%;
-}
-
-fieldset#mw-searchoptions {
-       margin: 0;
-       padding: 0.5em 0.75em 0.75em 0.75em;
-       border: none;
-       background-color: #f9f9f9;
-       border: 1px solid #c0c0c0;
-       border-top-width: 0;
-}
-fieldset#mw-searchoptions legend {
-       display: none;
-}
-fieldset#mw-searchoptions h4 {
-       padding: 0;
-       margin: 0;
-       float: left;
-}
-fieldset#mw-searchoptions div#mw-search-togglebox {
+#mw-search-togglebox {
        float: right;
 }
-fieldset#mw-searchoptions div#mw-search-togglebox label {
+#mw-search-togglebox label {
        margin-right: 0.25em;
 }
-fieldset#mw-searchoptions div#mw-search-togglebox input {
+#mw-search-togglebox input {
        margin-left: 0.25em;
 }
-fieldset#mw-searchoptions table {
-       float: left;
-       margin-right: 3em;
-       border-collapse: collapse;
-}
-fieldset#mw-searchoptions table td {
-       padding: 0 1em 0 0;
-       white-space: nowrap;
-}
-fieldset#mw-searchoptions div.divider {
-       clear: both;
-       border-bottom: 1px solid #ddd;
-       padding-top: 0.5em;
-       margin-bottom: 0.5em;
-}
-td#mw-search-menu {
-       padding-left: 6em;
-       font-size: 85%;
-}
-div#mw-search-interwiki {
-       float: right;
-       width: 18em;
-       border: 1px solid #aaa;
-       margin-top: 2ex;
-}
-div#mw-search-interwiki li {
-       font-size: 95%;
-}
-.mw-search-interwiki-more {
-       float: right;
-       font-size: 90%;
-}
-div#mw-search-interwiki-caption {
-       text-align: center;
-       font-weight: bold;
-       font-size: 95%;
-}
-.mw-search-interwiki-project {
-       font-size: 97%;
-       text-align: left;
-       padding: 0.15em 0.15em 0.2em 0.2em;
-       background-color: #ececec;
-       border-top: 1px solid #bbb;
-}
-span.searchalttitle {
-       font-size: 95%;
-}
-div.searchdidyoumean {
-       font-size: 127%;
-       margin-top: 0.8em;
-       /* Note that this color won't affect the link, as desired. */
-       color: #c00;
-}
-div.searchdidyoumean em {
-       font-weight: bold;
-}
-.searchmatch {
-       font-weight: bold;
-}
-/* Advanced PowerSearch box */
-td#mw-search-togglebox {
-       text-align: right;
-}
-table#mw-search-powertable {
-       width: 100%;
-}
-form#powersearch {
-       clear: both;
-}

diff --git a/resources/src/mediawiki.special/mediawiki.special.search.styles.css b/resources/src/mediawiki.special/mediawiki.special.search.styles.css
new file mode 100644 (file)
index 0000000..75889c3
--- /dev/null
+++ b/resources/src/mediawiki.special/mediawiki.special.search.styles.css
@@ -0,0 +1,172 @@
+/* Special:Search */
+
+/*
+ * Fixes sister projects box moving down the extract
+ * of the first result (bug #16886).
+ * It only happens when the window is small and
+ * This changes slightly the layout for big screens
+ * where there was space for the extracts and the
+ * sister projects and thus it showed like in any
+ * other browser.
+ *
+ * This will only affect IE 7 and lower
+ */
+.searchresult {
+       display: inline !ie;
+}
+.searchresults {
+       margin: 1em 0 1em .4em;
+}
+/* needs extra specificity to override `.mw-body p` selector */
+.mw-body p.mw-search-nonefound {
+       margin: 0;
+}
+.mw-search-interwiki-header {
+       font-weight: bold;
+}
+.mw-search-nonefound + .mw-search-interwiki-header {
+       margin-top: 0;
+}
+div.searchresult {
+       font-size: 95%;
+       width: 38em;
+}
+.mw-search-results {
+       margin-left: 0;
+       float: left;
+}
+.mw-search-results li {
+       padding-bottom: 1.2em;
+       list-style: none;
+       list-style-image: none;
+}
+.mw-search-results li a {
+       font-size: 108%;
+}
+.mw-search-result-data {
+       color: #008000;
+       font-size: 97%;
+}
+.mw-search-profile-tabs {
+       background-color: #f3f3f3;
+       margin-top: 1em;
+       border: 1px solid #c0c0c0;
+}
+.mw-search-profile-tabs div.search-types {
+       float: left;
+       padding-left: 0.25em;
+}
+.mw-search-profile-tabs div.search-types ul {
+       margin: 0;
+       padding: 0;
+       list-style: none;
+}
+.mw-search-profile-tabs div.search-types ul li {
+       float: left;
+       margin: 0;
+       padding: 0;
+}
+.mw-search-profile-tabs div.search-types ul li a {
+       display: block;
+       padding: 0.5em;
+}
+.mw-search-profile-tabs div.search-types ul li.current a {
+       color: #333;
+       cursor: default;
+}
+.mw-search-profile-tabs div.search-types ul li.current a:hover {
+       text-decoration: none;
+}
+#mw-search-top-table div.results-info {
+       float: right;
+       padding: 0.5em;
+       padding-right: 0.75em;
+       color: #666;
+       font-size: 95%;
+}
+
+fieldset#mw-searchoptions {
+       margin: 0;
+       padding: 0.5em 0.75em 0.75em 0.75em;
+       border: none;
+       background-color: #f9f9f9;
+       border: 1px solid #c0c0c0;
+       border-top-width: 0;
+}
+fieldset#mw-searchoptions legend {
+       display: none;
+}
+fieldset#mw-searchoptions h4 {
+       padding: 0;
+       margin: 0;
+       float: left;
+}
+fieldset#mw-searchoptions table {
+       float: left;
+       margin-right: 3em;
+       border-collapse: collapse;
+}
+fieldset#mw-searchoptions table td {
+       padding: 0 1em 0 0;
+       white-space: nowrap;
+}
+fieldset#mw-searchoptions div.divider {
+       clear: both;
+       border-bottom: 1px solid #ddd;
+       padding-top: 0.5em;
+       margin-bottom: 0.5em;
+}
+td#mw-search-menu {
+       padding-left: 6em;
+       font-size: 85%;
+}
+div#mw-search-interwiki {
+       float: right;
+       width: 18em;
+       border: 1px solid #aaa;
+       margin-top: 2ex;
+}
+div#mw-search-interwiki li {
+       font-size: 95%;
+}
+.mw-search-interwiki-more {
+       float: right;
+       font-size: 90%;
+}
+div#mw-search-interwiki-caption {
+       text-align: center;
+       font-weight: bold;
+       font-size: 95%;
+}
+.mw-search-interwiki-project {
+       font-size: 97%;
+       text-align: left;
+       padding: 0.15em 0.15em 0.2em 0.2em;
+       background-color: #ececec;
+       border-top: 1px solid #bbb;
+}
+span.searchalttitle {
+       font-size: 95%;
+}
+div.searchdidyoumean {
+       font-size: 127%;
+       margin-top: 0.8em;
+       /* Note that this color won't affect the link, as desired. */
+       color: #c00;
+}
+div.searchdidyoumean em {
+       font-weight: bold;
+}
+.searchmatch {
+       font-weight: bold;
+}
+/* Advanced PowerSearch box */
+td#mw-search-togglebox {
+       text-align: right;
+}
+table#mw-search-powertable {
+       width: 100%;
+}
+form#powersearch {
+       clear: both;
+}