diff --git a/configs/bank-landing/index.html b/configs/bank-landing/index.html index 680191b..78b2696 100644 --- a/configs/bank-landing/index.html +++ b/configs/bank-landing/index.html @@ -1437,18 +1437,33 @@ tw balance var WITHDRAW_EXCHANGE = "taler://withdraw-exchange/exchange.hacktivism.ch/"; /* QR_Taler: off-DOM encode → PNG img + center logo (same as shop-pay / merchant) */ + /* Prefer PNG: Android WebView often fails the official Penpot SVG + (root fill="none" + wordmark paths inherit black from a parent + → blue T only, missing "taler"). PNG matches taler-assets qr-logo.png. */ function logoSrc() { try { var b = document.querySelector("base"); - if (b && b.href) return new URL("qr-logo.svg", b.href).href; + if (b && b.href) return new URL("qr-logo.png", b.href).href; } catch (e) {} - return "/intro/qr-logo.svg"; + return "/intro/qr-logo.png"; } function setQrLogo(imgEl) { if (!imgEl) return; + imgEl.alt = "Taler"; + imgEl.width = 100; + imgEl.height = 50; + imgEl.decoding = "async"; imgEl.src = logoSrc(); imgEl.onerror = function () { - imgEl.style.display = "none"; + /* fallback to fixed SVG if PNG missing */ + try { + var b = document.querySelector("base"); + imgEl.src = b && b.href + ? new URL("qr-logo.svg", b.href).href + : "/intro/qr-logo.svg"; + } catch (e2) { + imgEl.style.display = "none"; + } }; imgEl.style.display = ""; } diff --git a/configs/bank-landing/qr-logo.png b/configs/bank-landing/qr-logo.png new file mode 100644 index 0000000..aeffa23 Binary files /dev/null and b/configs/bank-landing/qr-logo.png differ diff --git a/configs/bank-landing/qr-logo.svg b/configs/bank-landing/qr-logo.svg index 01dc46f..589b2de 100644 --- a/configs/bank-landing/qr-logo.svg +++ b/configs/bank-landing/qr-logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/configs/bank-landing/shop-pay.css b/configs/bank-landing/shop-pay.css index a3cf84a..b14d7bd 100644 --- a/configs/bank-landing/shop-pay.css +++ b/configs/bank-landing/shop-pay.css @@ -123,7 +123,7 @@ button.shop-item { background: #fff; image-rendering: pixelated; } -/* Center logo plate — official qr-logo (webui uses ~100×50 on large QR) */ +/* Center logo plate — official qr-logo.png (webui ~100×50; PNG for Android) */ .goa-pay-taler-qr__logo { position: absolute; top: 50%; @@ -132,8 +132,11 @@ button.shop-item { width: 28%; height: auto; max-width: 100px; + aspect-ratio: 200 / 95; + object-fit: contain; pointer-events: none; - background: transparent; + background: #fff; + border-radius: 4px; } /* Settlement: collapsed by default, expand on click */ diff --git a/configs/bank-landing/shop-pay.js b/configs/bank-landing/shop-pay.js index 2888112..5797dc0 100644 --- a/configs/bank-landing/shop-pay.js +++ b/configs/bank-landing/shop-pay.js @@ -3,7 +3,7 @@ * Flow: POST templates/{id} → taler://pay/… + payto links. * * QR display matches taler-merchant-webui QR_Taler - * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.svg. + * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.png. * Uses qrcode-generator (same lib as webui) via global QRCode if present, * else falls back to canvas from qrcode.min.js (davidshimjs). */ @@ -21,7 +21,8 @@ } function logoSrc() { - return introBase() + "qr-logo.svg"; + /* PNG: Android often drops SVG wordmark fill inheritance (missing "taler") */ + return introBase() + "qr-logo.png"; } function templateHttps(productId) { @@ -214,9 +215,13 @@ function setLogo(imgEl) { if (!imgEl) return; + imgEl.alt = "Taler"; + imgEl.width = 100; + imgEl.height = 50; + imgEl.decoding = "async"; imgEl.src = logoSrc(); imgEl.onerror = function () { - imgEl.style.display = "none"; + imgEl.src = introBase() + "qr-logo.svg"; }; imgEl.style.display = ""; } diff --git a/configs/merchant-landing/qr-logo.png b/configs/merchant-landing/qr-logo.png new file mode 100644 index 0000000..aeffa23 Binary files /dev/null and b/configs/merchant-landing/qr-logo.png differ diff --git a/configs/merchant-landing/qr-logo.svg b/configs/merchant-landing/qr-logo.svg index 01dc46f..589b2de 100644 --- a/configs/merchant-landing/qr-logo.svg +++ b/configs/merchant-landing/qr-logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/configs/merchant-landing/shop-pay.css b/configs/merchant-landing/shop-pay.css index a3cf84a..b14d7bd 100644 --- a/configs/merchant-landing/shop-pay.css +++ b/configs/merchant-landing/shop-pay.css @@ -123,7 +123,7 @@ button.shop-item { background: #fff; image-rendering: pixelated; } -/* Center logo plate — official qr-logo (webui uses ~100×50 on large QR) */ +/* Center logo plate — official qr-logo.png (webui ~100×50; PNG for Android) */ .goa-pay-taler-qr__logo { position: absolute; top: 50%; @@ -132,8 +132,11 @@ button.shop-item { width: 28%; height: auto; max-width: 100px; + aspect-ratio: 200 / 95; + object-fit: contain; pointer-events: none; - background: transparent; + background: #fff; + border-radius: 4px; } /* Settlement: collapsed by default, expand on click */ diff --git a/configs/merchant-landing/shop-pay.js b/configs/merchant-landing/shop-pay.js index 2888112..5797dc0 100644 --- a/configs/merchant-landing/shop-pay.js +++ b/configs/merchant-landing/shop-pay.js @@ -3,7 +3,7 @@ * Flow: POST templates/{id} → taler://pay/… + payto links. * * QR display matches taler-merchant-webui QR_Taler - * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.svg. + * (@gnu-taler/web-util QR.tsx): animated #0042B3 conic ring + qr-logo.png. * Uses qrcode-generator (same lib as webui) via global QRCode if present, * else falls back to canvas from qrcode.min.js (davidshimjs). */ @@ -21,7 +21,8 @@ } function logoSrc() { - return introBase() + "qr-logo.svg"; + /* PNG: Android often drops SVG wordmark fill inheritance (missing "taler") */ + return introBase() + "qr-logo.png"; } function templateHttps(productId) { @@ -214,9 +215,13 @@ function setLogo(imgEl) { if (!imgEl) return; + imgEl.alt = "Taler"; + imgEl.width = 100; + imgEl.height = 50; + imgEl.decoding = "async"; imgEl.src = logoSrc(); imgEl.onerror = function () { - imgEl.style.display = "none"; + imgEl.src = introBase() + "qr-logo.svg"; }; imgEl.style.display = ""; }