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

Allow personal tools to span 2 lines

Browse source 
The calculations were a little incorrect as I failed to consider the
sidebar button correctly and how the search's min width and max width
impact layout.

I also move rules from Sidebar.less regarding the placement of the button
into layout where I believe they belong.  We do not have a header component, so the
positioning (margin) of the sidebar button in current form should be here.

This can be revisited if we introduce a header component.

Bug: T249363
Change-Id: I4ff640380eafc8beedb2c3c8fb00a56c71c5cb45
This commit is contained in:
jdlrobson 2020-08-17 15:08:22 -07:00
parent 8a2ffe0722
commit 370add977c
3 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/skins.vector.styles/Sidebar.less
View file

@ -4,8 +4,6 @@
@import 'legacy/Sidebar.less';
@import 'checkboxHack.less';
@margin-horizontal-sidebar-button-icon: 12px;
.mw-sidebar-action {
// Align with the portal heading/links
// `.portal` + `.portal .body`
@ -25,8 +23,6 @@
height: @size-sidebar-button;
border: 1px solid transparent;
border-radius: @border-radius-base;
margin-left: -@margin-horizontal-sidebar-button-icon;
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
&:before {
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.

7
resources/skins.vector.styles/layout-default.less
View file

@ -2,6 +2,8 @@
// 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;
@ -140,6 +142,11 @@ body:not( .skin-vector-search-header ) #p-personal,
}
}
#mw-sidebar-button {
margin-left: -@margin-horizontal-sidebar-button-icon;
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
}
#mw-panel {
position: absolute;
// The sidebar is absolutely positioned inside the header which applies a top

19
resources/skins.vector.styles/layout-search-header.less
View file

@ -3,19 +3,24 @@
@min-width-search: unit( 350px / @font-size-browser, em );
@max-width-search: unit( 580px / @font-size-browser, em );
@margin-horizontal-search: unit( 40px / @font-size-browser, em );
// The logo is variable width but typically consists of:
// - a icon (50x50)
// - a wordmark (approx 120px)
@min-width-logo: unit( 170px / @font-size-browser, em );
@min-width-logo: unit( 180px / @font-size-browser, em );
@min-width-personal-tools: @max-width-search;
@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 );
@min-width-supported: @width-grid-column-one + @min-width-personal-tools + ( @padding-horizontal-page-container-ems * 2 );
@width-comfortable: @min-width-logo + @size-sidebar-button + @max-width-search + @min-width-personal-tools;
// the width of the container if you exclude consideration for search
@min-width-container-base: @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @min-width-personal-tools;
@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;
@height-personal-tools: 2em;
@ -26,7 +31,7 @@
// Override values to reflect new behaviour.
min-width: @min-width-search;
max-width: @max-width-search;
margin: 0 40px;
margin: 0 @margin-horizontal-search;
}
// Support IE9: float will be disabled if display flex is supported
@ -51,6 +56,10 @@
top: @height-header-adjusted - @margin-top-header;
}
#p-personal {
width: @min-width-personal-tools;
}
.mw-header-placeholder {
height: @height-header-adjusted + @height-tabs;
}