Cleaner donate methods

- Add OpenCollective
- Show PayPal earlier
- Hide Apple Pay if it's not supported
- Show Google Pay only on Desktop and Android Chrome
- Change Visa logo to Visa + MC
- Remove all crypto buttons except Bitcoin

Signed-off-by: Alexander Borsuk <me@alex.bio>
This commit is contained in:
Alexander Borsuk 2023-12-19 18:16:00 +01:00
parent ef5659600c
commit 864b61834f
3 changed files with 57 additions and 12 deletions

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill-rule="evenodd"><path d="M52.402 31.916c0 4.03-1.17 7.895-3.178 11.087l8.196 8.23c4.014-5.375 6.523-12.094 6.523-19.318s-2.51-13.942-6.523-19.318l-8.196 8.23c2.007 3.192 3.178 6.887 3.178 11.087z" fill="#b8d3f4"/><path d="M32.004 52.41c-11.207 0-20.406-9.24-20.406-20.493s9.2-20.493 20.406-20.493c4.182 0 7.86 1.176 11.04 3.36l8.196-8.23C45.887 2.52 39.197 0 32.004 0 14.44 0 .057 14.278.057 32.084S14.44 64 32.004 64c7.36 0 14.05-2.52 19.403-6.55l-8.196-8.23c-3.178 2.016-7.025 3.192-11.207 3.192z" fill="#3385ff"/></svg>

After

Width:  |  Height:  |  Size: 589 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.5 KiB

View file

@ -3,9 +3,13 @@
<a href="https://donate.organicmaps.ru" title="По карте МИР в рублях"><img id="mir" src="/images/donates/mir.svg" alt="По карте МИР в рублях"></a>
<a href="https://t.me/OrganicMapsRu/29441" title="Telegram по карте МИР в рублях"><img id="telegramRu" src="/images/donates/telegram.svg" alt="Telegram по карте МИР в рублях"></a>
{% endif -%}
<a href="{{ config.extra.stripe | safe }}" title="Credit/Debit Card"><img src="/images/donates/visa.svg" alt="Credit/Debit Card"></a>
<a href="{{ config.extra.stripe | safe }}" title="Apple Pay"><img src="/images/donates/apple.svg" alt="Apple Pay"></a>
<a href="{{ config.extra.stripe | safe }}" title="Google Pay"><img src="/images/donates/google.svg" alt="Google Pay"></a>
<a href="{{ config.extra.stripe | safe }}" title="Credit/Debit Card"><img src="/images/donates/visa_mc.svg" alt="Credit/Debit Card"></a>
<a href="{{ config.extra.stripe | safe }}" title="Apple Pay" id="applePay"><img src="/images/donates/apple.svg" alt="Apple Pay"></a>
<a href="{{ config.extra.stripe | safe }}" title="Google Pay" id="googlePay"><img src="/images/donates/google.svg" alt="Google Pay"></a>
<form action="https://www.paypal.com/donate" method="post" target="_blank" title="PayPal">
<input type="hidden" name="hosted_button_id" value="JYM34AADM87V8" />
<input type="image" src="/images/donates/paypal.svg" name="submit" title="Donate to Organic Maps using PayPal" alt="Donate with PayPal button" />
</form>
<a href="{{ config.extra.stripe | safe }}" title="giropay"><img src="/images/donates/giropay.svg" alt="giropay"></a>
{%- if lang != 'ru' %}
<a href="{{ config.extra.stripe | safe }}" title="iDeal"><img src="/images/donates/ideal.svg" alt="iDeal"></a>
@ -16,15 +20,54 @@
<a href="https://liberapay.com/OrganicMaps" title="LiberaPay"><img src="/images/donates/liberapay.svg" alt="LiberaPay"></a>
<a href="https://github.com/sponsors/organicmaps/" title="GitHub Sponsors"><img src="/images/donates/github.svg" alt="GitHub Sponsors"></a>
<a href="https://www.patreon.com/OrganicMaps" title="Patreon"><img src="/images/donates/patreon.svg" alt="Patreon"></a>
<form action="https://www.paypal.com/donate" method="post" target="_blank" title="PayPal">
<input type="hidden" name="hosted_button_id" value="JYM34AADM87V8" />
<input type="image" src="/images/donates/paypal.svg" name="submit" title="Donate to Organic Maps using PayPal" alt="Donate with PayPal button" />
</form>
<a href="https://opencollective.com/organicmaps" title="OpenCollective"><img src="/images/donates/opencollective.svg" alt="OpenCollective"></a>
<a href="{{ config.extra.stripe | safe }}" title="BanContact"><img src="/images/donates/bancontact.svg" alt="BanContact"></a>
<a href="{{ config.extra.stripe | safe }}" title="EPS"><img id="eps" src="/images/donates/eps.svg" alt="EPS"></a>
<a href="/donate#crypto" title="Bitcoin"><img src="/images/donates/bitcoin.svg" alt="Bitcoin"></a>
<a href="/donate#crypto" title="Ethereum"><img src="/images/donates/ethereum.svg" alt="Ethereum"></a>
<a href="/donate#crypto" title="Monero"><img src="/images/donates/monero.svg" alt="Monero"></a>
<a href="/donate#crypto" title="Tron"><img src="/images/donates/tron.svg" alt="Tron"></a>
<a href="/donate#crypto" title="ZCash"><img src="/images/donates/zcash.svg" alt="ZCash"></a>
<a href="/donate#crypto" title="Bitcoin, Ethereum, Monero, Tron, ZCash and other crypto"><img src="/images/donates/bitcoin.svg" alt="Bitcoin, Ethereum, Monero, Tron, ZCash and other crypto"></a>
</div>
<script>
// Check if Apple Pay JS API is available.
// https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability
if (!window.ApplePaySession) {
var applePayLink = document.getElementById('applePay');
if (applePayLink) applePayLink.remove();
}
// https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
function isAndroidOrDesktopChrome() {
// please note,
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");
if (isIOSChrome) {
// is Google Chrome on IOS
return false;
} else if (isChromium !== null &&
typeof isChromium !== "undefined" &&
vendorName === "Google Inc." &&
isOpera === false &&
isIEedge === false) {
// is Google Chrome
return true;
} else {
// not Google Chrome
return false;
}
}
// Hide Google Play when not needed.
if (!isAndroidOrDesktopChrome()) {
var applePayLink = document.getElementById('googlePay');
if (applePayLink) applePayLink.remove();
}
</script>