wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-30 18:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scale server-rendered search box with browser font size

Browse source 
The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.

Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
This commit is contained in:
Nicholas Ray 2023-01-13 13:49:27 -07:00
parent ac87bd6c1b
commit 2b397d05d2
2 changed files with 8 additions and 3 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": "11.9kB" "maxSize": "12 kB"
}, },
{ {
"resourceModule": "skins.vector.legacy.js", "resourceModule": "skins.vector.legacy.js",

9
resources/skins.vector.styles/components/VueEnhancedSearchBox.less
View file

@ -12,7 +12,7 @@
@size-base: 32px; @size-base: 32px;
@min-size-search-button: 30px; @min-size-search-button: 30px;
@background-size-x-search-button: unit( 20px / @font-size-browser / @font-size-base, em ); @background-size-x-search-button: 20px;
// Search container // Search container
// We have to put those styles outside `.skin-vector-search-vue`, // We have to put those styles outside `.skin-vector-search-vue`,
@ -39,7 +39,12 @@
} }
.vector-search-box-vue .vector-search-box-input { .vector-search-box-vue .vector-search-box-input {
height: @size-base; height: auto;
// The following is copied directly from Codex.
min-height: @size-base;
line-height: 1.4285714;
padding-top: 4px;
padding-bottom: 4px;
} }
.vector-search-box-vue .searchButton { .vector-search-box-vue .searchButton {