feat: Добавить мобильную адаптацию для POS-терминала
- Добавить фиксированную панель корзины внизу экрана на мобильных - Отображение количества товаров и суммы - Кнопки "Продать" и "Очистить" всегда доступны - Тап на панель открывает корзину как overlay - Фиксировать поиск и категории сверху на мобильных - Поиск всегда виден при скролле - Категории в collapsible-блоке (сворачиваются) - Категории в 3 колонки на мобильных - Улучшить поиск по токенам (разбивает фразу на слова) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -28,8 +28,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<div class="mb-3">
|
||||
<div class="row g-3" id="categoryGrid"></div>
|
||||
<div class="mb-3 categories-wrapper" id="categoriesWrapper">
|
||||
<button class="categories-toggle w-100 d-flex align-items-center justify-content-between py-2 px-0 bg-transparent border-0" type="button" id="categoriesToggle">
|
||||
<span class="fw-semibold small">Категории</span>
|
||||
<i class="bi bi-chevron-down transition-transform" id="categoriesChevron"></i>
|
||||
</button>
|
||||
<div class="categories-content" id="categoriesContent">
|
||||
<div class="row g-2" id="categoryGrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products Grid (Блок товаров) - Прокручиваемая область -->
|
||||
@@ -123,6 +129,35 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Мобильная плавающая корзина -->
|
||||
<div class="mobile-cart-bar" id="mobileCartBar">
|
||||
<div class="mobile-cart-summary" id="mobileCartSummary">
|
||||
<span class="mobile-cart-count">0 товаров</span>
|
||||
<span class="mobile-cart-total">0.00 ₽</span>
|
||||
</div>
|
||||
<div class="mobile-cart-actions">
|
||||
<button class="btn btn-success btn-sm" id="mobileCheckoutBtn">
|
||||
<i class="bi bi-check2-circle"></i> <span>Продать</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" id="mobileClearCartBtn" title="Очистить корзину">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Мобильная корзина (overlay) -->
|
||||
<div class="mobile-cart-overlay" id="mobileCartOverlay">
|
||||
<div class="mobile-cart-content">
|
||||
<div class="mobile-cart-header">
|
||||
<h6 class="mb-0">Корзина</h6>
|
||||
<button class="btn-close" id="mobileCartClose"></button>
|
||||
</div>
|
||||
<div class="mobile-cart-body" id="mobileCartBody">
|
||||
<!-- Содержимое корзины динамически -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: Создание временного комплекта на витрину -->
|
||||
<div class="modal fade" id="createTempKitModal" tabindex="-1" aria-labelledby="createTempKitModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-fullscreen-sm-down">
|
||||
|
||||
Reference in New Issue
Block a user