feat(pos): улучшить адаптивность POS-терминала для мобильных устройств
- col-md-8/4 → col-12 col-md-8/4 для корректного отображения на мобильных - Кнопки действий: height: 60px → min-height: 44px (минимальный размер для тапа) - Модальные окна: добавлен modal-fullscreen-sm-down/md-down - Колонки внутри модалок: добавлен col-12 для мобильной адаптивности - Увеличена мелкая кнопка отмены скидки: 32px → 40px - CSS: добавлены медиа-запросы для мобильных устройств * min-height: 44px для полей ввода и кнопок * font-size: 16px предотвращает зум на iOS * Оптимизация отступов в модалках * UX улучшения для тач-устройств * Плавная прокрутка на iOS - Исправлено перекрытие товаров корзиной на мобильных (position: absolute → relative) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
<div class="pos-container">
|
||||
<div class="row g-3" style="height: 100%;">
|
||||
<!-- Products Grid (Left side - 8/12) -->
|
||||
<div class="col-md-8" style="display: flex; flex-direction: column; height: 100%;">
|
||||
<div class="col-12 col-md-8" style="display: flex; flex-direction: column; height: 100%;">
|
||||
<!-- Search Box -->
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Right Panel (4/12) - Fixed -->
|
||||
<div class="col-md-4">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="right-panel-fixed d-flex flex-column">
|
||||
<!-- Информация о складе (всегда показываем блок для фиксированной позиции) -->
|
||||
<div class="card mb-2">
|
||||
@@ -98,22 +98,22 @@
|
||||
<div class="card-body p-2">
|
||||
<div class="row g-2">
|
||||
<div class="col-4">
|
||||
<button class="btn btn-outline-warning rounded-3 w-100" id="addToShowcaseBtn" style="height: 60px;">
|
||||
<button class="btn btn-outline-warning rounded-3 w-100" id="addToShowcaseBtn" style="min-height: 44px;">
|
||||
<i class="bi bi-flower1"></i><br>На витрину
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button class="btn btn-outline-primary rounded-3 w-100" id="scheduleLater" style="height: 60px;">
|
||||
<button class="btn btn-outline-primary rounded-3 w-100" id="scheduleLater" style="min-height: 44px;">
|
||||
<i class="bi bi-calendar2"></i><br>Отложенный заказ
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button class="btn btn-outline-secondary rounded-3 w-100" id="clearCart" style="height: 60px;">
|
||||
<button class="btn btn-outline-secondary rounded-3 w-100" id="clearCart" style="min-height: 44px;">
|
||||
<i class="bi bi-trash"></i><br>Очистить
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-4 offset-4">
|
||||
<button class="btn btn-success rounded-3 w-100" id="checkoutNow" style="height: 60px;">
|
||||
<button class="btn btn-success rounded-3 w-100" id="checkoutNow" style="min-height: 44px;">
|
||||
<i class="bi bi-check2-circle"></i><br>Продать
|
||||
</button>
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@
|
||||
|
||||
<!-- Modal: Создание временного комплекта на витрину -->
|
||||
<div class="modal fade" id="createTempKitModal" tabindex="-1" aria-labelledby="createTempKitModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-dialog modal-xl modal-fullscreen-sm-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="createTempKitModalLabel">
|
||||
@@ -139,7 +139,7 @@
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<!-- Левая колонка: основные поля -->
|
||||
<div class="col-md-6">
|
||||
<div class="col-12 col-md-6">
|
||||
<!-- Название комплекта -->
|
||||
<div class="mb-3">
|
||||
<label for="tempKitName" class="form-label">Название комплекта *</label>
|
||||
@@ -181,7 +181,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Правая колонка: цены и состав -->
|
||||
<div class="col-md-6">
|
||||
<div class="col-12 col-md-6">
|
||||
<!-- Список товаров в корзине -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Товары в комплекте</label>
|
||||
@@ -282,7 +282,7 @@
|
||||
|
||||
<!-- Модалка: Продажа -->
|
||||
<div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" style="max-width: 85vw;">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-md-down" style="max-width: 85vw;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header py-2">
|
||||
<h5 class="modal-title" id="checkoutModalLabel">
|
||||
@@ -293,7 +293,7 @@
|
||||
<div class="modal-body py-2">
|
||||
<div class="row g-3">
|
||||
<!-- Левая колонка: состав заказа -->
|
||||
<div class="col-md-5">
|
||||
<div class="col-12 col-md-5">
|
||||
<!-- Информация о клиенте и баланс в одной строке -->
|
||||
<div class="row g-2 mb-2">
|
||||
<div class="col-auto">
|
||||
@@ -333,7 +333,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Правая колонка: оплата -->
|
||||
<div class="col-md-7">
|
||||
<div class="col-12 col-md-7">
|
||||
<div class="card mb-0">
|
||||
<div class="card-header bg-light py-2">
|
||||
<strong class="small">Оплата</strong>
|
||||
@@ -357,7 +357,7 @@
|
||||
<strong>Автоматически:</strong>
|
||||
<div id="autoDiscountsList"></div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-link text-danger p-1 ms-2" id="skipAutoDiscountBtn" style="display: none; width: 32px; height: 32px;" title="Отменить скидку">
|
||||
<button type="button" class="btn btn-sm btn-link text-danger p-1 ms-2" id="skipAutoDiscountBtn" style="display: none; min-width: 40px; min-height: 40px;" title="Отменить скидку">
|
||||
<i class="bi bi-x-lg fs-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -475,7 +475,7 @@
|
||||
|
||||
<!-- Модалка: Выбор склада -->
|
||||
<div class="modal fade" id="selectWarehouseModal" tabindex="-1" aria-labelledby="selectWarehouseModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog modal-fullscreen-sm-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="selectWarehouseModalLabel">
|
||||
@@ -511,7 +511,7 @@
|
||||
|
||||
<!-- Модалка: Выбор клиента -->
|
||||
<div class="modal fade" id="selectCustomerModal" tabindex="-1" aria-labelledby="selectCustomerModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog modal-fullscreen-sm-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="selectCustomerModalLabel">
|
||||
@@ -544,7 +544,7 @@
|
||||
|
||||
<!-- Модалка: Создание нового клиента -->
|
||||
<div class="modal fade" id="createCustomerModal" tabindex="-1" aria-labelledby="createCustomerModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog modal-fullscreen-sm-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="createCustomerModalLabel">
|
||||
@@ -593,7 +593,7 @@
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<!-- Левая колонка: список единиц продажи -->
|
||||
<div class="col-md-6">
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label fw-semibold">Выберите единицу продажи</label>
|
||||
<div id="unitSelectionList" class="d-flex flex-column gap-2" style="max-height: 400px; overflow-y: auto;">
|
||||
<!-- Заполняется через JavaScript -->
|
||||
@@ -601,7 +601,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Правая колонка: параметры -->
|
||||
<div class="col-md-6">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-light">
|
||||
<strong>Параметры добавления</strong>
|
||||
|
||||
Reference in New Issue
Block a user