mirror of
https://github.com/wasrusgen/zov-tech.git
synced 2026-06-03 17:04:48 +00:00
ux: FAB вместо кнопки «Новый клиент» в списке клиентов
- Убрана широкая кнопка btn-primary над поиском - Добавлен FAB (56×56, position:fixed, bottom-right) — кружок с «＋» всегда виден поверх списка при любой прокрутке - .client-list: padding-bottom 84px — последняя карточка не прячется - Пустое состояние: обновлён текст («Нажмите ＋ чтобы завести первого») Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wasrusgen
parent
63f4a73971
commit
34ef51c4c8
@ -396,18 +396,6 @@ const Clients = (function () {
|
|||||||
root.innerHTML = "";
|
root.innerHTML = "";
|
||||||
root.appendChild(headerEl("Клиенты", null));
|
root.appendChild(headerEl("Клиенты", null));
|
||||||
|
|
||||||
// Большая кнопка «Новый клиент»
|
|
||||||
const addBtn = el(`
|
|
||||||
<div class="podbor-cta-row" style="margin:6px 0 14px;">
|
|
||||||
<button class="btn-primary" id="addClientBtn" type="button">＋ Новый клиент</button>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
addBtn.querySelector("#addClientBtn").addEventListener("click", () => {
|
|
||||||
haptic && haptic("impact");
|
|
||||||
location.hash = "#/clients/new";
|
|
||||||
});
|
|
||||||
root.appendChild(addBtn);
|
|
||||||
|
|
||||||
// Поиск (рендерится сразу, до загрузки)
|
// Поиск (рендерится сразу, до загрузки)
|
||||||
const searchWrap = el(`
|
const searchWrap = el(`
|
||||||
<div class="client-search-wrap">
|
<div class="client-search-wrap">
|
||||||
@ -417,6 +405,14 @@ const Clients = (function () {
|
|||||||
root.appendChild(searchWrap);
|
root.appendChild(searchWrap);
|
||||||
const searchInput = searchWrap.querySelector(".client-search");
|
const searchInput = searchWrap.querySelector(".client-search");
|
||||||
|
|
||||||
|
// FAB «Новый клиент» — плавающая кнопка, всегда видна поверх списка
|
||||||
|
const fab = el(`<button class="clients-fab" aria-label="Новый клиент" title="Новый клиент">＋</button>`);
|
||||||
|
fab.addEventListener("click", () => {
|
||||||
|
haptic && haptic("impact");
|
||||||
|
location.hash = "#/clients/new";
|
||||||
|
});
|
||||||
|
root.appendChild(fab);
|
||||||
|
|
||||||
const loading = el(`<div class="loader-inline"><div class="spinner"></div></div>`);
|
const loading = el(`<div class="loader-inline"><div class="spinner"></div></div>`);
|
||||||
root.appendChild(loading);
|
root.appendChild(loading);
|
||||||
|
|
||||||
@ -436,7 +432,7 @@ const Clients = (function () {
|
|||||||
<div class="empty">
|
<div class="empty">
|
||||||
<p class="lede" style="text-align:center;padding:40px 20px;color:var(--muted)">
|
<p class="lede" style="text-align:center;padding:40px 20px;color:var(--muted)">
|
||||||
Пока нет клиентов.<br>
|
Пока нет клиентов.<br>
|
||||||
Заведите первого — кнопка выше.
|
Нажмите <strong>＋</strong> чтобы завести первого.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
`));
|
`));
|
||||||
|
|||||||
@ -1799,6 +1799,38 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
/* отступ чтобы FAB не перекрывал последний элемент */
|
||||||
|
padding-bottom: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── FAB «Новый клиент» ─────────────────────────────── */
|
||||||
|
.clients-fab {
|
||||||
|
position: fixed;
|
||||||
|
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
|
||||||
|
right: 20px;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--walnut, #6B4A2B);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4px 20px rgba(107, 74, 43, 0.38);
|
||||||
|
z-index: 90;
|
||||||
|
transition: transform 0.14s ease, box-shadow 0.14s ease;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.clients-fab:active {
|
||||||
|
transform: scale(0.9);
|
||||||
|
box-shadow: 0 2px 10px rgba(107, 74, 43, 0.28);
|
||||||
}
|
}
|
||||||
|
|
||||||
.client-card {
|
.client-card {
|
||||||
|
|||||||
@ -12,14 +12,14 @@
|
|||||||
<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;800&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&family=Cormorant+Garamond:ital,wght@1,400;1,500;1,600&family=Caveat:wght@500;700&display=swap">
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&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&family=Cormorant+Garamond:ital,wght@1,400;1,500;1,600&family=Caveat:wght@500;700&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=20260515a">
|
<link rel="stylesheet" href="assets/styles.css?v=20260515b">
|
||||||
<link rel="stylesheet" href="assets/podbor.css?v=20260515a">
|
<link rel="stylesheet" href="assets/podbor.css?v=20260515b">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Splash — лого @wasrusgen1 + опилки (16) + вращающийся диск -->
|
<!-- Splash — лого @wasrusgen1 + опилки (16) + вращающийся диск -->
|
||||||
<div class="loader splash" id="splash">
|
<div class="loader splash" id="splash">
|
||||||
<div class="brand-logo-wrap">
|
<div class="brand-logo-wrap">
|
||||||
<img class="brand-logo" src="assets/wasrusgen-logo.svg?v=20260515a" alt="@wasrusgen1">
|
<img class="brand-logo" src="assets/wasrusgen-logo.svg?v=20260515b" alt="@wasrusgen1">
|
||||||
<div class="splash-dust" aria-hidden="true">
|
<div class="splash-dust" aria-hidden="true">
|
||||||
<span class="dust d1"></span> <span class="dust d2"></span>
|
<span class="dust d1"></span> <span class="dust d2"></span>
|
||||||
<span class="dust d3"></span> <span class="dust d4"></span>
|
<span class="dust d3"></span> <span class="dust d4"></span>
|
||||||
@ -35,15 +35,15 @@
|
|||||||
<div class="brand-tagline-gold">CRM</div>
|
<div class="brand-tagline-gold">CRM</div>
|
||||||
</div>
|
</div>
|
||||||
<main id="app"></main>
|
<main id="app"></main>
|
||||||
<script src="assets/icons.js?v=20260515a"></script>
|
<script src="assets/icons.js?v=20260515b"></script>
|
||||||
<script src="assets/podbor.config.js?v=20260515a"></script>
|
<script src="assets/podbor.config.js?v=20260515b"></script>
|
||||||
<script src="assets/podbor.picts.js?v=20260515a"></script>
|
<script src="assets/podbor.picts.js?v=20260515b"></script>
|
||||||
<script src="assets/podbor.js?v=20260515a"></script>
|
<script src="assets/podbor.js?v=20260515b"></script>
|
||||||
<script src="assets/clients.js?v=20260515a"></script>
|
<script src="assets/clients.js?v=20260515b"></script>
|
||||||
<script src="assets/zamer-picts.js?v=20260515a"></script>
|
<script src="assets/zamer-picts.js?v=20260515b"></script>
|
||||||
<script src="assets/measurements.js?v=20260515a"></script>
|
<script src="assets/measurements.js?v=20260515b"></script>
|
||||||
<script src="assets/request.js?v=20260515a"></script>
|
<script src="assets/request.js?v=20260515b"></script>
|
||||||
<script src="assets/assembly.js?v=20260515a"></script>
|
<script src="assets/assembly.js?v=20260515b"></script>
|
||||||
<script src="assets/app.js?v=20260515a"></script>
|
<script src="assets/app.js?v=20260515b"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user