Before WVUI loads, we show a magnifying glass at the start of the input
that visually mimics the magnifying glass start icon in WVUI's typeahead
search component. Unfortunately, this element is a submit button in
Vector instead of the inert span element used in WVUI.
Although the submit button is useful for no-js users, it might be
confusing for js users. Ideally, an inert element like a span would be
used instead, but that deserves its own ticket. As a temporary easy
stopgap, changing the cursor to be an arrow instead of the pointer might
make this less confusing and discourage clicks to it.
Bug: T270202
Change-Id: Ibab9992a6aa3a60f83324b40017b53fb061991d7
* Lower the min-width from Vector to 500px
At lower resolution per mock:
* Tabs converge into single grouping
* Search input is 150px
* Sidebar rushes content below
Drop rule for mw-content-container for special pages and history as it is already
accounted for in .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container
rule.
Bug: T264218
Change-Id: I14ee75bd173fb2de1e33067f95ce09deba5bf27a
These buttons are already absolutely positioned with their `top` and
`bottom` styles set. More importantly, the min-height style is causing
the buttons to not be vertically centered in Safari.
Bug: T270202
Change-Id: I21b88af4313249d8b2b775c32d12aa1f65c2d0c2
* In Iecc3eebf0dce495400ba3d644dce39186f4fa395, a border was applied to
`.wvui-typeahead-search` to make it appear like the input box contains
the search submit button. Because of this change, we can't apply a
max-width to #searchForm when WVUI loads as it will cause the border to
extend farther than it should. Instead, we apply the max-width/other
styles to `.wvui-typeahead-search` (WVUI search's root container) and
`#p-search`'s direct child after WVUI loads.
* In I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b, the start icon was moved
1 pixel to account for the input's border. These changes sync with the
changes to WVUI.
Depends-On: I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b
Bug: T270202
Change-Id: I0ffd0a9225a5a9b935e09748d78ac45b17623790
Seems less risky to fix this rather than revert, given a revert will
just mean more risk when we do it again, especially if the codebase
changes again and future manual rebases fail.
Bug: T271364
Change-Id: I7f63d6f07b6b715a9f31c83d572814da33ff2796
SkinMustache in core provides most of what is required for Vector to
generate its menus. In the interest of having a canonical source of
truth for menus across all skins, Vector should use this data.
To ensure the HTML generated is (mostly) the same after this patch to
prior, a few modifications are necessary:
* The data from core is decorated so that Vector can continue having its
own custom class names on menus. This is done using the
decoratePortletClass method.
* There is no support for a menu having a header representing the
selected menu item, as is currently the case with variants. This is
achieved via an extension to getPortletData. It's assumed that later
when variants are merged with languages, this can be removed.
* Menus are agnostic to how they are displayed, so we must continue to
add the is-dropdown template variable to drop down menus. In future we
may want to rethink our Menu partial to make this unnecessary in PHP.
* The portal-first class is redundant in the modern Vector as we can
use the first-child selector. Previously we introduced a class to
service the legacy skin where this rule doesn't apply as #p-logo is
the first child. However, the legacy skin can do this using a special
next sibling selector instead.
Bug: T268157
Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
```
mw.config.set('wgVectorSearchClient', {
fetchByTitle: function( query, domain, limit ) {
var xhr = fetch('http://' + domain + '/w/rest.php/v1/search/title?q=banana')
.then(function (resp) {
return resp.json();
}).then(function (json) {
return {
results: json.pages
}
});
return {
fetch: xhr,
abort: function() {}
}
}
})
```
This should be the absolute minimum to allow API clients to configure
the search. This should be considered an interim solution to buy us time to work out a more
elegant way to do this e.g. do this in the API itself…
Bug: T262566
Change-Id: Iac6f2551bed911980064dcb023193f800df0934f
`#mw-searchButton` is apparently used with no-js clients or if the
js-search is broken [1]. Its position and dimensions should be kept in
sync with #searchButton.
This commit:
* Ensures that the same styles, including position, applied to #searchButton
are applied to "#mw-searchButton" so the dimensions are identical. This
should also address a critique in T270202 by removing the "invisible
button".
* Applies a `client-js` selector to ensure these buttons are
only positioned to the left of the search input if js is enabled. If js
is not enabled, having these positioned to the left is confusing as the
input has no obvious "submit" button.
* Syncs the input's end padding to match WVUI's input's end padding if
JS is enabled.
[1] 465e9492bb/includes/templates/SearchBox.mustache (L12-L21)
Bug: T270202
Change-Id: Ie1bb8c68b713b3a18f90ee11b44c78b436a6d0ba
After the DOM order of content and navigation was swapped,
z-index of menus must be higher than the VisualEditor toolbar,
rather than the same, to continue overlapping it.
Bug: T264379
Change-Id: I4f5ce0b7ce85fd53727b38b1d7c31079945893f0
Per T270202, there should be no underline on hover. The underline is
coming from a style in core.
There should also be no bottom margin on the suggestion li elements. The
bottom margin is also coming from a style in core.
Bug: T270202
Change-Id: I215a41aa328366aee2bb552d5d49c95905fd37f2
Following Design Style Guide components sizing and Alex' feedback
on task. Changing applied styles scope to non Vue.js enhanced,
modern-only style of search component as well, in order to have
clean appearance and transforming disruption free.
Also changing em static values to LESS calculations for more developer
friendliness and change background-size to be `em` as well for
user-set typographic zoom preference ability.
Bug: T269959
Change-Id: I157712721621344171a32a8887a5e20cc16cae0d
`@margin-horizontal-search` is used for margin of search component
and for personal tools, but they are also floated right so one only
gets a clearer picture of this change when the canvas is exactly at
one specific size.
Additionally it's used for a media query, so the min-width is slightly
reduced (by 32px equivalent) as well. That's advantageous too.
At some point we're going to change this to `rem` unit, that's why I've
taken distance from changing it to a `px` value for now although devised
differently before.
Bug: T269959
Change-Id: I21cac3f049eed64520dd229ef80d10f9be853e0e
Modifies and annotates the CSS required to make the server-rendered
version of the new search form look like the WVUI version of the
search form.
Bug: T264355
Change-Id: I989860cfbb755ecbb706b79bd807e9d0013bc4e5
