golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Collapse search below desktop breakpoint 

The tablet breakpoint doesn't work. It is not possible to apply
the min width of 350px for the search input given the other elements
in the header, however the desktop breakpoint provides plenty of space.

Change-Id: I93c29700d465d641f8155c01a311e1e720c37695
This commit is contained in:
jdlrobson 2021-07-15 12:29:18 -07:00 committed by Jdlrobson
parent 297322f810
commit 60923c6ddb
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/common/components/SearchBox.less
View File

@ -100,7 +100,7 @@
display: block;
float: right;
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @width-breakpoint-desktop ) {
display: none;
}
}
@ -108,7 +108,7 @@
.vector-search-box-collapses > div {
display: none;
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @width-breakpoint-desktop ) {
display: block;
}
}

8
resources/skins.vector.styles/layouts/screen.less
View File

@ -41,7 +41,7 @@
// This assumes the presence of variables inside screen.less. DO NOT import it separately.
// Assumes various variables defined there.
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 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
@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
@ -440,7 +440,7 @@ body {
}
}
@media ( min-width: @width-breakpoint-tablet ) {
@media ( min-width: @width-breakpoint-desktop ) {
.mw-header {
flex-wrap: wrap;
}
@ -453,7 +453,7 @@ body {
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 100%;
min-width: @min-width-search-tablet;
min-width: @min-width-search-desktop;
flex-basis: @min-width-search;
flex-grow: 1;
@ -472,7 +472,7 @@ body {
/**
* Toggles the visibility of the search box at lower resolutions.
*/
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @width-breakpoint-desktop ) {
.vector-header-search-toggled {
#mw-sidebar-button,
.mw-logo,