feat: Добавить мобильную адаптацию для POS-терминала

- Добавить фиксированную панель корзины внизу экрана на мобильных
  - Отображение количества товаров и суммы
  - Кнопки "Продать" и "Очистить" всегда доступны
  - Тап на панель открывает корзину как overlay

- Фиксировать поиск и категории сверху на мобильных
  - Поиск всегда виден при скролле
  - Категории в collapsible-блоке (сворачиваются)
  - Категории в 3 колонки на мобильных

- Улучшить поиск по токенам (разбивает фразу на слова)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-17 23:03:40 +03:00
parent 3095e01659
commit c77fcaf669
4 changed files with 454 additions and 12 deletions

View File

@@ -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">