Brion VIBBER has uploaded a new change for review.
https://gerrit.wikimedia.org/r/144342
Change subject: Work in progress: Footer updates
......................................................................
Work in progress: Footer updates
* update to match new design
* 'last modified' bit shows green if mod <1day
* new language text/layout
* wikifont glyph icons
* tiny license footer
Todo:
* make last-mod clickable
* test on iPad
* test RTL
* fix last-mod time
* plural fixes?
Change-Id: Ic69804ac687e36757d5ddc5c86a0d4a3155c77ff
---
M wikipedia/View Controllers/WebView/WebViewController.m
M wikipedia/assets/bundle.js
M wikipedia/assets/footer.css
M wikipedia/en.lproj/Localizable.strings
M wikipedia/qqq.lproj/Localizable.strings
M www/js/listeners.js
M www/less/langbutton.less
M www/less/lastmod.less
8 files changed, 152 insertions(+), 109 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/apps/ios/wikipedia
refs/changes/42/144342/1
diff --git a/wikipedia/View Controllers/WebView/WebViewController.m
b/wikipedia/View Controllers/WebView/WebViewController.m
index 224ce08..9579b90 100644
--- a/wikipedia/View Controllers/WebView/WebViewController.m
+++ b/wikipedia/View Controllers/WebView/WebViewController.m
@@ -49,6 +49,8 @@
#import "AccountCreationViewController.h"
#import "OnboardingViewController.h"
#import "TopMenuContainerView.h"
+#import "WikiGlyph_Chars.h"
+
//#import "UIView+Debugging.h"
#define TOC_TOGGLE_ANIMATION_DURATION @0.3f
@@ -1584,8 +1586,10 @@
if ((mode != DISPLAY_LEAD_SECTION) && ![[SessionSingleton
sharedInstance] isCurrentArticleMain]) {
- [sectionTextArray addObject: [self renderLanguageButtonForCount:
langCount.integerValue]];
+ [sectionTextArray addObject: [self renderFooterDivider]];
[sectionTextArray addObject: [self renderLastModified:lastModified
by:lastModifiedBy]];
+ [sectionTextArray addObject: [self renderLanguageButtonForCount:
langCount.integerValue]];
+ [sectionTextArray addObject: [self renderLicenseFooter]];
}
@@ -1618,6 +1622,11 @@
}];
}
+-(NSString *)renderFooterDivider
+{
+ return @"<hr class=\"mw-footer-divider\">";
+}
+
-(NSString *)renderLanguageButtonForCount:(NSInteger)count
{
if (count > 0) {
@@ -1625,11 +1634,15 @@
MWLanguageInfo *lang = [MWLanguageInfo languageInfoForCode:langCode];
NSString *dir = lang.dir;
- NSString *aa = @"<span class=\"mw-language-icon\">Aあ</span>";
- NSString *countStr = [NSString stringWithFormat:@"<span
class=\"mw-language-count\">%d</span>", (int)count];
- NSString *otherLanguages = [NSString stringWithFormat:@"<span
class=\"mw-language-label\">%@</span>",
MWLocalizedString(@"language-button-other-languages", nil)];
+ NSString *icon = WIKIGLYPH_TRANSLATE;
+ NSString *text = [NSString
localizedStringWithFormat:MWLocalizedString(@"language-button-text", nil),
(int)count];
- return [NSString stringWithFormat:@"<button dir=\"%@\"
class=\"mw-language-button\"><span
class=\"mw-language-items\">%@%@%@</span></button>", dir, aa, countStr,
otherLanguages];
+ return [NSString stringWithFormat:@"<button dir=\"%@\"
class=\"mw-language-button mw-footer-button\">"
+ @"<div>"
+ @"<span><span
class=\"mw-footer-icon\">%@</span></span>"
+ @"<span>%@</span>"
+ @"</div>"
+ @"</button>", dir, icon, text];
} else {
return @"";
}
@@ -1640,8 +1653,10 @@
NSString *langCode = [[NSLocale preferredLanguages] objectAtIndex:0];
MWLanguageInfo *lang = [MWLanguageInfo languageInfoForCode:langCode];
NSString *dir = lang.dir;
+ NSString *icon = WIKIGLYPH_PENCIL;
NSString *ts = [WikipediaAppUtils relativeTimestamp:date];
+ NSString *recent = (fabs([date timeIntervalSinceNow]) < 60*60*24) ?
@"recent" : @"";
NSString *lm = [MWLocalizedString(@"lastmodified-timestamp", nil)
stringByReplacingOccurrencesOfString:@"$1" withString:ts];
NSString *by;
if (username && ![username isEqualToString:@""]) {
@@ -1650,7 +1665,25 @@
by = MWLocalizedString(@"lastmodified-anon", nil);
}
- return [NSString stringWithFormat:@"<div dir=\"%@\"
class=\"mw-last-modified\">%@<br>%@</div>", dir, lm, by];
+ return [NSString stringWithFormat:@"<button dir=\"%@\"
class=\"mw-last-modified mw-footer-button %@\">"
+ @"<div>"
+ @"<span><span class=\"mw-footer-icon\">%@</span></span>"
+ @"<span>%@<br>%@</span>"
+ @"</div>"
+ @"</button>", dir, recent, icon, lm, by];
+}
+
+-(NSString *)renderLicenseFooter
+{
+ NSString *langCode = [[NSLocale preferredLanguages] objectAtIndex:0];
+ MWLanguageInfo *lang = [MWLanguageInfo languageInfoForCode:langCode];
+ NSString *dir = lang.dir;
+
+ NSString *licenseName = MWLocalizedString(@"license-footer-name", nil);
+ NSString *licenseLink = [NSString stringWithFormat:@"<a
href=\"https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License\";>%@</a>",
licenseName];
+ NSString *licenseText = [MWLocalizedString(@"license-footer-text", nil)
stringByReplacingOccurrencesOfString:@"$1" withString:licenseLink];
+
+ return [NSString stringWithFormat:@"<div dir=\"%@\"
class=\"mw-license-footer\">%@</div>", dir, licenseText];
}
#pragma mark Scroll to last section after rotate
diff --git a/wikipedia/assets/bundle.js b/wikipedia/assets/bundle.js
index 340f97b..4c3fae9 100644
--- a/wikipedia/assets/bundle.js
+++ b/wikipedia/assets/bundle.js
@@ -194,7 +194,7 @@
if (selectorName && candidate.tagName &&
selectorName.toLowerCase() !== candidate.tagName.toLowerCase()) {
break;
}
- if (selectorClass && selectorClass !== candidate.className) {
+ if (selectorClass &&
!candidate.classList.contains(selectorClass)) {
break;
}
if (selectorId && selectorId !== candidate.id) {
diff --git a/wikipedia/assets/footer.css b/wikipedia/assets/footer.css
index 007b16a..fe3f840 100644
--- a/wikipedia/assets/footer.css
+++ b/wikipedia/assets/footer.css
@@ -1,60 +1,59 @@
-.mw-language-button {
+.mw-footer-divider {
+ appearance: none;
+ -webkit-appearance: none;
+ display: block;
+ width: 100%;
+ height: 12px;
+ border: none;
+ background-image: url(footer-divider.png);
+ background-repeat: no-repeat;
+ background-size: 284px 12px;
+}
+.mw-footer-button {
appearance: none;
-webkit-appearance: none;
display: table;
- color: #aaa;
- background: #222;
- font-size: 24px;
- line-height: 24px;
+ width: 100%;
+ color: #808080;
+ font-size: 14px;
padding: 12px;
}
-.mw-language-items {
+.mw-footer-button > div {
display: table-row;
}
-.mw-language-icon,
-.mw-language-count,
-.mw-language-label {
+.mw-footer-button > div > span {
display: table-cell;
- vertical-align: middle;
- height: 24px;
}
-.mw-language-icon {
- color: white;
- white-space: nowrap;
- font-family: "AvenirNextCondensed-Medium";
-}
-.mw-language-button[dir=ltr] .mw-language-icon {
- text-align: right;
- padding-right: 12px;
- border-right: solid 1px #aaa;
-}
-.mw-language-button[dir=rtl] .mw-language-icon {
- text-align: left;
- border-left: solid 1px #aaa;
- padding-left: 12px;
-}
-.mw-language-count {
+.mw-footer-icon {
+ display: inline-block;
+ vertical-align: text-top;
text-align: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ font-family: "WikiFont";
+ font-size: 24px;
+ color: white;
+ background-color: #808080;
}
-.mw-language-button[dir=ltr] .mw-language-count {
+.mw-footer-button[dir=ltr] > div > span {
+ text-align: left;
+}
+.mw-footer-button[dir=rtl] > div > span {
+ text-align: right;
+}
+.mw-footer-button > div > span + span {
padding-left: 12px;
-}
-.mw-language-button[dir=rtl] .mw-language-count {
padding-right: 12px;
}
-.mw-language-label {
+.mw-license-footer {
+ text-align: center;
font-size: 10px;
}
-.mw-language-button[dir=ltr] .mw-language-label {
- text-align: left;
- padding-left: 12px;
-}
-.mw-language-button[dir=rtl] .mw-language-label {
- text-align: right;
- padding-right: 12px;
-}
-.mw-last-modified {
- margin-top: 1em;
+.mw-last-modified.recent {
color: #27aa65;
}
+.mw-last-modified.recent .mw-footer-icon {
+ background-color: #27aa65;
+}
diff --git a/wikipedia/en.lproj/Localizable.strings
b/wikipedia/en.lproj/Localizable.strings
index 6c5b9f3..ebcff13 100644
--- a/wikipedia/en.lproj/Localizable.strings
+++ b/wikipedia/en.lproj/Localizable.strings
@@ -3,7 +3,7 @@
"article-languages-downloading" = "Loading article languages...";
"article-languages-filter-placeholder" = "Language Filter";
-"language-button-other-languages" = "Other Languages";
+"language-button-text" = "You can read this article in %d other languages";
"history-label" = "Recent";
"history-section-today" = "Today";
@@ -165,3 +165,6 @@
"page_protected_other" = "This page has been protected to the following
levels: $1";
"page_protected_can_not_edit" = "You do not have the rights to edit this page";
"page_protected_can_not_edit_title" = "This page is protected";
+
+"license-footer-text" = "Content is available under $1";
+"license-footer-name" = "CC-BY-SA 3.0";
diff --git a/wikipedia/qqq.lproj/Localizable.strings
b/wikipedia/qqq.lproj/Localizable.strings
index cc26c79..31a3f88 100644
--- a/wikipedia/qqq.lproj/Localizable.strings
+++ b/wikipedia/qqq.lproj/Localizable.strings
@@ -7,6 +7,7 @@
"article-languages-cancel" = "Button text for dismissing the language selector
screen.\n{{Identical|Cancel}}";
"article-languages-downloading" = "Alert text shown when obtaining list of
languages in which an article is available";
"article-languages-filter-placeholder" = "Filter languages text box
placeholder text.";
+"language-button-text" = "Label for 'other languages' button in content area
footer. %d is placeholder for the number of available languages; note that
support for PLURAL string marking is not yet available, so make your message
generic if possible for now.";
"language-button-other-languages" = "Label for 'other languages' button in
content area. Button also shows the number of available languages, but an
indeterminate plural should be used here.";
"history-label" = "Header label for screen showing the users' in-app browsing
history.\n{{Identical|Recent}}";
"history-section-today" = "Subsection label for list of articles browsed
today.\n{{Identical|Today}}";
@@ -142,3 +143,5 @@
"onboarding-skip" = "Button text allowing first time users to skip the other
onboarding choices";
"preference_title_eventlogging_opt_in" = "Title of preference that when
checked enables data collection of user behavior.";
"preference_summary_eventlogging_opt_in" = "Description of preference that
when checked enables data collection of user behavior.";
+"license-footer-text" = "Brief footer text linking to CC-BY-SA license. '$1'
is placeholder for the license-footer-name message";
+"license-footer-name" = "License short name; usually leave untranslated as
CC-BY-SA 3.0";
diff --git a/www/js/listeners.js b/www/js/listeners.js
index 8a475e3..e1c8710 100644
--- a/www/js/listeners.js
+++ b/www/js/listeners.js
@@ -98,7 +98,7 @@
if (selectorName && candidate.tagName &&
selectorName.toLowerCase() !== candidate.tagName.toLowerCase()) {
break;
}
- if (selectorClass && selectorClass !== candidate.className) {
+ if (selectorClass &&
!candidate.classList.contains(selectorClass)) {
break;
}
if (selectorId && selectorId !== candidate.id) {
diff --git a/www/less/langbutton.less b/www/less/langbutton.less
index 5550f0b..9565e6c 100644
--- a/www/less/langbutton.less
+++ b/www/less/langbutton.less
@@ -1,62 +1,65 @@
-.mw-language-button {
+.mw-footer-divider {
+ appearance: none;
+ -webkit-appearance: none;
+
+ display: block;
+ width: 100%;
+ height: 12px;
+
+ border: none;
+ background-image: url(footer-divider.png);
+ background-repeat: no-repeat;
+ background-size: 284px 12px;
+}
+
+.mw-footer-button {
appearance: none;
-webkit-appearance: none;
-
- display: table;
-
- color: #aaa;
- background: #222;
- font-size: 24px;
- line-height: 24px;
- padding: 12px;
+
+ display: table;
+ width: 100%;
+
+ color: #808080;
+ font-size: 14px;
+
+ padding: 12px;
+}
+.mw-footer-button>div {
+ display: table-row;
+}
+.mw-footer-button>div>span {
+ display: table-cell;
+}
+.mw-footer-icon {
+ display: inline-block;
+ vertical-align: text-top;
+ text-align: center;
+
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+
+ font-family: "WikiFont";
+ font-size: 24px;
+ color: white;
+ background-color: #808080;
+}
+.mw-footer-button[dir=ltr]>div>span
+{
+ text-align: left;
+}
+.mw-footer-button[dir=rtl]>div>span
+{
+ text-align: right;
+}
+.mw-footer-button>div>span+span
+{
+ padding-left: 12px;
+ padding-right: 12px;
}
-.mw-language-items {
- display: table-row;
-}
-
-.mw-language-icon,
-.mw-language-count,
-.mw-language-label {
- display: table-cell;
- vertical-align: middle;
- height: 24px;
-}
-
-.mw-language-icon {
- color: white;
- white-space: nowrap;
- font-family: "AvenirNextCondensed-Medium";
-}
-.mw-language-button[dir=ltr] .mw-language-icon {
- text-align: right;
- padding-right: 12px;
- border-right: solid 1px #aaa;
-}
-.mw-language-button[dir=rtl] .mw-language-icon {
- text-align: left;
- border-left: solid 1px #aaa;
- padding-left: 12px;
-}
-
-.mw-language-count {
- text-align: center;
-}
-.mw-language-button[dir=ltr] .mw-language-count {
- padding-left: 12px;
-}
-.mw-language-button[dir=rtl] .mw-language-count {
- padding-right: 12px;
-}
-
-.mw-language-label {
- font-size: 10px;
-}
-.mw-language-button[dir=ltr] .mw-language-label {
- text-align: left;
- padding-left: 12px;
-}
-.mw-language-button[dir=rtl] .mw-language-label {
- text-align: right;
- padding-right: 12px;
+.mw-license-footer
+{
+ text-align: center;
+ font-size: 10px;
}
diff --git a/www/less/lastmod.less b/www/less/lastmod.less
index 2703c41..43cf707 100644
--- a/www/less/lastmod.less
+++ b/www/less/lastmod.less
@@ -1,4 +1,6 @@
-.mw-last-modified {
- margin-top: 1em;
+.mw-last-modified.recent {
color: #27aa65;
}
+.mw-last-modified.recent .mw-footer-icon {
+ background-color: #27aa65;
+}
--
To view, visit https://gerrit.wikimedia.org/r/144342
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic69804ac687e36757d5ddc5c86a0d4a3155c77ff
Gerrit-PatchSet: 1
Gerrit-Project: apps/ios/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Brion VIBBER <br...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
