Remove large bottom margin at top of main page

Main pages do not have page actions, yet the header always adds
bottom padding to compensate for the fact that page actions are
absolutely positioned.

a new class is added adopting BEM notation that informs the client
that no page actions are going to be visible. In conjuction to this
we strip the relevant HTML from the DOM.

Bug: T212216
Change-Id: Ib69991e91160ba7e2ca3beca4475c2a06c4b9cd3
This commit is contained in:
jdlrobson 2019-01-22 16:35:23 -08:00 committed by Stephen Niedzielski
parent e34cb9c509
commit 4d734942c5
4 changed files with 11 additions and 3 deletions

View file

@ -234,6 +234,7 @@ class MinervaTemplate extends BaseTemplate {
$internalBanner = $data[ 'internalBanner' ];
$preBodyHtml = isset( $data['prebodyhtml'] ) ? $data['prebodyhtml'] : '';
$hasHeadingHolder = $internalBanner || $preBodyHtml || isset( $data['page_actions'] );
$hasPageActions = !$this->isSpecialPage && !$this->isMainPage;
// prepare template data
$templateData = [
@ -263,7 +264,8 @@ class MinervaTemplate extends BaseTemplate {
'prebodyhtml' => $preBodyHtml,
'headinghtml' => isset( $data['headinghtml'] ) ? $data['headinghtml'] : '',
'postheadinghtml' => isset( $data['postheadinghtml'] ) ? $data['postheadinghtml'] : '',
'pageactionshtml' => $this->isSpecialPage ? '' : $this->getPageActionsHtml( $data ),
'haspageactions' => $hasPageActions,
'pageactionshtml' => $hasPageActions ? $this->getPageActionsHtml( $data ) : '',
'subtitle' => $data['subtitle'],
'contenthtml' => $this->getContentHtml( $data ),
'secondaryactionshtml' => $this->getSecondaryActionsHtml(),

View file

@ -28,7 +28,7 @@
<main id="content" class="mw-body">
{{#hasheadingholder}}
{{{prebodyhtml}}}
<div class="pre-content heading-holder">
<div class="pre-content heading-holder {{^haspageactions}}heading-holder--no-page-actions{{/haspageactions}}">
{{{pageactionshtml}}}
{{{headinghtml}}}
{{{taglinehtml}}}

View file

@ -2,10 +2,15 @@
@import '../../minerva.less/minerva.mixins';
.heading-holder {
@pageActionsGutter: 0.5em;
@pageActionsHeight: @pageActionFontSize + (2 * @iconGutterWidth);
padding: @titleSectionSpacingTop 0 (@pageActionsHeight + 0.5em);
padding: @titleSectionSpacingTop 0 (@pageActionsHeight + @pageActionsGutter);
position: relative;
&--no-page-actions {
padding-bottom: @pageActionsGutter;
}
.tagline {
color: @colorGray5;
font-size: 0.85em;

View file

@ -6,6 +6,7 @@
border: 0;
}
// Can be removed when cache has cleared (T212216)
#page-actions,
.pre-content {
display: none;