Scroll wallets QR

2025-10-03 00:43:52 +03:00
parent 8d83658a25
commit b1735ea6ac
3 changed files with 38 additions and 10 deletions
@@ -1,5 +1,6 @@
 from os import system as console
 from configparser import ConfigParser
+from flask_mobility import Mobility
 from flask import (
    Flask,
    g,
@@ -29,6 +30,7 @@ def get_locale():
    return request.accept_languages.best_match(('en', 'ru', 'de', 'fr', 'ja'), 'en')

 app = Flask(__name__)
+Mobility(app)


@app.before_request
@@ -1,2 +1,3 @@
 Flask==3.1.1
+flask_mobility
 gunicorn
@@ -5,7 +5,6 @@

  <link rel="stylesheet" href="/static/style/main.css">
  <link rel="icon" type="image/webp" href="/static/icon/us/risdeveau.webp" />
-  <script src="/static/script/copy-mono.js"> </script>
  <script
    src="https://track.codrs.ru/api/script.js"
    data-site-id="1"
@@ -18,14 +17,40 @@
      margin-block-end: 0;
    }

-    img {
-      width: 13rem;
+    {% if g.is_mobile %}
+      .qr img { width: 100%; }
+      .blocks.qr {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        width: calc(100vw - 1rem);
+        scroll-behavior: smooth;
+        scroll-snap-type: x mandatory;
+      }
+
+      .blocks.qr::-webkit-scrollbar { display: none; }
+
+      .block.qr {
+        flex: 0 0 calc(100vw - 2rem);
+        scroll-snap-align: start;
+        max-width: 16rem;
+      }
+    {% else %}
+      .qr img { width: 13.66rem;  /* (x + 1) * 3 + 1 = 45 */ }
+    {% endif %}
+
+    .qr p {
+      text-align: center;
    }

    .badges .block {
      flex: 1;
      text-wrap-mode: nowrap;
    }
+
+    .badges .block:hover {
+      flex: 1.5;
+      transform: none;
+    }
  </style>
 </head>
 <body>
@@ -74,19 +99,19 @@
    </div>

    <h3>Wallets</h3>
-    <div class="blocks">
-      <div class="block">
-        <p style="text-align: center;"><abbr title="Ethereum Virtual Machine">EVM</abbr> (ETH, POL, BNB)</p>
+    <div class="blocks qr">
+      <div class="block qr">
+        <p>POL, BNB</p>
        <img src="/static/img/risdeveau/wallets/evm.webp">
      </div>

-      <div class="block">
-        <p style="text-align: center;">TON</p>
+      <div class="block qr">
+        <p>TON</p>
        <img src="/static/img/risdeveau/wallets/ton.webp">
      </div>

-      <div class="block">
-        <p style="text-align: center;">XMR</p>
+      <div class="block qr">
+        <p>XMR</p>
        <img src="/static/img/risdeveau/wallets/xmr.webp">
      </div>
    </div>