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.
arthuredelstein · Nov 11, 2016 · 9409a53925bf8db308dec4d79ef2cef659251733 · 9409a53
1 parent 6706fa3
commit 9409a53925bf8db308dec4d79ef2cef659251733
Showing with 23 additions and 11 deletions.

+3 −1 src/chrome/content/aboutTor/aboutTor.xhtml

+6 −5 src/chrome/content/aboutTor/donation_banner.js

+14 −5 src/chrome/skin/donation_banner.css
diff --git 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
@@ -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 = "&#9654;";
+    sel("#banner-donate-button-arrow").innerHTML = "&#10230;";
     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
@@ -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);