donation: Update payment icons

The previous set was not very accurate and I thought even slightly
misleading. This package has current icons which represent all available
options well.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/.gitmodules b/.gitmodules
index 11739efb67a24e78db9e4c6dd35995f445703ff2..abab00ee87117643d78ae266f39cefbcfe048b32 100644 (file)
--- a/.gitmodules
+++ b/.gitmodules
@@ -13,3 +13,6 @@
 [submodule "src/static/fonts/source-code-pro"]
        path = src/static/fonts/source-code-pro
        url = https://github.com/adobe-fonts/source-code-pro.git
+[submodule "src/third-party/payment-logos"]
+       path = src/third-party/payment-logos
+       url = https://git.ipfire.org/pub/git/thirdparty/datatrans/payment-logos.git

diff --git a/Makefile.am b/Makefile.am
index 662a9eb51d27667609cad7ea8a38023daa6acf9e..3e55de33c527b43a2e5cd8b9f49b78a47223da70 100644 (file)
--- a/Makefile.am
+++ b/Makefile.am
@@ -1130,6 +1130,16 @@ dist_static_img_downloads_cloud_DATA = \
 
 static_img_downloads_clouddir = $(static_img_downloadsdir)/cloud
 
+dist_static_img_payment_logos_DATA = \
+       src/third-party/payment-logos/assets/cards/american-express.svg \
+       src/third-party/payment-logos/assets/cards/mastercard.svg \
+       src/third-party/payment-logos/assets/cards/visa.svg \
+       src/third-party/payment-logos/assets/apm/crypto.svg \
+       src/third-party/payment-logos/assets/apm/paypal.svg \
+       src/third-party/payment-logos/assets/apm/sepa.svg
+
+static_img_payment_logosdir = $(static_imgdir)/payment-logos
+
 static_images_tux_DATA = \
        src/static/img/tux/ipfire_tux_16x16.png \
        src/static/img/tux/ipfire_tux_20x20.png \

diff --git a/src/templates/donate/donate.html b/src/templates/donate/donate.html
index ac01267517e4569db2eecf94e257e8e274e69dd1..dacbb55d1ece6535dd6577ac0160762d4fa5e568 100644 (file)
--- a/src/templates/donate/donate.html
+++ b/src/templates/donate/donate.html
@@ -11,6 +11,7 @@
 
 {% block container %}
        {% set amounts = (10, 25, 50, 75, 100, 250) %}
+       {% set icons   = ("american-express", "visa", "mastercard", "paypal", "sepa", "crypto") %}
 
        <section class="hero is-primary">
                <div class="hero-body">
@@ -268,28 +269,15 @@
                                                </div>
 
                                                <div class="block">
-                                                       <div class="level">
-                                                               <div class="level-item has-text-centered">
-                                                                       <span class="fa-brands fa-cc-amex fa-2x"></span>
-                                                               </div>
-                                                               <div class="level-item has-text-centered">
-                                                                       <span class="fa-brands fa-cc-mastercard fa-2x"></span>
-                                                               </div>
-                                                               <div class="level-item has-text-centered">
-                                                                       <span class="fa-brands fa-cc-visa fa-2x"></span>
-                                                               </div>
-                                                               <div class="level-item has-text-centered">
-                                                                       <span class="fa-solid fa-money-bill-transfer fa-2x"></span>
-                                                               </div>
-                                                               <div class="level-item has-text-centered">
-                                                                       <span class="fa-brands fa-cc-paypal fa-2x"></span>
-                                                               </div>
-                                                               <div class="level-item has-text-centered">
-                                                                       <span class="fa-brands fa-bitcoin fa-2x"></span>
-                                                               </div>
-                                                               <div class="level-item has-text-centered">
-                                                                       <span class="fa-brands fa-ethereum fa-2x"></span>
-                                                               </div>
+                                                       <div class="columns is-mobile">
+                                                               {% for icon in icons %}
+                                                                       <div class="column">
+                                                                               <figure class="image is-3by2">
+                                                                                       <img src="{{ static_url("img/payment-logos/%s.svg" % icon) }}"
+                                                                                               alt="{{ _("Payment Logo")}}" >
+                                                                               </figure>
+                                                                       </div>
+                                                               {% end %}
                                                        </div>
                                                </div>
 

diff --git a/src/third-party/payment-logos b/src/third-party/payment-logos
new file mode 160000 (submodule)
index 0000000..7a5b294
--- /dev/null
+++ b/src/third-party/payment-logos
@@ -0,0 +1 @@
+Subproject commit 7a5b294d2959f877f8a223e187ce7a16555dc641