jenkins-bot has submitted this change and it was merged.
Change subject: Wrap heading around actions at tablet widths
......................................................................
Wrap heading around actions at tablet widths
Changes:
* Always render page actions before the heading
* Float page actions container to the right at tablet widths
* Position page actions container at the bottom of the pre-content
section (AKA header)
Bug: T135646
Change-Id: Ie357b2dd33cc16e8d4f5111e8204ed11bdba11ec
---
M includes/skins/MinervaTemplate.php
M includes/skins/MinervaTemplateBeta.php
M resources/skins.minerva.beta.styles/pageactions.less
3 files changed, 32 insertions(+), 41 deletions(-)
Approvals:
Hashar: Looks good to me, approved
Jhernandez: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index de0f683..c34a21d 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -16,9 +16,6 @@
/** @var boolean Specify whether the page is main page */
protected $isMainPage;
- /** @var boolean Whether to insert the page actions before the heading
in HTML */
- protected $shouldDisplayPageActionsBeforeHeading = true;
-
/**
* Gets the header content for the top chrome.
* @param array $data Data used to build the page
@@ -248,24 +245,21 @@
if ( $internalBanner || $preBodyHtml || isset(
$data['page_actions'] ) ) {
$html .= $preBodyHtml
. Html::openElement( 'div', [ 'class' =>
'pre-content heading-holder' ] );
- if (
!$this->shouldDisplayPageActionsBeforeHeading ) {
- $html .= $headingHtml;
- }
- if ( !$this->isSpecialPage ){
- $html .= $this->getPageActionsHtml(
$data );
- }
- if (
$this->shouldDisplayPageActionsBeforeHeading ) {
- $html .= $headingHtml;
- }
- $html .= $postHeadingHtml;
- $html .= $data['subtitle'];
- // FIXME: Temporary solution until we have
design
- if ( isset( $data['_old_revision_warning'] ) ) {
- $html .= $data['_old_revision_warning'];
- }
- $html .= $internalBanner;
- $html .= '</div>';
+ if ( !$this->isSpecialPage ){
+ $html .= $this->getPageActionsHtml( $data );
+ }
+
+ $html .= $headingHtml;
+ $html .= $postHeadingHtml;
+ $html .= $data['subtitle'];
+ // FIXME: Temporary solution until we have design
+ if ( isset( $data['_old_revision_warning'] ) ) {
+ $html .= $data['_old_revision_warning'];
+ }
+
+ $html .= $internalBanner;
+ $html .= '</div>';
}
return $html;
}
diff --git a/includes/skins/MinervaTemplateBeta.php
b/includes/skins/MinervaTemplateBeta.php
index f6a4f87..9710a0e 100644
--- a/includes/skins/MinervaTemplateBeta.php
+++ b/includes/skins/MinervaTemplateBeta.php
@@ -8,9 +8,6 @@
* beta mode via Special:MobileOptions
*/
class MinervaTemplateBeta extends MinervaTemplate {
- /** @inheritdoc */
- protected $shouldDisplayPageActionsBeforeHeading = false;
-
/**
* Get attributes to create search input
* @return array Array with attributes for search bar
diff --git a/resources/skins.minerva.beta.styles/pageactions.less
b/resources/skins.minerva.beta.styles/pageactions.less
index 9f6c79e..e11beab 100644
--- a/resources/skins.minerva.beta.styles/pageactions.less
+++ b/resources/skins.minerva.beta.styles/pageactions.less
@@ -1,15 +1,24 @@
@import 'minerva.variables';
.heading-holder {
+ @pageActionsHeight: @pageActionFontSize + (2 * @iconGutterWidth);
+
overflow: hidden;
+ position: relative;
+ padding-bottom: @pageActionsHeight;
}
#page-actions {
+ position: absolute;
float: none;
+ bottom: 0;
+ width: 100%;
+
border-top: 1px solid @colorGray14;
border-bottom: 1px solid @colorGray12;
+
// align the left and right icons with the left and right borders
respectively
- margin: 1em -@iconGutterWidth;
+ margin: 0 -@iconGutterWidth;
padding: 0.5em 0;
li {
@@ -33,24 +42,15 @@
}
@media all and ( min-width: @deviceWidthTablet ) {
- @totalIconSize: ( @iconSize + ( 2 * @iconGutterWidth ) );
- @pageActionsWidth: 3 * @totalIconSize - @iconGutterWidth;
-
- .heading-holder {
- position: relative;
- #section-0 {
- // FIXME: No need for important when pushing language
switcher to stable 41
- // Leave space for 3 icons
- padding-right: @pageActionsWidth /
@firstHeadingFontSize * @pageActionFontSize !important;
- }
+ #page-actions {
+ position: initial;
+ float: right;
+ width: auto;
+ border: none;
+ margin: 0 0 @iconGutterWidth @iconGutterWidth;
}
- #page-actions {
- border: none;
- top: @titleSectionSpacingTop;
- // align the left and right icons with the left and right
borders respectively
- margin: 0 -@iconGutterWidth;
- position: absolute;
- right: 0;
+ #language-switcher {
+ float: none;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/290901
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie357b2dd33cc16e8d4f5111e8204ed11bdba11ec
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Phuedx <[email protected]>
Gerrit-Reviewer: Hashar <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
