mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-28 01:20:07 +00:00
Merge "Remove vector-layout-legacy styles and grid feature flag"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
0a7588f55b
|
|
@ -211,21 +211,6 @@ final class Constants {
|
|||
*/
|
||||
public const WEB_AB_TEST_ARTICLE_ID_FACTORY_SERVICE = 'WikimediaEvents.WebABTestArticleIdFactory';
|
||||
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public const CONFIG_GRID = 'VectorGrid';
|
||||
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public const REQUIREMENT_GRID = 'Grid';
|
||||
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public const FEATURE_GRID = 'Grid';
|
||||
|
||||
/**
|
||||
* This class is for namespacing constants only. Forbid construction.
|
||||
* @throws FatalError
|
||||
|
|
|
|||
|
|
@ -186,29 +186,6 @@ return [
|
|||
]
|
||||
);
|
||||
|
||||
// Feature: Grid
|
||||
// ================================
|
||||
$featureManager->registerRequirement(
|
||||
new OverridableConfigRequirement(
|
||||
$services->getMainConfig(),
|
||||
$context->getUser(),
|
||||
$context->getRequest(),
|
||||
null,
|
||||
Constants::CONFIG_GRID,
|
||||
Constants::REQUIREMENT_GRID
|
||||
)
|
||||
);
|
||||
|
||||
// Requires title above tabs to be enabled to simplify the
|
||||
// number of variants it needs to consider.
|
||||
$featureManager->registerFeature(
|
||||
Constants::FEATURE_GRID,
|
||||
[
|
||||
Constants::REQUIREMENT_FULLY_INITIALISED,
|
||||
Constants::REQUIREMENT_GRID,
|
||||
]
|
||||
);
|
||||
|
||||
return $featureManager;
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -164,14 +164,9 @@ class SkinVector22 extends SkinVector {
|
|||
}
|
||||
$parentData = $this->mergeViewOverflowIntoActions( $parentData );
|
||||
|
||||
$isGrid = $featureManager->isFeatureEnabled(
|
||||
Constants::FEATURE_GRID
|
||||
);
|
||||
return array_merge( $parentData, [
|
||||
// Cast empty string to null
|
||||
'html-subtitle' => $parentData['html-subtitle'] === '' ? null : $parentData['html-subtitle'],
|
||||
'is-vector-grid' => $isGrid,
|
||||
'vector-layout-class' => $isGrid ? 'vector-layout-grid vector-toc-visible' : 'vector-layout-legacy',
|
||||
'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
|
||||
Constants::FEATURE_STICKY_HEADER
|
||||
) ? $this->getStickyHeaderData(
|
||||
|
|
|
|||
|
|
@ -30,42 +30,30 @@
|
|||
object data-portlets-sidebar. See Sidebar.mustache for documentation.
|
||||
object data-footer for footer template partial. see Footer.mustache for documentation.
|
||||
}}
|
||||
<div class="mw-page-container {{vector-layout-class}}">
|
||||
<div class="mw-page-container vector-layout-grid">
|
||||
<span id="top-page"></span>
|
||||
<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
|
||||
<div class="mw-page-container-inner {{#data-toc}} vector-toc-visible{{/data-toc}}">
|
||||
|
||||
<input
|
||||
<div class="mw-page-container-inner">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="mw-sidebar-checkbox"
|
||||
class="mw-checkbox-hack-checkbox"
|
||||
{{#sidebar-visible}}checked{{/sidebar-visible}}>
|
||||
|
||||
{{>Header}}
|
||||
|
||||
<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
|
||||
{{#data-toc}}{{^is-vector-grid}}
|
||||
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
|
||||
{{/is-vector-grid}}{{/data-toc}}
|
||||
{{>Header}}
|
||||
<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
|
||||
<div id="mw-navigation">
|
||||
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
||||
</div>
|
||||
{{^is-vector-grid}}
|
||||
</div>
|
||||
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
|
||||
{{>TableOfContentsContainer}}
|
||||
{{/is-vector-grid}}
|
||||
{{#is-vector-grid}}</div>
|
||||
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
|
||||
{{>TableOfContentsContainer}}
|
||||
{{/is-vector-grid}} <!-- close .vector-sidebar-container -->
|
||||
<div id="siteNotice">{{{html-site-notice}}}</div>
|
||||
<div class="mw-content-container">
|
||||
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
||||
<main id="content" class="mw-body" role="main">
|
||||
<div id="siteNotice">{{{html-site-notice}}}</div>
|
||||
<div class="mw-content-container">
|
||||
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
||||
<main id="content" class="mw-body" role="main">
|
||||
<a id="top"></a>
|
||||
|
||||
{{>ContentHeader}}
|
||||
{{>ArticleToolbar}}
|
||||
|
||||
<div id="bodyContent" class="vector-body" data-mw-ve-target-container>
|
||||
{{>ContentSubheader}}
|
||||
{{#html-subtitle}}<div id="contentSub"{{{html-user-language-attributes}}}>{{{.}}}</div>{{/html-subtitle}}
|
||||
|
|
@ -74,21 +62,15 @@
|
|||
{{{html-body-content}}}
|
||||
{{{html-categories}}}
|
||||
</div>
|
||||
|
||||
{{#is-language-in-content-bottom}}
|
||||
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
||||
{{/is-language-in-content-bottom}}
|
||||
|
||||
</main>
|
||||
{{{html-after-content}}}
|
||||
</div> {{! END mw-content-container }}
|
||||
{{^is-vector-grid}}</div>{{/is-vector-grid}} <!-- close .vector-sidebar-container -->
|
||||
|
||||
<div class="mw-workspace-container mw-footer-container">
|
||||
{{^is-vector-grid}}<div class="mw-content-container">{{/is-vector-grid}}
|
||||
</main>
|
||||
{{{html-after-content}}}
|
||||
</div>
|
||||
<div class="mw-workspace-container mw-footer-container">
|
||||
{{#data-footer}}{{>Footer}}{{/data-footer}}
|
||||
{{^is-vector-grid}}</div>{{/is-vector-grid}}
|
||||
</div>
|
||||
</div>
|
||||
</div> {{! END mw-page-container-inner }}
|
||||
</div> {{! END mw-page-container }}
|
||||
{{#data-vector-sticky-header}}{{>StickyHeader}}{{/data-vector-sticky-header}}
|
||||
|
|
|
|||
|
|
@ -84,6 +84,9 @@
|
|||
@padding-blockquote: 8px 32px;
|
||||
@border-bottom-tabs: @border-width-base @border-style-base #eaecf0;
|
||||
|
||||
@background-color-secondary--modern: #f8f9fa;
|
||||
@background-color-page-container: @background-color-base;
|
||||
|
||||
// Navigation
|
||||
@background-color-secondary: #f6f6f6;
|
||||
@color-nav-subtle: #444;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@
|
|||
// T305069 Layout adjustments of sidebar elements:
|
||||
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
|
||||
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
||||
// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
|
||||
@margin-top-sidebar-toc_title_inline: 3.5em;
|
||||
// Default spacing separating the sidebar TOC from the main menu or viewport.
|
||||
@margin-top-sidebar-toc: 1.5em;
|
||||
|
||||
|
|
@ -65,23 +63,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.vector-layout-legacy {
|
||||
.sidebar-toc {
|
||||
// Main menu is closed
|
||||
margin-top: @margin-top-sidebar-toc_title_inline;
|
||||
}
|
||||
|
||||
@{selector-workspace-container-sidebar-open} .sidebar-toc {
|
||||
// Main menu is open
|
||||
margin-top: @margin-top-sidebar-toc;
|
||||
}
|
||||
|
||||
.vector-sticky-header-visible & .sidebar-toc {
|
||||
// Sticky header is visible
|
||||
margin-top: @margin-top-sidebar-toc;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-sidebar-action {
|
||||
// Align with the portal heading/links
|
||||
// `.portal` + `.portal .body`
|
||||
|
|
@ -141,12 +122,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
||||
// checkbox input for the menu panel.
|
||||
// Hide sidebar entirely when the checkbox is disabled
|
||||
@{selector-workspace-container-sidebar-closed} .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.
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes the sidebar full screen at lower resolutions.
|
||||
*/
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.mw-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,62 +10,22 @@
|
|||
|
||||
@selector-workspace-container-sidebar-open: ~'#mw-sidebar-checkbox:checked ~ .mw-workspace-container';
|
||||
@selector-workspace-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container';
|
||||
@selector-sidebar-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container';
|
||||
@selector-sidebar-no-toc-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
|
||||
|
||||
// Sidebar
|
||||
@width-grid-column-one: 11em;
|
||||
|
||||
// Adjust the left position of the sidebar to align it with the sidebar menu button,
|
||||
// in the header, while ensuring the background gradient still extends to the edge of the screen.
|
||||
// note: the 1px comes from the transparent border of the sidebar button.
|
||||
@padding-left-sidebar:
|
||||
@margin-horizontal-sidebar-button-icon +
|
||||
unit( @border-width-base / @font-size-browser, em );
|
||||
|
||||
// Layout containers
|
||||
|
||||
// Page container
|
||||
|
||||
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
|
||||
|
||||
// Content container
|
||||
|
||||
@max-width-workspace-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
|
||||
|
||||
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
||||
// see T259331.
|
||||
@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
|
||||
// We want ~60px of space between the end of the sidebar and the start of the
|
||||
// content container for aesthetic reasons. The sidebar is already displaced
|
||||
// -30px so we simply add 30px of space to the width of the sidebar.
|
||||
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
|
||||
|
||||
// Tabs
|
||||
|
||||
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
||||
|
||||
// Breakpoints
|
||||
|
||||
// This determines the maximum width breakpoint at which
|
||||
// the content will have a fixed start margin applied to it when the sidebar
|
||||
// is open. The content can shift its position when the sidebar is open/closed
|
||||
// at or below this breakpoint and will maintain its position above this breakpoint.
|
||||
@max-width-margin-start-content:
|
||||
(2 * @margin-start-content ) +
|
||||
( 2 * @padding-horizontal-page-container ) +
|
||||
@max-width-content-container;
|
||||
// 23em + 3.75em + 60em = 86.75em @ 16
|
||||
|
||||
// Defines the minimum viewport width, at which point the layout will not get any
|
||||
// smaller and will start horizontal scrolling instead.
|
||||
@min-width-supported:
|
||||
unit( 500px / @font-size-browser, em ) -
|
||||
( 2 * @padding-horizontal-page-container-wide );
|
||||
// 31.25em - 3.75em = 27.5em @ 16
|
||||
@background-color-secondary--modern: #f8f9fa;
|
||||
@border-color-sidebar: #f8f9fa;
|
||||
@background-color-page-container: @background-color-base;
|
||||
|
||||
body {
|
||||
background-color: @background-color-secondary--modern;
|
||||
|
|
@ -77,10 +37,6 @@ body {
|
|||
.mw-body,
|
||||
.parsoid-body {
|
||||
direction: ltr;
|
||||
|
||||
.vector-layout-legacy & {
|
||||
padding: @padding-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-body {
|
||||
|
|
@ -142,23 +98,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* Navigation Containers */
|
||||
.vector-layout-legacy .mw-article-toolbar-container {
|
||||
// Clear the floats on #left-navigation and #right-navigation.
|
||||
.mixin-clearfix();
|
||||
// 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.
|
||||
max-width: @max-width-content-container;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.skin-vector-disable-max-width & {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
#left-navigation {
|
||||
float: left;
|
||||
margin-left: -@padding-horizontal-tabs;
|
||||
|
|
@ -175,45 +114,12 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.vector-layout-legacy #mw-panel {
|
||||
position: static;
|
||||
top: 0;
|
||||
float: none;
|
||||
// Sidebar is displaced from the workspace container so that the
|
||||
// sidebar is flush with the edge of the screen at small widths.
|
||||
left: -@padding-horizontal-page-container;
|
||||
z-index: @z-index-sidebar;
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
left: -@padding-horizontal-page-container-wide;
|
||||
}
|
||||
}
|
||||
|
||||
// Add float at higher resolutions
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
.vector-layout-legacy #mw-panel {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-table-of-contents-container {
|
||||
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// Needed for Grid-based layout
|
||||
align-self: start;
|
||||
|
||||
.vector-layout-legacy & {
|
||||
float: left;
|
||||
clear: both;
|
||||
// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
|
||||
// we account for the TOC's top margin
|
||||
top: ~'calc( 1.5em - @{margin-top-sidebar-toc_title_inline} )'; // top: -2em
|
||||
}
|
||||
.vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
|
||||
// When main menu is open the TOC's top margin is reduced
|
||||
top: ~'calc( 1.5em - @{margin-top-sidebar-toc} )'; // top: 0
|
||||
}
|
||||
}
|
||||
|
||||
.parsoid-body {
|
||||
|
|
@ -262,137 +168,4 @@ body {
|
|||
min-width: auto;
|
||||
}
|
||||
|
||||
// Used as a container for absolutely positioned elements.
|
||||
.mw-page-container-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mw-workspace-container {
|
||||
// The sidebar is absolutely positioned relative to the
|
||||
// mw-workspace-container.
|
||||
position: relative;
|
||||
|
||||
.vector-layout-legacy & {
|
||||
max-width: @max-width-workspace-container;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.mw-footer-container {
|
||||
// T264679: There are elements (e.g. discussion tool popovers) in the main
|
||||
// content container that we want to appear on top of the footer. We set the
|
||||
// footer container to have static positioning instead of relative
|
||||
// positioning (applied by .mw-workspace-container) to enable this.
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-content-container {
|
||||
.vector-layout-legacy & {
|
||||
max-width: @max-width-content-container;
|
||||
display: flow-root;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// For container logic specific to special pages and history pages.
|
||||
.skin-vector-disable-max-width & {
|
||||
// Allow the max-width of content on history/special pages to be wider than
|
||||
// the max-width of content on article pages.
|
||||
// Note, we don't disable the max-width on .mw-article-toolbar-container intentionally
|
||||
// to support easier navigation between tabs.
|
||||
// See T293441 for further information on that.
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-layout-legacy .mw-footer-container {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 82px;
|
||||
}
|
||||
|
||||
// Hide sidebar entirely when the checkbox is disabled and the TOC is enabled
|
||||
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Responsive overrides.
|
||||
@media ( min-width: @min-width-page-container--padded ) {
|
||||
.mw-page-container {
|
||||
border-left: @border-width-base @border-style-base @border-color-sidebar;
|
||||
border-right: @border-width-base @border-style-base @border-color-sidebar;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjusts the content when sidebar is open regardless of the viewport width.
|
||||
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
|
||||
// For container logic specific to special pages and history pages.
|
||||
.skin-vector-disable-max-width & {
|
||||
margin-left: @margin-start-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @max-width-margin-start-content ) {
|
||||
// Increase margin to account for TOC
|
||||
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
|
||||
margin-left: @margin-toc-start-content;
|
||||
}
|
||||
|
||||
// Specificity needed to disable the default animations at lower resolutions.
|
||||
.vector-animations-ready .mw-sidebar {
|
||||
// Remove sidebar transition at smaller widths.
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Cannot use display: none on legacy TOC because it needs to be accessible
|
||||
// to scrollObserver for the TOC A/B test (T303297)
|
||||
// Instead we hide the contents of the legacy TOC and reset it's styles
|
||||
// See I3f247730fa1c399e6d2e4d866677703fc24e8c58
|
||||
.skin-vector-toc-experiment-treatment #toc {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.skin-vector-toc-experiment-treatment #toc > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Update article page's content container when
|
||||
// TOC is visible and when TOC is enabled and the sidebar is open.
|
||||
//
|
||||
// T306366: When the TOC AB test is enabled, both the old and new TOC are in the
|
||||
// HTML but only one is actually visible. Prevent the left margin from undesirably
|
||||
// applying if bucketed into the control or unsampled groups which won't show
|
||||
// the new TOC.
|
||||
.skin-vector-disable-max-width .vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
|
||||
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-layout-legacy .vector-toc-visible .mw-workspace-container .mw-content-container,
|
||||
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
margin-left: @margin-toc-start-content;
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
margin-left: @margin-toc-start-content-wide;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes the sidebar full screen at lower resolutions.
|
||||
*/
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
@{selector-workspace-container-sidebar-open} {
|
||||
#mw-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// !important as we always want to disable the margin-left on these elements
|
||||
// Using !important is cleaner than having to rely on specificity involved :checked elements
|
||||
.mw-content-container {
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import 'grid.less';
|
||||
|
|
|
|||
|
|
@ -537,10 +537,6 @@
|
|||
"VectorTableOfContentsCollapseAtCount": {
|
||||
"value": 20,
|
||||
"description": "@var The minimum number of headings required to collapse all headings in the sticky table of contents by default."
|
||||
},
|
||||
"VectorGrid": {
|
||||
"value": true,
|
||||
"description": "@var boolean `VectorGrid` enforces a grid system"
|
||||
}
|
||||
},
|
||||
"ServiceWiringFiles": [
|
||||
|
|
|
|||
Loading…
Reference in a new issue