[HTML] Refactor Content header templates

Creates two new templates:
- ContentHeader.mustache containing the site header and indicators or languages
- ContentSubheader.mustache containing site tagline and conditionally indicators

This changes DOM order.
- It adds the `<header class="mw-body-header">` to all pages,
  including special pages & edit pages, not just pages with the language button.
- It moves the #siteSub element (tagline) outside of the
  `<div id="bodyContent">` element.
- Adds a clearfix (or margin-collapse fix) to `.vector-body`.

This changes causes a minor difference (perhaps improvement) where on special pages,
the beginning of the content, starting with the `mw-specialpage-summary` element,
was positioned closer to the page title than on regular pages.

The clearfix ensures that the height between the page title and content is consistent across all pages.

Bug: T303549
Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414
This commit is contained in:
Jan Drewniak 2022-05-05 12:49:19 -04:00 committed by Jdrewniak
parent 9a2b3d6275
commit 1288c97179
4 changed files with 39 additions and 19 deletions

View file

@ -0,0 +1,17 @@
{{!-
Content Header - Main <H1> title for all pages, with either the indicators or language selector.
When language button is visible, indicators are placed in the ContentSubheader.mustache template instead.
}}
<header class="mw-body-header">
{{#is-language-in-content-top}}
{{#data-portlets.data-languages}}
{{>Menu}}
{{/data-portlets.data-languages}}
{{/is-language-in-content-top}}
{{^is-language-in-content-top}}
{{>Indicators}}
{{/is-language-in-content-top}}
{{{html-title-heading}}}
</header>

View file

@ -0,0 +1,12 @@
{{!-
Content Subheader - Placed below the content header on all pages.
Contains the indicators (if the language button is beside the title)
qnd tagline, which is only rendered on article page.
}}
<div class="mw-body-subheader">
{{#is-language-in-content-top}}
{{>Indicators}}
{{/is-language-in-content-top}}
{{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
</div>

View file

@ -54,28 +54,11 @@
<a id="top"></a>
<div id="siteNotice">{{{html-site-notice}}}</div>
{{^is-language-in-content}}
{{>Indicators}}
{{{html-title-heading}}}
{{/is-language-in-content}}
{{>ContentHeader}}
{{#is-language-in-content}}
<header class="mw-body-header">
{{#is-language-in-content-top}}
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
{{/is-language-in-content-top}}
{{{html-title-heading}}}
{{>Indicators}}
{{#is-article}}
<div id="siteSub" class="noprint">{{msg-tagline}}</div>
{{/is-article}}
</header>
{{/is-language-in-content}}
{{>ContentSubheader}}
<div id="bodyContent" class="vector-body">
{{^is-language-in-content}}
{{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
{{/is-language-in-content}}
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
<div id="contentSub2">{{{html-undelete-link}}}</div>
{{{html-user-message}}}

View file

@ -120,6 +120,14 @@ body {
z-index: @z-index-base;
}
// Prevents margin collapsing on first element (typically a <p>) of content.
// Custom because .mixin-clearfix() automatically appends :after to the selector
// and doesn't prevent margin collapsing.
.vector-body:before {
content: '';
display: table;
}
/* Navigation Containers */
.mw-article-toolbar-container {
// Clear the floats on #left-navigation and #right-navigation.