commit ba95ab383ce6ecdcdba9cc905095b0a85ad1b08e Author: Arthur Edelstein <arthuredelstein@gmail.com> Date: Thu Nov 10 23:26:47 2016 -0800 Bug 20414.3: Delay banner 1 week & add pt locale Also, improve donate button appearance by moving arrow below text and choosing a narrow arrow. --- src/chrome/content/aboutTor/aboutTor.xhtml | 4 +++- src/chrome/content/aboutTor/donation_banner.js | 11 ++++++----- src/chrome/skin/donation_banner.css | 19 ++++++++++++++----- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml index 1ecae65..b6860d8 100644 --- a/src/chrome/content/aboutTor/aboutTor.xhtml +++ b/src/chrome/content/aboutTor/aboutTor.xhtml @@ -180,7 +180,9 @@ window.addEventListener("pageshow", function() { href="https://www.torproject.org/donate/donate-tbb"> <div id="banner-donate-button-container"> <div id="banner-donate-button"> - <div id="banner-donate-button-text"></div> + <div id="banner-donate-button-text"> + <span></span> + </div> <div id="banner-donate-button-arrow"></div> </div> </div> diff --git a/src/chrome/content/aboutTor/donation_banner.js b/src/chrome/content/aboutTor/donation_banner.js index 04f8db9..727d984 100644 --- a/src/chrome/content/aboutTor/donation_banner.js +++ b/src/chrome/content/aboutTor/donation_banner.js @@ -9,6 +9,7 @@ let kBannerLocales = [ "fr", "it", "nl", + "pt", "ru", "tr", "vi", @@ -58,9 +59,9 @@ let shouldShowBanner = function () { kDonationPageLocales.indexOf(kBrowserLocaleShort) === -1) { return false; } - // Only show banner between 2016 Nov 15 and 2017 Jan 25. + // Only show banner between 2016 Nov 22 and 2017 Jan 25. let now = new Date(); - let start = new Date(2016, 10, 15); + let start = new Date(2016, 10, 22); let end = new Date(2017, 0, 26); let shownCountPref = "extensions.torbutton.donation_banner2016.shown_count"; if (now < start || now > end) { @@ -122,7 +123,7 @@ let avoidWidows = function (element) { let updateTextSizes = function () { fitTextInElement(sel("#banner-tagline")); fitTextInElement(sel("#banner-heart")); - fitTextInElement(sel("#banner-donate-button")); + fitTextInElement(sel("#banner-donate-button-text")); avoidWidows(sel("#banner-tagline span")); }; @@ -143,9 +144,9 @@ let runDonationBanner = function () { sel("#banner-tagline span").innerText = getTagline(randomInteger(4)); sel("#banner-heart span").innerText = gStringBundle.GetStringFromName("aboutTor.donationBanner.heart"); - sel("#banner-donate-button-text").innerHTML = + sel("#banner-donate-button-text span").innerHTML = gStringBundle.GetStringFromName("aboutTor.donationBanner.donate"); - sel("#banner-donate-button-arrow").innerHTML = "▶"; + sel("#banner-donate-button-arrow").innerHTML = "⟶"; sel("#banner").style.display = "flex"; sel("#banner-spacer").style.display = "block"; addEventListener("resize", updateTextSizes); diff --git a/src/chrome/skin/donation_banner.css b/src/chrome/skin/donation_banner.css index 8ad3f88..06d6194 100644 --- a/src/chrome/skin/donation_banner.css +++ b/src/chrome/skin/donation_banner.css @@ -96,10 +96,10 @@ letter-spacing: -0.00em; opacity: 100%; padding-bottom: 5px; - padding-left: 15px; - padding-right: 15px; + padding-left: 5px; + padding-right: 5px; padding-top: 5px; - width: 80px; + width: 100px; } #banner-donate-button-container:hover { border-color: #610; @@ -110,16 +110,25 @@ #banner-donate-button { align-items: center; display: flex; + flex-direction: column; font-family: sans-serif; font-size: 12px; font-weight: bold; height: 100%; - text-align: start; + text-align: center; width: 100%; } +#banner-donate-button-text { + align-self: stretch; + align-items: center; + display: flex; + justify-content: center; + flex: 2 2 67%; +} #banner-donate-button-arrow { + flex: 1 1 33%; font-size: 14px; - margin-inline-start: 5px; + line-height: 14px; } #banner-donate-button-arrow:-moz-dir(rtl) { transform: scaleX(-1);