summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorsajolida <sajolida@pimienta.org>2019-06-27 15:17:01 +0000
committersajolida <sajolida@pimienta.org>2019-06-27 15:17:01 +0000
commit80391fd977300adc40391c3d8efbd98c24acfd9c (patch)
treeec0c5851ff9f81fbd8793f9dd9bd752f1c870a3b
parent88942769884320df19de0b9d95cc65467107daf9 (diff)
Force people to make a decision on recurring donations (#16830)
Until now, "monthly" was preselected which is good for us but might be missed by people and seen as a manipulative strategy. Preselecting "one-time" might make us miss some recurring donations. This commit forces people to choose one of the frequency by: - Not selecting any frequency by default - Explaining right below, why recurring donations are important - Moving the requirement for a PayPal account closer - Shake and highlight the frequency buttons if none is selected - Redirecting to PayPal only if a frequency is selected
-rw-r--r--wiki/src/donate.css41
-rw-r--r--wiki/src/donate.html32
-rw-r--r--wiki/src/donate.js14
3 files changed, 60 insertions, 27 deletions
diff --git a/wiki/src/donate.css b/wiki/src/donate.css
index 9f4f6da..b7b4552 100644
--- a/wiki/src/donate.css
+++ b/wiki/src/donate.css
@@ -69,7 +69,7 @@ span.title {
#donate-paypal-button {
width: 100%;
- margin-top: 1em;
+ margin-top: 0.5em;
border: solid 3px white;
}
@@ -95,18 +95,45 @@ span.title {
color: black;
}
-#currency, #dollar-amounts, #euro-amounts, #frequency,
-#donate-paypal-button, .tax-deducible {
+#currency, #dollar-amounts, #euro-amounts, #frequency-buttons,
+#frequency-explanation #donate-paypal-button, .tax-deducible {
display: inline-block;
}
-#require-paypal, .tax-deducible {
+#frequency-buttons, #frequency-explanation, .tax-deducible {
padding: 0 4px;
}
-#require-paypal {
- font-size: 12px;
- font-style: italic;
+#frequency-buttons {
+ margin-top: 0.5em;
+ padding-bottom: 0.2em;
+ border-bottom: 2px solid transparent;
+ width: 100%;
+ text-align: center;
+}
+
+#frequency-buttons input {
+ position: relative;
+ top: 2px;
+ margin-right: 2px;
+}
+
+.shake {
+ animation: shake 1s;
+ display: inline-block;
+ border-color: red !important;
+}
+
+@keyframes shake {
+ 10% { transform: translateX(-1px); }
+ 20% { transform: translateX(2px); }
+ 30% { transform: translateX(-4px); }
+ 40% { transform: translateX(4px); }
+ 50% { transform: translateX(-4px); }
+ 60% { transform: translateX(4px); }
+ 70% { transform: translateX(-4px); }
+ 80% { transform: translateX(2px); }
+ 90% { transform: translateX(-1px); }
}
.tax-deducible {
diff --git a/wiki/src/donate.html b/wiki/src/donate.html
index c075b77..e942c69 100644
--- a/wiki/src/donate.html
+++ b/wiki/src/donate.html
@@ -87,20 +87,6 @@
</div>
</div>
- <div id="frequency">
- <div class="col-md-12 btn-group btn-group-justified" data-toggle="buttons" role="group">
- <label class="btn btn-lg btn-primary" id="one-time">
- <input type="radio" autocomplete="off"/> One-time
- </label>
- <label class="btn btn-lg btn-primary active" id="monthly">
- <input type="radio" autocomplete="off"/> Monthly
- </label>
- <label class="btn btn-lg btn-primary" id="yearly">
- <input type="radio" autocomplete="off" checked/> Yearly
- </label>
- </div>
- </div>
-
<div id="dollar-amounts" class="amounts donate-dollars" data-toggle="buttons" role="group">
<label class="btn btn-amount btn-lg btn-primary col-md-3 col-xs-6 5 active">
<input type="radio" autocomplete="off" value="5"/>$5
@@ -161,15 +147,21 @@
</label>
</div>
- <div id="donate-paypal-button">
- <button class="btn btn-primary btn-lg btn-block col-md-12">Donate</button>
+ <div id="frequency-buttons">
+ <div class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="one-time"/> One-time</div>
+ <div class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="monthly"/> Monthly</div>
+ <div class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="yearly"/> Yearly</div>
</div>
-</form>
+ <div id="frequency-explanation">
+ Monthly and yearly donations, even the smallest, are the most valuable for
+ the sustainability of Tails. They require a [[!img paypal-inline.png
+ link="no" class="paypal-inline" alt="PayPal"]] account.
+ </div>
-<p id="require-paypal">Monthly and yearly donations require
-a [[!img paypal-inline.png link="no" class="paypal-inline" alt="PayPal"]]
-account.</p>
+ <button id="donate-paypal-button" class="btn btn-primary btn-lg btn-block">Donate</button>
+
+</form>
<p id="dollar-tax" class="tax-deducible donate-dollars">Your donation goes entirely to Tails
and will be handled by RiseupLabs which is a 501(c)(3) non-profit organization
diff --git a/wiki/src/donate.js b/wiki/src/donate.js
index f8d12b3..e736d5a 100644
--- a/wiki/src/donate.js
+++ b/wiki/src/donate.js
@@ -124,4 +124,18 @@ document.addEventListener('DOMContentLoaded', function() {
}
}
+ // Make sure that a frequency is selected
+ var frequency = false;
+ document.getElementById("donate-paypal-button").onclick = function(e) {
+ frequencies = document.getElementsByName("frequency");
+ for (let i = 0; i < frequencies.length; i++) {
+ if (frequencies[i].checked) frequency = frequencies[i].id;
+ }
+ if (!frequency) {
+ e.preventDefault();
+ console.log(document.getElementById("donate-paypal-button").classList.remove("active"));
+ document.getElementById("frequency-buttons").classList.add("shake");
+ }
+ }
+
});