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

Use .vector-search-box-auto-expand-width class to style intermediate search components

Browse source 
Before Vue/WVUI lazy loads, we have intermediate search components that
are rendered on the server and that need to be styled based on the
`autoExpandWidth` prop passed to the search component. This commit
refactors VueEnhancedSearchBox to use this class if present.

Additionaly:

* Cleanup fixmes from Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
* Replace `vector-search-box-show-thumbnail` class with
  `.vector-search-box-auto-expand-width` class in Header.less now that
  the class has been cached in the HTML.

Depends-On: Ic914ecaee591008f987bd6d754fda8628125de7b
Bug: T297531
Change-Id: Ia6b7afa990fa4b04578740b483ba21dbef45a016
This commit is contained in:
Nicholas Ray 2021-12-17 15:30:56 -07:00 committed by Jdlrobson
parent 3028a4f9d8
commit 72120a36a0
3 changed files with 7 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
resources/skins.vector.styles/components/Header.less
View file

@ -32,15 +32,6 @@
flex-grow: 1;
}
// Allocate space for the extra width of the input when the search component
// has thumbnails.
//
// FIXME: This can be removed when WVUI in core has been upgraded to use the
// `.wvui-typeahead-search--auto-expand-width` class.
.wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--auto-expand-width ) {
margin-left: @size-search-expand;
}
@media ( min-width: @width-breakpoint-desktop ) {
@margin-start-search: 40px;
@ -60,7 +51,7 @@
max-width: @max-width-search;
}
&.vector-search-box-show-thumbnail {
&.vector-search-box-auto-expand-width {
margin-left: unit( ( @margin-start-search - @size-search-expand ) / @font-size-browser / @font-size-base, em ); // 1.14285714em @ 16 & 0.875em
> div {
@ -96,16 +87,6 @@
.wvui-typeahead-search__wrapper {
position: static;
}
// Position the start of suggestion list at the start of the input.
//
// FIXME: This can be removed when WVUI in core has been upgraded to use
// the `.wvui-typeahead-search--auto-expand-width` class.
.wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--auto-expand-width ) {
.wvui-typeahead-search__suggestions {
left: 0;
}
}
}
}
}

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

@ -126,15 +126,6 @@
color: @colorGray2;
}
}
// Allocate space for the extra width of the input when the search component
// has thumbnails.
//
// FIXME: This can be removed when WVUI in core has been upgraded
// to use the `.wvui-typeahead-search--full-width` class.
.wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--full-width ) {
margin-left: @size-search-expand;
}
}
}

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

@ -93,19 +93,20 @@
}
.vector-search-box-show-thumbnail {
.searchButton {
&.vector-search-box-auto-expand-width .searchButton {
// Accounts for the margin that allocates space for the input expanding and
// 1px input border.
left: @size-search-expand + @border-width-base;
}
.vector-search-box-input {
&.vector-search-box-auto-expand-width .vector-search-box-input {
margin-left: @size-search-expand;
width: ~'calc( 100% - @{size-search-expand} )';
}
// Recreate WVUI expanding input.
.vector-search-box-input:focus {
&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input,
&.vector-search-box-auto-expand-width .vector-search-box-input:focus {
margin-left: 0;
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
@ -113,7 +114,8 @@
}
// Reposition search icon for expanded input.
.vector-search-box-input:focus ~ .searchButton {
&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input ~ .searchButton,
&.vector-search-box-auto-expand-width .vector-search-box-input:focus ~ .searchButton {
// Derived from
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
// (12px of space between the border and the icon) with 1px to account for the focused input border.