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

Merge "Cleanup: Merge layout-search-header.less into default layout rules"

This commit is contained in:
jenkins-bot 2020-11-06 18:29:21 +00:00 committed by Gerrit Code Review
parent 3b642b21aa 717506b9c0
commit 28aa6b84b3
5 changed files with 57 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/skins.vector.styles/Sidebar.less
View File

@ -61,8 +61,7 @@
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
// checkbox input for the menu panel.
.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar,
.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
// Turn off presentation so that screen readers get the same effect as visually hiding.
// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
// instead to avoid hidden rendering.

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

@ -2,8 +2,6 @@
// Default layout for Modern Vector.
//
@margin-horizontal-sidebar-button-icon: 12px;
body {
// General background/foreground color definition as one exception to the rule.
background-color: @background-color-base;
@ -49,13 +47,19 @@ body {
/* Searchbox */
#p-search {
float: left;
margin: 0.5em 0.5em 0 0.5em;
min-width: 5em;
margin: 0 0 0 @margin-horizontal-search;
min-width: @min-width-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: 20em;
max-width: 100%;
flex-grow: 1;
#searchform {
margin-left: 0;
max-width: @max-width-search;
}
}
/* Main column */
@ -97,6 +101,15 @@ body {
float: right;
}
#p-personal {
flex-grow: 1;
flex-basis: @min-width-personal-tools;
margin-left: @margin-horizontal-search;
// Support IE9: This is reset in @support query below if Flexbox is available.
float: right;
}
#mw-sidebar-button {
float: left; // Browser: IE9 support - button as flex-child fallback.
margin-left: -@margin-horizontal-sidebar-button-icon;
@ -112,3 +125,12 @@ body {
padding-left: @padding-left-sidebar;
z-index: @z-index-sidebar;
}
// At low resolutions the search must be pushed to the right of the screen
// We use @width-comfortable to determine this threshold as we know it's not possible for
// personal tools to be on the same line at this resolution.
@media ( max-width: @width-comfortable ) {
#p-search #searchform {
margin-left: auto;
}
}

41
resources/skins.vector.styles/layout-max-width.less
View File

@ -59,29 +59,6 @@
margin-left: 0;
}
&.skin-vector-search-header-legacy #mw-head {
width: auto;
left: 0;
right: 0;
}
&.skin-vector-search-header-legacy #left-navigation {
margin-top: 0;
margin-bottom: 0;
}
&.skin-vector-search-header-legacy #right-navigation {
margin-top: 0;
}
&.skin-vector-search-header-legacy #p-personal {
right: 0;
}
&.skin-vector-search-header-legacy #p-search {
margin-right: 0;
}
#p-namespaces {
background-image: none;
padding-left: 0;
@ -154,10 +131,6 @@
margin-right: auto;
}
&.skin-vector-search-header-legacy .mw-article-toolbar-container {
margin-top: @height-header;
}
&.skin-vector-search-header .mw-article-toolbar-container {
// We want to keep the max-width of the article-toolbar-container the
// same max-width as the article page's content container in order to
@ -189,14 +162,6 @@
max-width: none;
}
// We want to keep the max-width of the article-toolbar-container the
// same max-width as the article page's content container in order to
// prevent it from moving when going from an article page to a
// history/special page.
&.skin-vector-search-header-legacy .mw-article-toolbar-container {
max-width: @max-width-content-container;
}
// Adjusts the content when sidebar is open regardless of the viewport width.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
margin-left: @margin-start-content;
@ -208,8 +173,7 @@
// `.mw-page-container` because that will cut off the sidebar. Therefore, we
// calculate the maximum distance from the start of `mw-page-container` to the
// start of the sidebar.
&.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar,
&.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
}
@ -226,8 +190,7 @@
@media ( max-width: @max-width-margin-start-content ) {
// Adjusts the content and mw-article-toolbar-container.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
&.skin-vector-search-header-legacy .mw-checkbox-hack-checkbox:checked ~ #mw-navigation .mw-content-container,
&.skin-vector-search-header .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
margin-left: @margin-start-content;
}

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

@ -1,63 +0,0 @@
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
// Assumes various variables defined there.
@min-width-search: unit( 350px / @font-size-browser, em );
@max-width-search: unit( 450px / @font-size-browser, em );
@margin-horizontal-search: unit( 56px / @font-size-browser, em );
// The logo is variable width but typically consists of:
// - a icon (50x50)
// - a wordmark (approx 120px)
@min-width-logo: unit( 180px / @font-size-browser, em );
@min-width-personal-tools: unit( 300px / @font-size-browser, em );
@padding-horizontal-page-container: 30px;
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
// the width of the container if you exclude consideration for search
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
@min-width-supported: @min-width-container-base + @min-width-search;
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
@height-personal-tools: 2em;
.skin-vector-search-header {
// 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%;
margin: 0 0 0 @margin-horizontal-search;
#searchform {
margin-left: 0;
max-width: @max-width-search;
}
}
#p-personal {
flex-grow: 1;
flex-basis: @min-width-personal-tools;
margin-left: @margin-horizontal-search;
// Support IE9: This is reset in @support query below if Flexbox is available.
float: right;
}
// At low resolutions the search must be pushed to the right of the screen
// We use @width-comfortable to determine this threshold as we know it's not possible for
// personal tools to be on the same line at this resolution.
@media ( max-width: @width-comfortable ) {
#p-search #searchform {
margin-left: auto;
}
}
}

28
resources/skins.vector.styles/layout.less
View File

@ -21,6 +21,33 @@
2 * @padding-vertical-header;
@width-grid-column-one: 11em;
@padding-horizontal-page-container: 30px;
@margin-horizontal-sidebar-button-icon: 12px;
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
// Assumes various variables defined there.
@min-width-search: unit( 350px / @font-size-browser, em );
@max-width-search: unit( 450px / @font-size-browser, em );
@margin-horizontal-search: unit( 56px / @font-size-browser, em );
// The logo is variable width but typically consists of:
// - a icon (50x50)
// - a wordmark (approx 120px)
@min-width-logo: unit( 180px / @font-size-browser, em );
@min-width-personal-tools: unit( 300px / @font-size-browser, em );
@padding-horizontal-page-container: 30px;
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
// the width of the container if you exclude consideration for search
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
@min-width-supported: @min-width-container-base + @min-width-search;
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
@height-personal-tools: 2em;
// Default layout.
@import 'layout-default.less';
@ -29,4 +56,3 @@
// Feature flag modifications to layout (additive)
//
@import 'layout-max-width.less';
@import 'layout-search-header.less';