jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move page title above article toolbar menus 

Moves the page's title above the article toolbar (i.e. tabs) based
on the VectorTitleAboveTabs config option. This feature remains
off by default, but can be accessed via the query parameter `vectortitleabovetabs`.

Removes the Navigation.mustache template since it's just a wrapper
for the sidebar + tabs elements, which, with this change, are placed
in different locations in the DOM and don't need a common parent element.

Bug: T303549
Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
This commit is contained in:
Jan Drewniak 2022-05-26 12:11:31 -04:00
parent a6f5acd9de
commit a3cef30154
5 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
includes/templates/Navigation.mustache
View File

@ -1,6 +0,0 @@
<div id="mw-navigation">
{{^is-title-above-tabs}}
{{>ArticleToolbar}}
{{/is-title-above-tabs}}
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
</div>

13
includes/templates/skin.mustache
View File

@ -44,7 +44,14 @@
{{>Header}}
<div class="mw-workspace-container">
{{>Navigation}}
<div id="mw-navigation">
{{^is-title-above-tabs}}
{{>ArticleToolbar}}
{{/is-title-above-tabs}}
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
</div>
<div class="mw-table-of-contents-container mw-sticky-header-element">
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
</div>
@ -56,6 +63,10 @@
{{>ContentHeader}}
{{#is-title-above-tabs}}
{{>ArticleToolbar}}
{{/is-title-above-tabs}}
{{>ContentSubheader}}
<div id="bodyContent" class="vector-body">

6
resources/skins.vector.styles/components/ArticleToolbar.less
View File

@ -27,6 +27,12 @@
}
}
// T303549: When page title is above tabs, `.mw-article-toolbar-container` is
// moved inside `.mw-body` and requires margin between itself and the tagline.
.mw-body .mw-article-toolbar-container {
margin-bottom: 1.25em;
}
// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
.vector-article-toolbar .mw-article-toolbar-container {
display: flex;

6
resources/skins.vector.styles/components/Sidebar.less
View File

@ -27,13 +27,17 @@
}
}
// FIXME: Can be removed when "VectorTitleAboveTabs" is enabled and old layout is removed.
.vector-article-toolbar + .mw-sidebar {
margin-top: @top-margin-sidebar-content;
}
// Update styling when TOC is enabled
.vector-toc-enabled {
.mw-sidebar {
width: @width-sidebar;
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
margin-top: @top-margin-sidebar-content;
background-image: none;
background-color: @border-color-sidebar;

18
resources/skins.vector.styles/layouts/screen.less
View File

@ -310,7 +310,8 @@ body {
}
// Adjusts the content when sidebar is open regardless of the viewport width.
@{selector-workspace-container-sidebar-open} .mw-article-toolbar-container,
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
@{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container,
@{selector-workspace-container-sidebar-open} .mw-content-container {
// For container logic specific to special pages and history pages.
.skin-vector-disable-max-width & {
@ -321,13 +322,15 @@ body {
@media ( max-width: @max-width-margin-start-content ) {
// Adjusts the content and mw-article-toolbar-container.
@{selector-workspace-container-sidebar-open} .mw-content-container,
@{selector-workspace-container-sidebar-open} .mw-article-toolbar-container {
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
@{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
margin-left: @margin-start-content;
}
// Increase margin when TOC is enabled
.vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-content-container,
.vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-article-toolbar-container {
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
.vector-toc-enabled @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
margin-left: @margin-toc-start-content;
}
@ -365,9 +368,11 @@ body {
// the new TOC.
.skin-vector-disable-max-width .vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible #mw-navigation .mw-article-toolbar-container,
.vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-content-container,
.vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-article-toolbar-container {
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
.vector-toc-enabled @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
@media ( min-width: @width-breakpoint-desktop ) {
margin-left: @margin-toc-start-content;
}
@ -392,7 +397,8 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
// !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,
.mw-article-toolbar-container {
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
#mw-navigation .mw-article-toolbar-container {
// stylelint-disable-next-line declaration-no-important
margin-left: 0 !important;
}