jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix sticky header searchbox width and misc searchbox CSS cleanup 

Bug: T310366
Change-Id: Id403f818b19747e3279df3112d93301f31323f9d
This commit is contained in:
bwang 2022-06-13 15:57:13 -05:00
parent d529efeaf8
commit b6e7b5e880
4 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/common/variables.less
View File

@ -124,6 +124,7 @@
@width-sidebar-wide: unit( @width-sidebar-px-wide / @font-size-browser, em );
// Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
@min-width-search-button: 28px;
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.

41
resources/skins.vector.styles/components/Header.less
View File

@ -9,11 +9,6 @@
// Logo sizes per specification in T245190.
@height-logo-icon: 3.125em;
// Canonical version of spec: T270202
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
@min-width-search-desktop: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
.mw-header {
// A min-height is set to account for projects where no icon is set.
min-height: @height-logo-icon;
@ -34,11 +29,6 @@
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
}
.vector-search-box {
float: left;
z-index: @z-index-menu;
}
&-content,
&-aside {
display: flex;
@ -53,29 +43,19 @@
flex-grow: 1;
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
// Ensure search box is aligned with content when search thumbnails or JS is off
.vector-search-box:not( .vector-search-box-auto-expand-width ),
html:not( .client-js ) & .vector-search-box {
padding-left: @size-search-expand;
}
}
@media ( min-width: @width-breakpoint-desktop ) {
.vector-search-box {
.vector-layout-legacy & {
margin-right: @margin-end-search;
}
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 100%;
min-width: @min-width-search-desktop;
flex-basis: @min-width-search;
> div {
max-width: @max-width-search;
}
&.vector-search-box-auto-expand-width {
> div {
max-width: @max-width-search + unit( @size-search-expand / @font-size-browser / @font-size-base, em ); // 37.42857143em @ 16 & 0.875em
}
}
}
}
@ -100,6 +80,11 @@
position: relative;
margin-left: @padding-horizontal-tabs;
margin-right: @margin-end-search;
// Override default max width at lower resolutions
> div {
max-width: none;
}
}
.wvui-typeahead-search__wrapper {

1
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -108,7 +108,6 @@
.vector-search-box {
display: block;
flex-basis: unit( 500px / @font-size-browser / @font-size-base, em );
margin-left: @margin-start-search-box;
}

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

@ -26,6 +26,10 @@
font-size: @font-size-base--trident-hack;
// If this is a flex item, make sure it grows into available space.
flex-grow: 1;
> div {
max-width: @max-width-search;
}
}
// Typeahead search elements
@ -92,6 +96,12 @@
}
&.vector-search-box-show-thumbnail {
> div {
// Ensure the input + search button = 500px when unfocused and `auto-expand-width` enabled (i.e. search in header)
// Also increases the width of the sticky header search, which has `auto-expand-width` disabled
max-width: @max-width-search + unit( @size-search-expand / @font-size-browser / @font-size-base, em ); // 37.42857143em @ 16 & 0.875em
}
&.vector-search-box-auto-expand-width .searchButton {
// Accounts for the margin that allocates space for the input expanding and
// 1px input border.