JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/61474
Change subject: Story 487: Footer update
......................................................................
Story 487: Footer update
* Last modified is a link pointing to page history (text is also the
same size as footer text).
* About and Disclaimers links removed.
* "Page by contributors like you" removed.
* Footer markup simplified, CSS redone.
* logo-copyright-en.png cropped (removed a bit of white background) to
avoid using vertical-align for centering.
Change-Id: Ifd6dff45b7931348db60abed76952d74d7947db4
---
M MobileFrontend.i18n.php
M images/logo-copyright-en.png
M includes/skins/SkinMobile.php
M includes/skins/SkinMobileBase.php
M includes/skins/SkinMobileTemplate.php
M javascripts/common/mf-history-jquery.js
M less/common/mf-common.less
M less/common/mf-footer.less
M stylesheets/common/mf-common.css
M stylesheets/common/mf-footer.css
10 files changed, 118 insertions(+), 274 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/74/61474/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 23c6cd4..b716980 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -62,7 +62,6 @@
'mobile-frontend-missing-image' => 'Image',
'mobile-frontend-off' => 'OFF',
'mobile-frontend-on' => 'ON',
- 'mobile-frontend-footer-contributors-text' => 'Page by [$1
contributors] like you',
'mobile-frontend-featured-article' => 'Today\'s Featured Article',
'mobile-frontend-news-items' => 'In The News',
'mobile-frontend-language' => 'Language:',
@@ -98,9 +97,8 @@
'mobile-frontend-dismiss-notification' => 'dismiss this notification',
'mobile-frontend-clear-search' => 'Clear',
'mobile-frontend-privacy-link-text' => 'Privacy',
- 'mobile-frontend-about-link-text' => 'About',
'mobile-frontend-footer-sitename' => '{{SITENAME}}',
- 'mobile-frontend-footer-license-text' => 'Content available under
[//en.m.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License?useformat=mobile
CC BY-SA 3.0]',
+ 'mobile-frontend-footer-license-text' => 'Text is available under the
[//en.m.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License?useformat=mobile
CC BY-SA 3.0]; additional terms may apply.',
'mobile-frontend-terms-use-text' =>
'[//wikimediafoundation.org/wiki/Terms_of_use?useformat=mobile Terms of Use]',
'mobile-frontend-footer-contact' => 'Contact',
'mobile-frontend-search-noresults' => 'No page titles match your
search. Change your search, or press the keyboard search button to search
inside pages.',
@@ -328,7 +326,6 @@
{{Identical|Image}}',
'mobile-frontend-off' => 'On settings page signals that a feature will
be turned off. Appears in {{msg-mw|Mobile-frontend-toggle-images}}.',
'mobile-frontend-on' => 'On settings page signals that a feature will
be turned on. Appears in {{msg-mw|Mobile-frontend-toggle-images}}.',
- 'mobile-frontend-footer-contributors-text' => 'Link to history page',
'mobile-frontend-featured-article' => 'The title that will appear
before the element with the mf-tfa selector.',
'mobile-frontend-news-items' => 'The title that will appear before the
element with the mf-itn selector.',
'mobile-frontend-language' => '{{Identical|Language}}',
@@ -431,8 +428,6 @@
{{Identical|Clear}}',
'mobile-frontend-privacy-link-text' => 'Custom version of "Privacy
policy" link text for mobile footer, intended to be as brief as possible to
take up as little screen real estate as possible.
{{Identical|Privacy}}',
- 'mobile-frontend-about-link-text' => 'Custom version of "About
<nowiki>{{SITENAME}}</nowiki>" link text for mobile footer, intended to be as
brief as possible to take up as little screen real estate as possible.
-{{Identical|About}}',
'mobile-frontend-footer-sitename' => 'Name of site',
'mobile-frontend-footer-license-text' => 'License shown in footer',
'mobile-frontend-terms-use-text' => 'Label for terms of use link',
diff --git a/images/logo-copyright-en.png b/images/logo-copyright-en.png
index 62384fa..e5afa88 100644
--- a/images/logo-copyright-en.png
+++ b/images/logo-copyright-en.png
Binary files differ
diff --git a/includes/skins/SkinMobile.php b/includes/skins/SkinMobile.php
index 750898b..9923472 100644
--- a/includes/skins/SkinMobile.php
+++ b/includes/skins/SkinMobile.php
@@ -6,7 +6,7 @@
public $template = 'SkinMobileTemplate';
protected function prepareTemplate() {
- global $wgAppleTouchIcon, $wgMFCustomLogos, $wgVersion,
$wgMFTrademarkSitename;
+ global $wgAppleTouchIcon, $wgVersion;
wfProfileIn( __METHOD__ );
$tpl = parent::prepareTemplate();
@@ -45,6 +45,7 @@
$this->prepareTemplatePageContent( $tpl );
$this->prepareTemplateLinks( $tpl );
+ $this->prepareFooterLinks( $tpl );
$tpl->set( 'language_urls', $this->getLanguages() );
$tpl->set( 'isMainPage', $title->isMainPage() );
@@ -57,33 +58,6 @@
$tpl = $this->attachResources( $title, $tpl, $device );
$tpl->set( 'isSpecialPage', $title->isSpecialPage() );
-
- // footer
- $tpl->set( 'copyright', $this->getCopyright() );
-
-
- $footerSitename = $this->msg( 'mobile-frontend-footer-sitename'
)->text();
- if ( is_array( $wgMFCustomLogos ) && isset(
$wgMFCustomLogos['copyright'] ) ) {
- if ( $wgMFTrademarkSitename ) {
- $suffix = ' ®';
- } else {
- $suffix = '';
- }
- $sitename = Html::element( 'img', array(
- 'src' => $wgMFCustomLogos['copyright'],
- 'alt' => "{$footerSitename}" . $suffix
- ) );
- } else {
- if ( $wgMFTrademarkSitename ) {
- $suffix = ' ™';
- } else {
- $suffix = '';
- }
- $sitename = Html::element( 'span', array(),
- "{$footerSitename}" . $suffix
- );
- }
- $tpl->set( 'sitename', $sitename );
wfProfileOut( __METHOD__ );
return $tpl;
@@ -114,11 +88,68 @@
$tpl->set( 'donateImageUrl', $donateUrl );
$tpl->set( 'nearbyURL', $nearbyUrl );
$tpl->set( 'settingsUrl', $settingsUrl );
- $tpl->set( 'disclaimer', $this->disclaimerLink() );
- $tpl->set( 'privacy', $this->footerLink(
'mobile-frontend-privacy-link-text', 'privacypage' ) );
$tpl->set( 'loginLogoutText', $link['text'] );
$tpl->set( 'loginLogoutUrl', $link['href'] );
- $tpl->set( 'about', $this->footerLink(
'mobile-frontend-about-link-text', 'aboutpage' ) );
+ }
+
+ /**
+ * Returns the site name for the footer, either as a text or <img> tag
+ */
+ protected function getSitename() {
+ global $wgMFCustomLogos, $wgMFTrademarkSitename;
+
+ $footerSitename = $this->msg( 'mobile-frontend-footer-sitename'
)->text();
+
+ if ( is_array( $wgMFCustomLogos ) && isset(
$wgMFCustomLogos['copyright'] ) ) {
+ $suffix = $wgMFTrademarkSitename ? ' ®' : '';
+ $sitename = Html::element( 'img', array(
+ 'src' => $wgMFCustomLogos['copyright'],
+ 'alt' => $footerSitename . $suffix
+ ) );
+ } else {
+ $suffix = $wgMFTrademarkSitename ? ' ™' : '';
+ $sitename = $footerSitename . $suffix;
+ }
+
+ return $sitename;
+ }
+
+ /**
+ * Prepares links used in the footer
+ * @param QuickTemplate
+ */
+ protected function prepareFooterLinks( $tpl ) {
+ $ctx = MobileContext::singleton();
+ $req = $this->getRequest();
+
+ $url = MobileContext::singleton()->getDesktopUrl( wfExpandUrl(
+ $req->appendQuery( 'mobileaction=toggle_view_desktop' )
+ ) );
+ if ( is_array( $this->hookOptions ) && isset(
$this->hookOptions['toggle_view_desktop'] ) ) {
+ $hookQuery = $this->hookOptions['toggle_view_desktop'];
+ $url = $req->appendQuery( $hookQuery ) . urlencode(
$url );
+ }
+ $url = htmlspecialchars( $url );
+
+ $desktop = wfMessage( 'mobile-frontend-view-desktop'
)->escaped();
+ $mobile = wfMessage( 'mobile-frontend-view-mobile' )->escaped();
+
+ $switcherHtml = <<<HTML
+<h2>{$this->getSitename()}</h2>
+<ul>
+ <li>{$mobile}</li><li><a id="mw-mf-display-toggle"
href="{$url}">{$desktop}</a></li>
+</ul>
+HTML;
+
+ $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();
+ $licenseText = wfMessage( 'mobile-frontend-footer-license-text'
)->parse();
+
+ $tpl->set( 'mobile-switcher', $switcherHtml );
+ $tpl->set( 'mobile-license', $licenseText );
+ $tpl->set( 'privacy', $this->footerLink(
'mobile-frontend-privacy-link-text', 'privacypage' ) );
+ $tpl->set( 'terms-use', wfMessage(
'mobile-frontend-terms-use-text' )->parse() );
}
/**
@@ -150,7 +181,8 @@
$user = $this->getUser();
$userLogin = $title->isSpecial( 'Userlogin' );
$out = $this->getOutput();
- $inAlpha = MobileContext::singleton()->isAlphaGroupMember();
+ $ctx = MobileContext::singleton();
+ $inAlpha = $ctx->isAlphaGroupMember();
if ( $userLogin ) {
$pageHeading = $this->getLoginPageHeading();
@@ -182,14 +214,19 @@
}
}
+ // add last modified timestamp
$timestamp = Revision::getTimestampFromId(
$this->getTitle(), $this->getRevisionId() );
$lastModified = wfMessage(
'mobile-frontend-last-modified-date',
$this->getLanguage()->userDate( $timestamp,
$user ),
$this->getLanguage()->userTime( $timestamp,
$user )
)->parse();
$timestamp = wfTimestamp( TS_UNIX, $timestamp );
- // add last modified timestamp
- $postBodyText = "<p id=\"mw-mf-last-modified\"
data-timestamp=\"$timestamp\">$lastModified</p>";
+ $historyUrl = $ctx->getMobileUrl( wfExpandUrl(
$this->getRequest()->appendQuery( 'action=history' ) ) );
+ $postBodyText = Html::element( 'a', array(
+ 'id' => 'mw-mf-last-modified',
+ 'data-timestamp' => $timestamp,
+ 'href' => $historyUrl
+ ), $lastModified );
}
$htmlHeader = $this->getOutput()->getProperty(
'mobile.htmlHeader' );
diff --git a/includes/skins/SkinMobileBase.php
b/includes/skins/SkinMobileBase.php
index 21451cb..1d9e984 100644
--- a/includes/skins/SkinMobileBase.php
+++ b/includes/skins/SkinMobileBase.php
@@ -103,7 +103,6 @@
*/
protected function prepareTemplate() {
wfProfileIn( __METHOD__ );
- $title = $this->getTitle();
$ctx = MobileContext::singleton();
$req = $this->getRequest();
@@ -111,42 +110,6 @@
$tpl->setRef( 'skin', $this );
$tpl->set( 'wgScript', wfScript() );
- $url = MobileContext::singleton()->getDesktopUrl( wfExpandUrl(
- $this->getRequest()->appendQuery(
'mobileaction=toggle_view_desktop' )
- ) );
- if ( is_array( $this->hookOptions ) && isset(
$this->hookOptions['toggle_view_desktop'] ) ) {
- $hookQuery = $this->hookOptions['toggle_view_desktop'];
- $url = $this->getRequest()->appendQuery( $hookQuery ) .
urlencode( $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 666e9f9..78e4e87 100644
--- a/includes/skins/SkinMobileTemplate.php
+++ b/includes/skins/SkinMobileTemplate.php
@@ -96,18 +96,13 @@
private function footer() {
?>
<div id="footer">
- <h2 id="section_footer">
- <?php $this->html( 'sitename' ); ?>
- </h2>
- <div id="content_footer">
- <?php
- foreach( $this->getFooterLinks() as $category => $links
):
- ?>
+ <?php
+ foreach( $this->getFooterLinks() as $category
=> $links ):
+ ?>
<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
}
@@ -181,19 +176,18 @@
/**
* Returns an array of footerlinks trimmed down to only those footer
links that
* are valid.
- * $option currently unused in mobile
+ * @param $option currently unused in mobile
* @return array|mixed
*/
public function getFooterLinks( $option = null ) {
return array(
- 'notice' => array(
+ 'info' => array(
'mobile-switcher',
- 'mobile-notice',
+ 'mobile-license',
),
'places' => array(
+ 'terms-use',
'privacy',
- 'about',
- 'disclaimer',
),
);
}
diff --git a/javascripts/common/mf-history-jquery.js
b/javascripts/common/mf-history-jquery.js
index 0fbad0f..19d56a3 100644
--- a/javascripts/common/mf-history-jquery.js
+++ b/javascripts/common/mf-history-jquery.js
@@ -22,12 +22,6 @@
$( this ).attr( 'href',
updateQueryStringParameter( href, 'returnto', title ) );
}
} );
- $( '#content_footer .notice a' ).each( function() {
- var href = $( this ).attr( 'href' );
- if ( href.indexOf( 'action=history' ) > -1 ) {
- $( this ).attr( 'href',
updateQueryStringParameter( href, 'title', title ) );
- }
- } );
}
function gatherLanguages() {
diff --git a/less/common/mf-common.less b/less/common/mf-common.less
index 2de067b..0e9df6c 100644
--- a/less/common/mf-common.less
+++ b/less/common/mf-common.less
@@ -255,7 +255,9 @@
}
#mw-mf-last-modified {
- margin-top: 1em;
+ display: block;
+ font-size: .9em;
+ margin-top: 1.5em;
}
#disableButtons {
diff --git a/less/common/mf-footer.less b/less/common/mf-footer.less
index 2ae0bee..7e02893 100644
--- a/less/common/mf-footer.less
+++ b/less/common/mf-footer.less
@@ -6,126 +6,43 @@
#footer {
padding: 12px @contentMarginRight 12px @contentMarginLeft;
- border-top: solid 1px #aaa;
- line-height: 24px;
- position: relative;
+ border-top: 1px solid #aaa;
clear: both; /* cancel any floating in the content */
+ font-size: @baseFontSize * 0.9;
h2 {
- height: 24px;
- display: block;
+ display: inline;
margin: 0;
font-weight: bold;
font-size: @baseFontSize;
- line-height: 22px;
img {
- margin-top: 3px; /* (22px line height - 16px height) /
2) */
- height: 16px;
+ height: 1em;
}
-
- ul, span {
- float: left;
- margin-right: 4px;
- }
- }
-
- div {
- font-size: @baseFontSize * 0.9;
- clear: both;
}
ul {
text-align: center;
- width: 100%;
- padding: 0;
list-style: none;
margin: 0;
- &.footer-places {
- li {
- display: inline-block;
- width: 33%;
- font-size: 0.9em;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- line-height: 1.4;
- }
+ li {
+ line-height: 1.2;
+ margin: 0 0 .3em 0;
}
- &.footer-notice {
- .left,
- .right {
- width: 48%;
- display: inline-block;
- box-sizing: border-box;
- }
+ ul {
+ display: inline
+ }
- .left {
- text-align: right;
- padding-right: 2px;
- }
+ ul li,
+ &.footer-places li {
+ display: inline;
+ padding: 0 8px;
- .right {
- text-align: left;
- padding-left: 2px;
+ &:first-child {
+ border-right: 1px solid #aaa;
}
}
- }
-
- .footer-notice .terms {
- float: left;
- }
-}
-
-/* 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 .footer-notice .left:before,
-html[dir="ltr"] #footer .footer-notice .left:after {
- content: " | ";
- visibility: hidden;
-}
-
-body {
- #section_footer button {
- height: 22px;
- }
-}
-
-@media all and (min-width: 330px) {
- #footer .content_block {
- font-size: 0.9em;
- }
-
- #footer ul.footer-places li {
- font-size: 1.1em;
- }
-}
-
-@media all and (min-width: 500px) {
- #footer ul.footer-places li {
- font-size: 1.2em;
}
}
diff --git a/stylesheets/common/mf-common.css b/stylesheets/common/mf-common.css
index 674e88c..104a5ab 100644
--- a/stylesheets/common/mf-common.css
+++ b/stylesheets/common/mf-common.css
@@ -216,7 +216,9 @@
display: none;
}
#mw-mf-last-modified {
- margin-top: 1em;
+ display: block;
+ font-size: .9em;
+ margin-top: 1.5em;
}
#disableButtons {
text-align: center;
diff --git a/stylesheets/common/mf-footer.css b/stylesheets/common/mf-footer.css
index 3183178..1bda9b1 100644
--- a/stylesheets/common/mf-footer.css
+++ b/stylesheets/common/mf-footer.css
@@ -4,99 +4,39 @@
*/
#footer {
padding: 12px 23px 12px 23px;
- border-top: solid 1px #aaa;
- line-height: 24px;
- position: relative;
+ border-top: 1px solid #aaa;
clear: both;
/* cancel any floating in the content */
+ font-size: 0.9em;
}
#footer h2 {
- height: 24px;
- display: block;
+ display: inline;
margin: 0;
font-weight: bold;
font-size: 1em;
- line-height: 22px;
}
#footer h2 img {
- margin-top: 3px;
- /* (22px line height - 16px height) / 2) */
-
- height: 16px;
-}
-#footer h2 ul,
-#footer h2 span {
- float: left;
- margin-right: 4px;
-}
-#footer div {
- font-size: 0.9em;
- clear: both;
+ height: 1em;
}
#footer ul {
text-align: center;
- width: 100%;
- padding: 0;
list-style: none;
margin: 0;
}
+#footer ul li {
+ line-height: 1.2;
+ margin: 0 0 .3em 0;
+}
+#footer ul ul {
+ display: inline;
+}
+#footer ul ul li,
#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;
+ display: inline;
+ padding: 0 8px;
}
-#footer ul.footer-notice .left,
-#footer ul.footer-notice .right {
- width: 48%;
- display: inline-block;
- box-sizing: border-box;
-}
-#footer ul.footer-notice .left {
- text-align: right;
- padding-right: 2px;
-}
-#footer ul.footer-notice .right {
- text-align: left;
- padding-left: 2px;
-}
-#footer .footer-notice .terms {
- float: left;
-}
-/* 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 .footer-notice .left:before,
-html[dir="ltr"] #footer .footer-notice .left:after {
- content: " | ";
- visibility: hidden;
-}
-body #section_footer button {
- height: 22px;
-}
-@media all and (min-width: 330px) {
- #footer .content_block {
- font-size: 0.9em;
- }
- #footer ul.footer-places li {
- font-size: 1.1em;
- }
-}
-@media all and (min-width: 500px) {
- #footer ul.footer-places li {
- font-size: 1.2em;
- }
+#footer ul ul li:first-child,
+#footer ul.footer-places li:first-child {
+ border-right: 1px solid #aaa;
}
--
To view, visit https://gerrit.wikimedia.org/r/61474
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ifd6dff45b7931348db60abed76952d74d7947db4
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
