From 651ec2daee20e883cc7ce267575faa74d08cd3d2 Mon Sep 17 00:00:00 2001 From: Sergey Antropoff Date: Thu, 23 Jul 2026 09:24:45 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B5=D1=82=D0=BA=D0=B0=20=D0=BA=D0=B0?= =?UTF-8?q?=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA=20=D0=BD=D0=B0=20=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=20=D1=81=D0=B5=D1=80?= =?UTF-8?q?=D0=B2=D0=B5=D1=80=D0=B0=20=D0=B8=20=D0=BA=D1=80=D1=83=D0=BF?= =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20QR=20=D0=B2=20lightbox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Карточки как в глобальном индексе; QR заполняет доступную площадь модального окна через container queries. --- .../templates/export/global-index.html.j2 | 23 +++---- .../hysteria2/templates/export/index.html.j2 | 63 +++++++++++-------- 2 files changed, 49 insertions(+), 37 deletions(-) diff --git a/roles/hysteria2/templates/export/global-index.html.j2 b/roles/hysteria2/templates/export/global-index.html.j2 index 374c5e8..4dbabb8 100644 --- a/roles/hysteria2/templates/export/global-index.html.j2 +++ b/roles/hysteria2/templates/export/global-index.html.j2 @@ -456,10 +456,10 @@ position: relative; display: flex; flex-direction: column; - width: min(94vw, 900px); + width: min(96vw, calc(100dvh - 2rem)); height: calc(100dvh - 2rem); max-height: calc(100dvh - 2rem); - padding: 1.25rem 1.25rem 1rem; + padding: 2.5rem 1rem 0.85rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; @@ -474,40 +474,41 @@ .lightbox-media { flex: 1 1 auto; min-height: 0; - display: flex; - align-items: center; - justify-content: center; + width: 100%; + container-type: size; + display: grid; + place-items: center; } .lightbox-panel img { display: block; + width: min(100cqi, 100cqb); + height: min(100cqi, 100cqb); max-width: 100%; max-height: 100%; - width: auto; - height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; - padding: 1rem; + padding: 0.75rem; box-sizing: border-box; image-rendering: pixelated; } .lightbox-caption { flex-shrink: 0; - margin-top: 0.85rem; + margin-top: 0.55rem; font-size: 0.95rem; font-weight: 650; color: var(--text); } .lightbox-hint { flex-shrink: 0; - margin-top: 0.25rem; + margin-top: 0.15rem; font-size: 0.75rem; color: var(--muted); } .lightbox-actions { flex-shrink: 0; - margin-top: 1rem; + margin-top: 0.65rem; display: flex; justify-content: center; } diff --git a/roles/hysteria2/templates/export/index.html.j2 b/roles/hysteria2/templates/export/index.html.j2 index b92256a..ed4c5ba 100644 --- a/roles/hysteria2/templates/export/index.html.j2 +++ b/roles/hysteria2/templates/export/index.html.j2 @@ -44,10 +44,10 @@ min-height: 100vh; padding: 2rem 1rem 3rem; } - .container { max-width: 720px; margin: 0 auto; } + .container { max-width: 1080px; margin: 0 auto; } header { text-align: center; - margin-bottom: 2.5rem; + margin-bottom: 2rem; padding: 2rem 1.5rem; background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px solid var(--border); @@ -83,18 +83,26 @@ .server-obfs { margin-top: 1.25rem; max-width: 100%; + text-align: left; + } + .users-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1rem; } .user-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); - padding: 1.5rem; - margin-bottom: 1.25rem; + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.85rem; } .user-card h2 { - font-size: 1.25rem; - margin-bottom: 1rem; + font-size: 1.05rem; + margin-bottom: 0; display: flex; align-items: center; gap: 0.5rem; @@ -107,7 +115,7 @@ background: var(--success); box-shadow: 0 0 8px var(--success); } - .field { margin-bottom: 1rem; } + .field { margin-bottom: 0; } .field label { display: block; font-size: 0.75rem; @@ -164,8 +172,8 @@ .btn-copy svg { width: 18px; height: 18px; } .qr-block { text-align: center; - margin: 1.25rem 0; - padding: 1rem; + margin: 0; + padding: 0.75rem; background: #fff; border-radius: 8px; border: 1px solid var(--border); @@ -212,10 +220,10 @@ position: relative; display: flex; flex-direction: column; - width: min(94vw, 900px); + width: min(96vw, calc(100dvh - 2rem)); height: calc(100dvh - 2rem); max-height: calc(100dvh - 2rem); - padding: 1.25rem 1.25rem 1rem; + padding: 2.5rem 1rem 0.85rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; @@ -229,43 +237,44 @@ .lightbox.open .lightbox-panel { transform: translateY(0) scale(1); } + .lightbox-media { + flex: 1 1 auto; + min-height: 0; + width: 100%; + container-type: size; + display: grid; + place-items: center; + } .lightbox-panel img { display: block; + width: min(100cqi, 100cqb); + height: min(100cqi, 100cqb); max-width: 100%; max-height: 100%; - width: auto; - height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; - padding: 1rem; + padding: 0.75rem; box-sizing: border-box; image-rendering: pixelated; } - .lightbox-media { - flex: 1 1 auto; - min-height: 0; - display: flex; - align-items: center; - justify-content: center; - } .lightbox-caption { flex-shrink: 0; - margin-top: 0.85rem; + margin-top: 0.55rem; font-size: 0.95rem; font-weight: 650; color: var(--text); } .lightbox-hint { flex-shrink: 0; - margin-top: 0.25rem; + margin-top: 0.15rem; font-size: 0.75rem; color: var(--muted); } .lightbox-actions { flex-shrink: 0; - margin-top: 1rem; + margin-top: 0.65rem; display: flex; justify-content: center; } @@ -320,8 +329,8 @@ display: flex; flex-wrap: wrap; gap: 0.5rem; - margin-top: 1rem; - padding-top: 1rem; + margin-top: auto; + padding-top: 0.75rem; border-top: 1px solid var(--border); } .files a { @@ -394,6 +403,7 @@ +
{% for user in hysteria2_export_users %}

{{ user.name }}

@@ -445,6 +455,7 @@
{% endfor %} +