smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix(pos): улучшена прокрутка модалки выбора единицы продажи

Browse Source 
Добавлен `modal-dialog-scrollable` для корректной прокрутки содержимого модального окна.
Реализован flex-контейнер с фиксированным хедером и футером, контент прокручивается в середине.
Убран жесткий `max-height` у списка единиц продажи, теперь высота адаптируется автоматически.
Футер закреплен внизу с `position: sticky` для постоянной видимости кнопок действий.
This commit is contained in:
Andrey Smakotin
2026-01-27 20:40:50 +03:00
parent c0e9b92e4a
commit 0ee6391810
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
myproject/pos/templates/pos/terminal.html
View File

@@ -647,20 +647,20 @@
<!-- Модалка: Выбор единицы продажи товара --> <!-- Модалка: Выбор единицы продажи товара -->
<div class="modal fade" id="selectProductUnitModal" tabindex="-1" aria-labelledby="selectProductUnitModalLabel" aria-hidden="true"> <div class="modal fade" id="selectProductUnitModal" tabindex="-1" aria-labelledby="selectProductUnitModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content" style="max-height: 90vh; display: flex; flex-direction: column;">
<div class="modal-header"> <div class="modal-header" style="flex-shrink: 0;">
<h5 class="modal-title" id="selectProductUnitModalLabel"> <h5 class="modal-title" id="selectProductUnitModalLabel">
<i class="bi bi-box-seam"></i> <span id="unitModalProductName"></span> <i class="bi bi-box-seam"></i> <span id="unitModalProductName"></span>
</h5> </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body" style="flex: 1; overflow-y: auto; min-height: 0;">
<div class="row"> <div class="row">
<!-- Левая колонка: список единиц продажи --> <!-- Левая колонка: список единиц продажи -->
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<label class="form-label fw-semibold">Выберите единицу продажи</label> <label class="form-label fw-semibold">Выберите единицу продажи</label>
<div id="unitSelectionList" class="d-flex flex-column gap-2" style="max-height: 400px; overflow-y: auto;"> <div id="unitSelectionList" class="d-flex flex-column gap-2">
<!-- Заполняется через JavaScript --> <!-- Заполняется через JavaScript -->
</div> </div>
</div> </div>
@@ -717,7 +717,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer" style="flex-shrink: 0; position: sticky; bottom: 0; background: white; border-top: 1px solid #dee2e6;">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-success" id="confirmAddUnitToCart" disabled> <button type="button" class="btn btn-success" id="confirmAddUnitToCart" disabled>
<i class="bi bi-cart-plus"></i> Добавить в корзину <i class="bi bi-cart-plus"></i> Добавить в корзину