mirror of
https://github.com/wasrusgen/zov-tech.git
synced 2026-06-03 15:44:47 +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.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(`
|
||||
<div class="client-search-wrap">
|
||||
@ -417,6 +405,14 @@ const Clients = (function () {
|
||||
root.appendChild(searchWrap);
|
||||
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>`);
|
||||
root.appendChild(loading);
|
||||
|
||||
@ -436,7 +432,7 @@ const Clients = (function () {
|
||||
<div class="empty">
|
||||
<p class="lede" style="text-align:center;padding:40px 20px;color:var(--muted)">
|
||||
Пока нет клиентов.<br>
|
||||
Заведите первого — кнопка выше.
|
||||
Нажмите <strong>＋</strong> чтобы завести первого.
|
||||
</p>
|
||||
</div>
|
||||
`));
|
||||
|
||||
@ -1799,6 +1799,38 @@
|
||||
flex-direction: column;
|
||||
gap: 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 {
|
||||
|
||||
@ -12,14 +12,14 @@
|
||||
<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">
|
||||
<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/podbor.css?v=20260515a">
|
||||
<link rel="stylesheet" href="assets/styles.css?v=20260515b">
|
||||
<link rel="stylesheet" href="assets/podbor.css?v=20260515b">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Splash — лого @wasrusgen1 + опилки (16) + вращающийся диск -->
|
||||
<div class="loader splash" id="splash">
|
||||
<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">
|
||||
<span class="dust d1"></span> <span class="dust d2"></span>
|
||||
<span class="dust d3"></span> <span class="dust d4"></span>
|
||||
@ -35,15 +35,15 @@
|
||||
<div class="brand-tagline-gold">CRM</div>
|
||||
</div>
|
||||
<main id="app"></main>
|
||||
<script src="assets/icons.js?v=20260515a"></script>
|
||||
<script src="assets/podbor.config.js?v=20260515a"></script>
|
||||
<script src="assets/podbor.picts.js?v=20260515a"></script>
|
||||
<script src="assets/podbor.js?v=20260515a"></script>
|
||||
<script src="assets/clients.js?v=20260515a"></script>
|
||||
<script src="assets/zamer-picts.js?v=20260515a"></script>
|
||||
<script src="assets/measurements.js?v=20260515a"></script>
|
||||
<script src="assets/request.js?v=20260515a"></script>
|
||||
<script src="assets/assembly.js?v=20260515a"></script>
|
||||
<script src="assets/app.js?v=20260515a"></script>
|
||||
<script src="assets/icons.js?v=20260515b"></script>
|
||||
<script src="assets/podbor.config.js?v=20260515b"></script>
|
||||
<script src="assets/podbor.picts.js?v=20260515b"></script>
|
||||
<script src="assets/podbor.js?v=20260515b"></script>
|
||||
<script src="assets/clients.js?v=20260515b"></script>
|
||||
<script src="assets/zamer-picts.js?v=20260515b"></script>
|
||||
<script src="assets/measurements.js?v=20260515b"></script>
|
||||
<script src="assets/request.js?v=20260515b"></script>
|
||||
<script src="assets/assembly.js?v=20260515b"></script>
|
||||
<script src="assets/app.js?v=20260515b"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user