2020-04-28 01:44:16 +00:00
|
|
|
// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
|
|
|
|
// The rules here should only define the layout, not color or typography.
|
|
|
|
|
@import '../../variables.less';
|
|
|
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
|
|
|
|
|
|
// Modern layout variables
|
2020-06-11 21:02:04 +00:00
|
|
|
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
@margin-top-sidebar: 0.5em;
|
2020-04-28 01:44:16 +00:00
|
|
|
|
|
|
|
|
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
@padding-left-sidebar: 0.5em;
|
|
|
|
|
@padding-horizontal-header: @margin-end-portal +
|
|
|
|
|
@padding-left-sidebar +
|
|
|
|
|
( @margin-start-nav-main-body / @font-size-nav-main-heading );
|
|
|
|
|
@padding-vertical-header: 0.125em;
|
|
|
|
|
@margin-top-header: 0.625em;
|
|
|
|
|
@margin-bottom-header: 0.3125em;
|
|
|
|
|
@height-logo-icon: 3.125em; // Logo sizes per specification in T245190.
|
|
|
|
|
@height-header: @height-logo-icon +
|
|
|
|
|
@margin-top-header + @margin-bottom-header +
|
|
|
|
|
2 * @padding-vertical-header;
|
2020-04-28 01:44:16 +00:00
|
|
|
@width-grid-column-one: 11em;
|
2020-08-26 21:31:08 +00:00
|
|
|
@padding-horizontal-page-container: 30px;
|
2020-10-02 17:43:21 +00:00
|
|
|
@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;
|
2020-04-28 01:44:16 +00:00
|
|
|
|
2020-08-10 21:40:06 +00:00
|
|
|
// Default layout.
|
|
|
|
|
@import 'layout-default.less';
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
|
2020-08-10 21:40:06 +00:00
|
|
|
//
|
|
|
|
|
// Feature flag modifications to layout (additive)
|
|
|
|
|
//
|
|
|
|
|
@import 'layout-max-width.less';
|