From a3cef30154618882b4a9674b84a589cbc8ce2650 Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Thu, 26 May 2022 12:11:31 -0400 Subject: [PATCH] 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 --- includes/templates/Navigation.mustache | 6 ------ includes/templates/skin.mustache | 13 ++++++++++++- .../components/ArticleToolbar.less | 6 ++++++ .../components/Sidebar.less | 6 +++++- .../skins.vector.styles/layouts/screen.less | 18 ++++++++++++------ 5 files changed, 35 insertions(+), 14 deletions(-) delete mode 100644 includes/templates/Navigation.mustache diff --git a/includes/templates/Navigation.mustache b/includes/templates/Navigation.mustache deleted file mode 100644 index fd8d8184..00000000 --- a/includes/templates/Navigation.mustache +++ /dev/null @@ -1,6 +0,0 @@ -
- {{^is-title-above-tabs}} - {{>ArticleToolbar}} - {{/is-title-above-tabs}} - {{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}} -
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache index 65d066a8..5a0f4b8f 100644 --- a/includes/templates/skin.mustache +++ b/includes/templates/skin.mustache @@ -44,7 +44,14 @@ {{>Header}}
- {{>Navigation}} + +
+ {{^is-title-above-tabs}} + {{>ArticleToolbar}} + {{/is-title-above-tabs}} + {{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}} +
+
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
@@ -56,6 +63,10 @@ {{>ContentHeader}} + {{#is-title-above-tabs}} + {{>ArticleToolbar}} + {{/is-title-above-tabs}} + {{>ContentSubheader}}
diff --git a/resources/skins.vector.styles/components/ArticleToolbar.less b/resources/skins.vector.styles/components/ArticleToolbar.less index 150dd0a8..5cd0b743 100644 --- a/resources/skins.vector.styles/components/ArticleToolbar.less +++ b/resources/skins.vector.styles/components/ArticleToolbar.less @@ -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; diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index 90f05363..6925fd72 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -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; diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 1aac208e..161082dd 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -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; }