jenkins-bot has submitted this change and it was merged.
Change subject: Rewrite footer how skins do it
......................................................................
Rewrite footer how skins do it
This rewrites the footer in a desktop compatible way
Make footer css available for all pages
Don't give the main page mw-mf-special use page-Main_Page as it
is on desktop
Change-Id: I1253edfaa5af3d7782a87caf2e3ab0c9b3ae66f0
---
M MobileFrontend.php
M includes/skins/SkinMobile.php
M includes/skins/SkinMobileBase.php
M includes/skins/SkinMobileTemplate.php
M less/common/mf-footer.less
M stylesheets/common/mf-footer.css
6 files changed, 160 insertions(+), 121 deletions(-)
Approvals:
awjrichards: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/MobileFrontend.php b/MobileFrontend.php
index acb7830..ccb9d4f 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -187,7 +187,6 @@
$wgResourceModules['mobile.styles.page'] = $wgMFMobileResourceBoilerplate +
array(
'dependencies' => array( 'mobile.startup' ),
'styles' => array(
- 'stylesheets/common/mf-footer.css',
'stylesheets/common/mf-hacks.css',
'stylesheets/common/mf-enwp.css'
),
@@ -200,6 +199,7 @@
'stylesheets/common/mf-common.css',
'stylesheets/common/ui.css',
'stylesheets/common/mf-typography.css',
+ 'stylesheets/common/mf-footer.css',
// FIXME: move to module mobile.stable.styles for some reason
it breaks RTL when in that module
'stylesheets/common/mf-navigation.css',
),
diff --git a/includes/skins/SkinMobile.php b/includes/skins/SkinMobile.php
index 8fd29b9..b0cacb3 100644
--- a/includes/skins/SkinMobile.php
+++ b/includes/skins/SkinMobile.php
@@ -74,9 +74,8 @@
} else {
$suffix = '';
}
- $license = Html::element( 'img', array(
+ $sitename = Html::element( 'img', array(
'src' => $wgMFCustomLogos['copyright'],
- 'class' => 'license',
'alt' => "{$footerSitename}" . $suffix
) );
} else {
@@ -85,11 +84,11 @@
} else {
$suffix = '';
}
- $license = Html::element( 'span', array( 'class' =>
'license' ),
+ $sitename = Html::element( 'span', array(),
"{$footerSitename}" . $suffix
);
}
- $tpl->set( 'license', $license );
+ $tpl->set( 'sitename', $sitename );
// @todo: kill me with fire
if ( version_compare( $wgVersion, '1.20alpha', '<' ) ) {
@@ -109,8 +108,6 @@
*/
public function prepareTemplateLinks( QuickTemplate $tpl ) {
$title = $this->getTitle();
- $req = $this->getRequest();
- $ctx = MobileContext::singleton();
$returnToTitle = $title->getPrefixedText();
$donateTitle = SpecialPage::getTitleFor( 'Uploads' );
@@ -120,27 +117,17 @@
$donateUrl = static::getLoginUrl( array( 'returnto' =>
$donateTitle ) );
}
- // urls that do not vary on authentication status
- if ( !$title->isSpecialPage() ) {
- $historyUrl = $ctx->getMobileUrl( wfExpandUrl(
$req->appendQuery( 'action=history' ) ) );
- $historyKey =
'mobile-frontend-footer-contributors-text';
- // FIXME: this creates a link with class external - it
should be local
- $historyLink = wfMessage( $historyKey,
htmlspecialchars( $historyUrl ) )->parse();
- } else {
- $historyLink = '';
- }
$nearbyUrl = SpecialPage::getTitleFor( 'Nearby'
)->getLocalURL();
$settingsUrl = SpecialPage::getTitleFor( 'MobileOptions' )->
getLocalUrl( array( 'returnto' => $returnToTitle ) );
// set urls
$tpl->set( 'donateImageUrl', $donateUrl );
- $tpl->set( 'historyLink', $historyLink );
$tpl->set( 'nearbyURL', $nearbyUrl );
$tpl->set( 'settingsUrl', $settingsUrl );
- $tpl->set( 'disclaimerLink', $this->disclaimerLink() );
- $tpl->set( 'privacyLink', $this->footerLink(
'mobile-frontend-privacy-link-text', 'privacypage' ) );
- $tpl->set( 'aboutLink', $this->footerLink(
'mobile-frontend-about-link-text', 'aboutpage' ) );
+ $tpl->set( 'disclaimer', $this->disclaimerLink() );
+ $tpl->set( 'privacy', $this->footerLink(
'mobile-frontend-privacy-link-text', 'privacypage' ) );
+ $tpl->set( 'about', $this->footerLink(
'mobile-frontend-about-link-text', 'aboutpage' ) );
$tpl->set( 'logInOut', $this->getLogInOutLink() );
}
diff --git a/includes/skins/SkinMobileBase.php
b/includes/skins/SkinMobileBase.php
index 0f3d084..1e2006c 100644
--- a/includes/skins/SkinMobileBase.php
+++ b/includes/skins/SkinMobileBase.php
@@ -35,7 +35,9 @@
* @return String
*/
public function getPageClasses( $title ) {
- if ( $title->isMainPage() || $title->isSpecialPage() ) {
+ if ( $title->isMainPage() ) {
+ $className = 'page-Main_Page ';
+ } else if ( $title->isSpecialPage() ) {
$className = 'mw-mf-special ';
} else {
$className = '';
@@ -101,7 +103,9 @@
*/
protected function prepareTemplate() {
wfProfileIn( __METHOD__ );
- $lang = $this->getLanguage();
+ $title = $this->getTitle();
+ $ctx = MobileContext::singleton();
+ $req = $this->getRequest();
$tpl = $this->setupTemplate( $this->template );
$tpl->setRef( 'skin', $this );
@@ -114,7 +118,35 @@
$hookQuery = $this->hookOptions['toggle_view_desktop'];
$url = $this->getRequest()->appendQuery( $hookQuery ) .
urlencode( $url );
}
- $tpl->set( 'viewNormalSiteURL', $url );
+ $url = htmlspecialchars( $url );
+
+ $desktop = wfMessage( 'mobile-frontend-view-desktop'
)->escaped();
+ $mobile = wfMessage( 'mobile-frontend-view-mobile' )->escaped();
+
+ $switcherHtml = <<<HTML
+<span class="left separator"><a id="mw-mf-display-toggle"
href="{$url}">{$desktop}
+</a></span><span class="right">{$mobile}</span>
+HTML;
+
+ // urls that do not vary on authentication status
+ if ( !$title->isSpecialPage() ) {
+ $historyUrl = $ctx->getMobileUrl( wfExpandUrl(
$req->appendQuery( 'action=history' ) ) );
+ // FIXME: this creates a link with class external - it
should be local
+ $historyLink = wfMessage(
'mobile-frontend-footer-contributors-text',
+ $historyUrl )->parse();
+ } else {
+ $historyLink = '';
+ }
+ $licenseText = wfMessage( 'mobile-frontend-footer-license-text'
)->parse();
+ $termsUse = wfMessage( 'mobile-frontend-terms-use-text'
)->parse();
+
+ $noticeHtml = <<<HTML
+{$historyLink}<br>
+{$licenseText}<span> | {$termsUse}</span>
+HTML;
+
+ $tpl->set( 'mobile-switcher', $switcherHtml );
+ $tpl->set( 'mobile-notice', $noticeHtml );
$tpl->set( 'mainPageUrl', Title::newMainPage()->getLocalUrl() );
$tpl->set( 'randomPageUrl', SpecialPage::getTitleFor(
'Randompage' )->getLocalUrl() );
$tpl->set( 'watchlistUrl', SpecialPage::getTitleFor(
'Watchlist' )->getLocalUrl() );
diff --git a/includes/skins/SkinMobileTemplate.php
b/includes/skins/SkinMobileTemplate.php
index 5ee26fb..6e5d0b3 100644
--- a/includes/skins/SkinMobileTemplate.php
+++ b/includes/skins/SkinMobileTemplate.php
@@ -140,33 +140,40 @@
private function footer() {
?>
- <div id="footer">
+ <div id="footer">
+ <h2 id="section_footer">
+ <?php $this->html( 'sitename' ); ?>
+ </h2>
+ <div id="content_footer">
<?php
- // @todo: make license icon and text dynamic
+ foreach( $this->getFooterLinks() as $category => $links
):
?>
- <h2 id="section_footer">
- <?php $this->html( 'license' ) ?>
- </h2>
- <div id="content_footer">
- <ul class="settings">
- <li>
- <span class="left separator"><a
id="mw-mf-display-toggle" href="<?php $this->text( 'viewNormalSiteURL' )
?>"><?php
- $this->msg(
'mobile-frontend-view-desktop' ) ?></a></span><span class="right"><?php
- $this->msg( 'mobile-frontend-view-mobile' )
?></span>
- </li>
- <li class="notice">
- <?php $this->html( 'historyLink' ) ?><br>
- <?php echo wfMessage(
'mobile-frontend-footer-license-text' )->parse() ?>
- <span>| <?php echo wfMessage(
'mobile-frontend-terms-use-text' )->parse() ?></span>
- </li>
- </ul>
- <ul class="links">
- <li><?php $this->html( 'privacyLink' ) ?></li><li>
- <?php $this->html( 'aboutLink' ) ?></li><li>
- <?php $this->html( 'disclaimerLink' ) ?></li>
- </ul>
- </div><!-- close footer.div / #content_footer -->
- </div><!-- close #footer -->
- <?php
+ <ul class="footer-<?php echo $category; ?>">
+ <?php foreach( $links as $link ): ?><li
id="footer-<?php echo $category ?>-<?php echo $link ?>"><?php $this->html(
$link ) ?></li><?php endforeach; ?>
+ </ul>
+ <?php endforeach; ?>
+ </div>
+ </div>
+ <?php
+ }
+
+ /**
+ * Returns an array of footerlinks trimmed down to only those footer
links that
+ * are valid.
+ * $option currently unused in mobile
+ * @return array|mixed
+ */
+ public function getFooterLinks( $option = null ) {
+ return array(
+ 'notice' => array(
+ 'mobile-switcher',
+ 'mobile-notice',
+ ),
+ 'places' => array(
+ 'privacy',
+ 'about',
+ 'disclaimer',
+ ),
+ );
}
}
diff --git a/less/common/mf-footer.less b/less/common/mf-footer.less
index 7cb9f69..2ae0bee 100644
--- a/less/common/mf-footer.less
+++ b/less/common/mf-footer.less
@@ -15,36 +15,24 @@
height: 24px;
display: block;
margin: 0;
- font-size: 1em;
+ font-weight: bold;
+ font-size: @baseFontSize;
+ line-height: 22px;
+
+ img {
+ margin-top: 3px; /* (22px line height - 16px height) /
2) */
+ height: 16px;
+ }
+
+ ul, span {
+ float: left;
+ margin-right: 4px;
+ }
}
div {
font-size: @baseFontSize * 0.9;
clear: both;
- }
-
- .license {
- float: left;
- margin-right: 4px;
- }
-
- img.license {
- margin-top: 3px; /* (22px line height - 16px height) / 2) */
- height: 16px;
- }
-
- .links {
- text-align: center;
-
- li {
- display: inline-block;
- width: 33%;
- font-size: 0.9em;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- line-height: 1.4;
- }
}
ul {
@@ -54,7 +42,19 @@
list-style: none;
margin: 0;
- &.settings {
+ &.footer-places {
+ li {
+ display: inline-block;
+ width: 33%;
+ font-size: 0.9em;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ line-height: 1.4;
+ }
+ }
+
+ &.footer-notice {
.left,
.right {
width: 48%;
@@ -74,25 +74,36 @@
}
}
- .notice .terms {
+ .footer-notice .terms {
float: left;
- }
-
- .license {
- font-weight: bold;
- font-size: @baseFontSize;
- line-height: 22px;
}
}
-html[dir="rtl"] #footer .settings li:first-child .left:before,
-html[dir="ltr"] #footer .settings li:first-child .left:after {
+/* FIXME: Desktop specific style - move out of css served to mobile */
+.skin-minerva {
+ #footer {
+ ul.footer-places {
+ li {
+ width: 25%;
+ }
+ }
+ }
+}
+
+.mw-mf-special {
+ #footer {
+ display: none;
+ }
+}
+
+html[dir="rtl"] #footer .footer-notice li:first-child .left:before,
+html[dir="ltr"] #footer .footer-notice li:first-child .left:after {
content: " | ";
visibility: visible;
}
-html[dir="rtl"] #footer .settings .left:before,
-html[dir="ltr"] #footer .settings .left:after {
+html[dir="rtl"] #footer .footer-notice .left:before,
+html[dir="ltr"] #footer .footer-notice .left:after {
content: " | ";
visibility: hidden;
}
@@ -108,13 +119,13 @@
font-size: 0.9em;
}
- #footer .links li {
+ #footer ul.footer-places li {
font-size: 1.1em;
}
}
@media all and (min-width: 500px) {
- #footer .links li {
+ #footer ul.footer-places li {
font-size: 1.2em;
}
}
diff --git a/stylesheets/common/mf-footer.css b/stylesheets/common/mf-footer.css
index a6c0c38..3183178 100644
--- a/stylesheets/common/mf-footer.css
+++ b/stylesheets/common/mf-footer.css
@@ -15,33 +15,24 @@
height: 24px;
display: block;
margin: 0;
+ font-weight: bold;
font-size: 1em;
+ line-height: 22px;
}
-#footer div {
- font-size: 0.9em;
- clear: both;
-}
-#footer .license {
- float: left;
- margin-right: 4px;
-}
-#footer img.license {
+#footer h2 img {
margin-top: 3px;
/* (22px line height - 16px height) / 2) */
height: 16px;
}
-#footer .links {
- text-align: center;
+#footer h2 ul,
+#footer h2 span {
+ float: left;
+ margin-right: 4px;
}
-#footer .links li {
- display: inline-block;
- width: 33%;
+#footer div {
font-size: 0.9em;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- line-height: 1.4;
+ clear: both;
}
#footer ul {
text-align: center;
@@ -50,35 +41,46 @@
list-style: none;
margin: 0;
}
-#footer ul.settings .left,
-#footer ul.settings .right {
+#footer ul.footer-places li {
+ display: inline-block;
+ width: 33%;
+ font-size: 0.9em;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ line-height: 1.4;
+}
+#footer ul.footer-notice .left,
+#footer ul.footer-notice .right {
width: 48%;
display: inline-block;
box-sizing: border-box;
}
-#footer ul.settings .left {
+#footer ul.footer-notice .left {
text-align: right;
padding-right: 2px;
}
-#footer ul.settings .right {
+#footer ul.footer-notice .right {
text-align: left;
padding-left: 2px;
}
-#footer .notice .terms {
+#footer .footer-notice .terms {
float: left;
}
-#footer .license {
- font-weight: bold;
- font-size: 1em;
- line-height: 22px;
+/* FIXME: Desktop specific style - move out of css served to mobile */
+.skin-minerva #footer ul.footer-places li {
+ width: 25%;
}
-html[dir="rtl"] #footer .settings li:first-child .left:before,
-html[dir="ltr"] #footer .settings li:first-child .left:after {
+.mw-mf-special #footer {
+ display: none;
+}
+html[dir="rtl"] #footer .footer-notice li:first-child .left:before,
+html[dir="ltr"] #footer .footer-notice li:first-child .left:after {
content: " | ";
visibility: visible;
}
-html[dir="rtl"] #footer .settings .left:before,
-html[dir="ltr"] #footer .settings .left:after {
+html[dir="rtl"] #footer .footer-notice .left:before,
+html[dir="ltr"] #footer .footer-notice .left:after {
content: " | ";
visibility: hidden;
}
@@ -89,12 +91,12 @@
#footer .content_block {
font-size: 0.9em;
}
- #footer .links li {
+ #footer ul.footer-places li {
font-size: 1.1em;
}
}
@media all and (min-width: 500px) {
- #footer .links li {
+ #footer ul.footer-places li {
font-size: 1.2em;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/58426
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1253edfaa5af3d7782a87caf2e3ab0c9b3ae66f0
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: MaxSem <[email protected]>
Gerrit-Reviewer: awjrichards <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
