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

[IE9] Layout flex-box adjustments 

Minor visual fix for IE9 for modern mode with search not in header.
i.e. with these settings:

    $wgVectorIsSearchInHeader = false;
    $wgVectorDefaultSkinVersion = 2;

Slight refactor of CSS. Removes block of styles that "reset" floats.
These were uneccessary because as flex-children, the floats were
ignored on those elements anyway.

Moves flex-wrap on .mw-header from layout-search-header.less
to layout-default.less since that's where display:flex is defined
and the rule is general enough that it should apply for different layouts.

Remove the @supports block with the `float:none;`. That is unnecessary
because flex-children are not affected by floats.

Change-Id: Ida3d2a7bc2b2f70238129df876714228fe5cdf84
This commit is contained in:
Jan Drewniak 2020-09-01 14:28:39 +02:00 committed by Jdlrobson
parent a8cfbe5e84
commit df3954eff8
2 changed files with 6 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/skins.vector.styles/layout-default.less
View File

@ -54,6 +54,7 @@ body {
// Vertical centering of header elements (IE>=11), requires flex.
// Non-flex fallback for IE<=9: float rule on the child elements.
.flex-display();
flex-wrap: wrap;
// https://caniuse.com/#search=align-items
align-items: center;
z-index: @z-index-header;
@ -153,6 +154,7 @@ body {
}
#mw-sidebar-button {
float: left; // Browser: IE9 support - button as flex-child fallback.
margin-left: -@margin-horizontal-sidebar-button-icon;
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
}

32
resources/skins.vector.styles/layout-search-header.less
View File

@ -29,6 +29,9 @@
// Header components
#p-search {
flex-grow: 1;
// Support IE9: float will be disabled if display flex is supported
float: left;
// Override values to reflect new behaviour.
min-width: @min-width-search;
max-width: 100%;
@ -40,13 +43,8 @@
}
}
// Support IE9: float will be disabled if display flex is supported
#p-search,
#mw-sidebar-button {
float: left;
}
#p-personal {
flex-grow: 1;
text-align: right;
flex-basis: @min-width-personal-tools;
margin-left: @margin-horizontal-search;
@ -55,25 +53,3 @@
float: right;
}
}
// If flexbox supported reset the floats that are supporting IE9
// When IE9 is no longer supported this entire query can be dropped.
@supports ( display: flex ) {
.skin-vector-search-header {
.mw-header {
flex-wrap: wrap;
}
#p-personal,
#p-search {
flex-grow: 1;
// Disable the float: left rule for IE9 support
float: none;
}
#mw-sidebar-button {
// Disable the float: left rule for IE9 support
float: none;
}
}
}