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

Merge "Add columnStart container and update grid styles"

Browse source
This commit is contained in:
jenkins-bot 2023-10-03 19:30:06 +00:00 committed by Gerrit Code Review
parent a04ff40809 3cb6e4c505
commit fd006b5f29
6 changed files with 36 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
includes/SkinVector22.php
View file

@ -531,6 +531,9 @@ class SkinVector22 extends SkinMustache {
}
return array_merge( $parentData, [
'is-zebra-enabled' => $featureManager->isFeatureEnabled(
Constants::FEATURE_ZEBRA_DESIGN
),
'is-language-in-content' => $this->isLanguagesInContent(),
'has-buttons-in-content-top' => $this->isLanguagesInContentAt( 'top' ) || $hasAddTopicButton,
'is-language-in-content-bottom' => $this->isLanguagesInContentAt( 'bottom' ),

16
includes/templates/ColumnStart.mustache Normal file
View file

@ -0,0 +1,16 @@
{{#is-zebra-enabled}}<div class="vector-column-start">{{/is-zebra-enabled}}
{{>MainMenuPinned}}
{{#data-toc}}
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox">
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc-pinnable-container}}
{{>PinnableContainer/Pinned/Open}}
{{#is-pinned}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-toc-pinnable-container}}
</nav>
{{/data-toc}}
{{#is-zebra-enabled}}</div>{{/is-zebra-enabled}}

15
includes/templates/skin.mustache
View file

@ -34,23 +34,10 @@
</div>
<div class="mw-page-container">
<div class="mw-page-container-inner">
{{>MainMenuPinned}}
<div class="vector-sitenotice-container">
<div id="siteNotice">{{{html-site-notice}}}</div>
</div>
{{#data-toc}}
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox">
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc-pinnable-container}}
{{>PinnableContainer/Pinned/Open}}
{{#is-pinned}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-toc-pinnable-container}}
</nav>
{{/data-toc}}
{{>ColumnStart}}
<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">

2
resources/skins.vector.zebra.styles/components/TableOfContents.less
View file

@ -113,7 +113,7 @@
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar,
&.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar,
&.vector-feature-toc-pinned-clientpref-1 .mw-page-container-inner {
&.vector-feature-toc-pinned-clientpref-1 .vector-column-start {
> .vector-toc-landmark {
display: block;
}

29
resources/skins.vector.zebra.styles/layouts/grid.less
View file

@ -6,12 +6,11 @@
.mw-page-container-inner {
display: grid;
column-gap: @grid-column-gap;
grid-template: ~'min-content min-content 1fr min-content / @{grid-template-column-desktop}';
grid-template: ~'min-content 1fr min-content / @{grid-template-column-desktop}';
// stylelint-disable-next-line stylistic/declaration-colon-space-after
grid-template-areas:
'siteNotice siteNotice'
'mainMenu pageContent'
'toc pageContent'
'columnStart pageContent'
'footer footer';
}
@ -19,13 +18,8 @@
grid-area: siteNotice;
}
.mw-table-of-contents-container {
grid-area: toc;
overflow-anchor: none; // T330108
}
.vector-main-menu-container {
grid-area: mainMenu;
.vector-column-start {
grid-area: columnStart;
overflow-anchor: none; // T330108
}
@ -67,12 +61,17 @@
}
}
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
&.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-content-container,
&.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-content-container,
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-content-container {
grid-column: mainMenu / pageContent;
// Single column grid when column start is empty (i.e. no pinned ToC or pinned main menu)
&.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-page-container-inner,
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner {
grid-template-columns: @width-page-content;
// stylelint-disable-next-line stylistic/declaration-colon-space-after
grid-template-areas:
'siteNotice'
'pageContent'
'footer';
// Horizontally center content when single column
.mw-body {
justify-content: center;
}

2
resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
View file

@ -124,7 +124,7 @@
z-index: @z-index-dropdown;
}
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
@{selector-nojs-collapsed-toc-open} ~ .vector-toc-landmark .vector-toc {
// Hide the TOC when the button is not checked
display: block;
}