DevOpsTools/hysteria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Сетка карточек на странице сервера и крупный QR в lightbox

Browse Source 
Карточки как в глобальном индексе; QR заполняет доступную
площадь модального окна через container queries.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Sergey Antropoff
2026-07-23 09:24:45 +03:00
parent 14c6f2e011
commit a1b97bdf6e
2 changed files with 48 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
roles/hysteria2/templates/export/global-index.html.j2
+12 -11
View File
@@ -456,10 +456,10 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: min(94vw, 900px); width: min(96vw, calc(100dvh - 2rem));
height: calc(100dvh - 2rem); height: calc(100dvh - 2rem);
max-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); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 18px; border-radius: 18px;
@@ -474,40 +474,41 @@
.lightbox-media { .lightbox-media {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
display: flex; width: 100%;
align-items: center; container-type: size;
justify-content: center; display: grid;
place-items: center;
} }
.lightbox-panel img { .lightbox-panel img {
display: block; display: block;
width: min(100cqi, 100cqb);
height: min(100cqi, 100cqb);
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
width: auto;
height: auto;
aspect-ratio: 1; aspect-ratio: 1;
object-fit: contain; object-fit: contain;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 12px;
padding: 1rem; padding: 0.75rem;
box-sizing: border-box; box-sizing: border-box;
image-rendering: pixelated; image-rendering: pixelated;
} }
.lightbox-caption { .lightbox-caption {
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.85rem; margin-top: 0.55rem;
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 650; font-weight: 650;
color: var(--text); color: var(--text);
} }
.lightbox-hint { .lightbox-hint {
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.25rem; margin-top: 0.15rem;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--muted); color: var(--muted);
} }
.lightbox-actions { .lightbox-actions {
flex-shrink: 0; flex-shrink: 0;
margin-top: 1rem; margin-top: 0.65rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
roles/hysteria2/templates/export/index.html.j2
+36 -26
View File
@@ -44,10 +44,10 @@
min-height: 100vh; min-height: 100vh;
padding: 2rem 1rem 3rem; padding: 2rem 1rem 3rem;
} }
.container { max-width: 720px; margin: 0 auto; } .container { max-width: 1080px; margin: 0 auto; }
header { header {
text-align: center; text-align: center;
margin-bottom: 2.5rem; margin-bottom: 2rem;
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
background: linear-gradient(135deg, var(--accent-soft), transparent); background: linear-gradient(135deg, var(--accent-soft), transparent);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -75,17 +75,24 @@
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
} }
.users-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.user-card { .user-card {
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: 1.5rem; padding: 1.25rem;
margin-bottom: 1.25rem; display: flex;
flex-direction: column;
gap: 0.85rem;
} }
.user-card h2 { .user-card h2 {
font-size: 1.25rem; font-size: 1.05rem;
margin-bottom: 1rem; margin-bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
@@ -98,7 +105,7 @@
background: var(--success); background: var(--success);
box-shadow: 0 0 8px var(--success); box-shadow: 0 0 8px var(--success);
} }
.field { margin-bottom: 1rem; } .field { margin-bottom: 0; }
.field label { .field label {
display: block; display: block;
font-size: 0.75rem; font-size: 0.75rem;
@@ -155,8 +162,8 @@
.btn-copy svg { width: 18px; height: 18px; } .btn-copy svg { width: 18px; height: 18px; }
.qr-block { .qr-block {
text-align: center; text-align: center;
margin: 1.25rem 0; margin: 0;
padding: 1rem; padding: 0.75rem;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -203,10 +210,10 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: min(94vw, 900px); width: min(96vw, calc(100dvh - 2rem));
height: calc(100dvh - 2rem); height: calc(100dvh - 2rem);
max-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); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 18px; border-radius: 18px;
@@ -220,43 +227,44 @@
.lightbox.open .lightbox-panel { .lightbox.open .lightbox-panel {
transform: translateY(0) scale(1); 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 { .lightbox-panel img {
display: block; display: block;
width: min(100cqi, 100cqb);
height: min(100cqi, 100cqb);
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
width: auto;
height: auto;
aspect-ratio: 1; aspect-ratio: 1;
object-fit: contain; object-fit: contain;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 12px;
padding: 1rem; padding: 0.75rem;
box-sizing: border-box; box-sizing: border-box;
image-rendering: pixelated; image-rendering: pixelated;
} }
.lightbox-media {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-caption { .lightbox-caption {
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.85rem; margin-top: 0.55rem;
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 650; font-weight: 650;
color: var(--text); color: var(--text);
} }
.lightbox-hint { .lightbox-hint {
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.25rem; margin-top: 0.15rem;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--muted); color: var(--muted);
} }
.lightbox-actions { .lightbox-actions {
flex-shrink: 0; flex-shrink: 0;
margin-top: 1rem; margin-top: 0.65rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@@ -311,8 +319,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
margin-top: 1rem; margin-top: auto;
padding-top: 1rem; padding-top: 0.75rem;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
.files a { .files a {
@@ -374,6 +382,7 @@
<span class="badge">{{ hysteria2_export_users | length }} {{ 'пользователь' if hysteria2_export_users | length == 1 else 'пользователей' }}</span> <span class="badge">{{ hysteria2_export_users | length }} {{ 'пользователь' if hysteria2_export_users | length == 1 else 'пользователей' }}</span>
</header> </header>
<div class="users-grid">
{% for user in hysteria2_export_users %} {% for user in hysteria2_export_users %}
<article class="user-card"> <article class="user-card">
<h2>{{ user.name }}</h2> <h2>{{ user.name }}</h2>
@@ -425,6 +434,7 @@
</nav> </nav>
</article> </article>
{% endfor %} {% endfor %}
</div>
<footer> <footer>
Сгенерировано Ansible · {{ generated_at | default('') }} Сгенерировано Ansible · {{ generated_at | default('') }}