wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sync location/other styles of #mw-searchButton with #searchButton

Browse source 
`#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
This commit is contained in:
Nicholas Ray 2020-12-16 22:52:54 -07:00
parent 465e9492bb
commit 0fdd4a99ac
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -5,7 +5,7 @@
}, },
{ {
"resourceModule": "skins.vector.styles", "resourceModule": "skins.vector.styles",
"maxSize": "9.2 kB" "maxSize": "9.3 kB"
}, },
{ {
"resourceModule": "skins.vector.styles.responsive", "resourceModule": "skins.vector.styles.responsive",

16
resources/skins.vector.styles/VueEnhancedSearchBox.less
View file

@ -28,7 +28,8 @@
// Typeahead search elements // Typeahead search elements
#searchInput, #searchInput,
#searchButton { #searchButton,
#mw-searchButton {
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less // Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
font-size: inherit; font-size: inherit;
} }
@ -37,13 +38,15 @@
height: @size-base; height: @size-base;
} }
#searchButton { #searchButton,
#mw-searchButton {
background-size: @background-size-x-search-button auto; background-size: @background-size-x-search-button auto;
min-height: @min-size-search-button; min-height: @min-size-search-button;
} }
// TODO: Parent class can be removed when $wgVectorUseCoreSearch is no longer supported. // Only apply the following WVUI-related rules to clients who have js enabled.
.skin-vector-search-vue { // TODO: .skin-vector-search-vue class can be removed when $wgVectorUseCoreSearch is no longer supported.
.client-js .skin-vector-search-vue {
// Derived from @size-search-figure in WVUI // Derived from @size-search-figure in WVUI
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21 // https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21
@size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em ); @size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em );
@ -61,6 +64,8 @@
#searchInput { #searchInput {
padding-left: @size-search-figure; padding-left: @size-search-figure;
// Derived from @padding-input-text in WVUI's Input component.
padding-right: 8px;
// Recreate WVUI expanding input. // Recreate WVUI expanding input.
&:focus { &:focus {
@ -73,7 +78,8 @@
} }
// Move & resize search icon to match WVUI. // Move & resize search icon to match WVUI.
#searchButton { #searchButton,
#mw-searchButton {
// Override the default right & left position of the icon. // Override the default right & left position of the icon.
right: auto; right: auto;
left: 0; left: 0;