wasrusgen/zov-tech
1
0
Fork 0
mirror of https://github.com/wasrusgen/zov-tech.git synced 2026-06-03 21:04:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(miniapp/A): tighter quick action cards (no min-height) + smaller hero buttons

Browse Source
This commit is contained in:
wasrusgen 2026-05-09 13:06:54 +03:00
parent af7dc07720
commit 86cd4eb614
3 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
miniapp/assets/app.js
View File

@ -186,10 +186,8 @@ function renderManagerHome(me) {
const card = el(` const card = el(`
<button class="quick-card"> <button class="quick-card">
<div class="icon">${ICONS[qa.icon] || ""}</div> <div class="icon">${ICONS[qa.icon] || ""}</div>
<div> <div class="title">${qa.title}</div>
<div class="title">${qa.title}</div> <div class="subtitle">${qa.subtitle}</div>
<div class="subtitle">${qa.subtitle}</div>
</div>
</button> </button>
`); `);
card.addEventListener("click", () => { haptic("impact"); tg?.showAlert?.(`«${qa.title}» — скоро`); }); card.addEventListener("click", () => { haptic("impact"); tg?.showAlert?.(`«${qa.title}» — скоро`); });

31
miniapp/assets/styles.css
View File

@ -663,21 +663,21 @@ body.has-bottom-nav #app {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--s2); gap: var(--s2);
padding: 12px var(--s3); padding: 10px var(--s3);
border-radius: var(--r-btn); border-radius: var(--r-btn);
background: #C9985E; background: #C9985E;
color: #1F1A14; color: #1F1A14;
font-family: var(--font-ui); font-family: var(--font-ui);
font-size: 14px; font-size: 13.5px;
font-weight: 600; font-weight: 600;
letter-spacing: -0.01em; letter-spacing: -0.01em;
cursor: pointer; cursor: pointer;
} }
.btn-gold svg { width: 18px; height: 18px; stroke-width: 1.6; } .btn-gold svg { width: 16px; height: 16px; stroke-width: 1.7; }
.btn-icon-dark { .btn-icon-dark {
width: 48px; width: 40px;
flex-shrink: 0; flex-shrink: 0;
display: grid; display: grid;
place-items: center; place-items: center;
@ -687,7 +687,7 @@ body.has-bottom-nav #app {
cursor: pointer; cursor: pointer;
} }
.btn-icon-dark svg { width: 20px; height: 20px; stroke-width: 1.6; } .btn-icon-dark svg { width: 18px; height: 18px; stroke-width: 1.6; }
/* ============= Section header (with right-action) ============= */ /* ============= Section header (with right-action) ============= */
.section-head { .section-head {
@ -734,11 +734,10 @@ body.has-bottom-nav #app {
background: var(--card); background: var(--card);
border: 1px solid var(--line-strong); border: 1px solid var(--line-strong);
border-radius: var(--r-card); border-radius: var(--r-card);
padding: var(--s3); padding: 10px 12px;
min-height: 88px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; gap: 6px;
cursor: pointer; cursor: pointer;
transition: background 0.12s; transition: background 0.12s;
} }
@ -746,32 +745,34 @@ body.has-bottom-nav #app {
.quick-card:active { background: var(--paper-2); } .quick-card:active { background: var(--paper-2); }
.quick-card .icon { .quick-card .icon {
width: 28px; width: 24px;
height: 28px; height: 24px;
display: grid; display: grid;
place-items: center; place-items: center;
color: var(--accent-2); color: var(--accent-2);
margin-bottom: var(--s4); margin: 0;
} }
.quick-card .icon svg { width: 22px; height: 22px; stroke-width: 1.6; } .quick-card .icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.quick-card .title { .quick-card .title {
font-family: var(--font-ui); font-family: var(--font-ui);
font-size: 14.5px; font-size: 13.5px;
font-weight: 600; font-weight: 600;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: var(--ink); color: var(--ink);
margin-bottom: 2px; margin: 0;
line-height: 1.2;
} }
.quick-card .subtitle { .quick-card .subtitle {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 9.5px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--muted); color: var(--muted);
line-height: 1.2;
} }
/* ============= Project card ============= */ /* ============= Project card ============= */

6
miniapp/index.html
View File

@ -12,7 +12,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap">
<script src="https://telegram.org/js/telegram-web-app.js"></script> <script src="https://telegram.org/js/telegram-web-app.js"></script>
<link rel="stylesheet" href="assets/styles.css?v=20260509i"> <link rel="stylesheet" href="assets/styles.css?v=20260509j">
</head> </head>
<body> <body>
<main id="app"> <main id="app">
@ -20,7 +20,7 @@
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
</main> </main>
<script src="assets/icons.js?v=20260509i"></script> <script src="assets/icons.js?v=20260509j"></script>
<script src="assets/app.js?v=20260509i"></script> <script src="assets/app.js?v=20260509j"></script>
</body> </body>
</html> </html>