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

Улучшен интерфейс POS: фиксированная правая панель с корзиной и 9 кнопками действий

Browse Source
This commit is contained in:
Andrey Smakotin
2025-11-16 13:57:44 +03:00
parent 139ac431ee
commit 8cf076c49e
2 changed files with 59 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
myproject/pos/static/pos/css/terminal.css
View File

@@ -51,3 +51,45 @@ body {
color: #6c757d;
font-style: italic;
}
/* Фиксация правой панели (корзина + кнопки) */
.right-panel-fixed {
position: fixed;
top: 56px; /* высота navbar */
right: 0;
bottom: 0;
width: 33.333%; /* 4/12 колонок */
overflow-y: auto;
padding: 1rem;
padding-right: 1.5rem;
z-index: 100;
display: flex;
flex-direction: column;
}
@media (max-width: 767.98px) {
.right-panel-fixed {
width: 100%;
left: 0;
}
}
/* Панель кнопок внутри фиксированного блока */
.action-buttons-panel {
margin-top: auto;
}
/* Стили для кнопок в панели действий */
.action-buttons-panel .btn {
font-size: 0.75rem;
line-height: 1.2;
white-space: normal;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem;
}

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

@@ -20,18 +20,19 @@
<div class="row g-3" id="productGrid"></div>
</div>
<!-- Right Panel (4/12) -->
<!-- Right Panel (4/12) - Fixed -->
<div class="col-md-4">
<div class="right-panel-fixed d-flex flex-column">
<!-- Cart Panel -->
<div class="card mb-3">
<div class="card mb-2 flex-grow-1" style="min-height: 0;">
<div class="card-header bg-white d-flex justify-content-between align-items-center">
<h6 class="mb-0">Корзина</h6>
<button class="btn btn-outline-primary btn-sm" id="customerSelectBtn">
<i class="bi bi-person"></i> Выбрать клиента
</button>
</div>
<div class="card-body d-flex flex-column" style="min-height: 300px;">
<div id="cartList" class="flex-grow-1 mb-3" style="overflow-y: auto; max-height: 300px;"></div>
<div class="card-body d-flex flex-column" style="min-height: 0;">
<div id="cartList" class="flex-grow-1 mb-3" style="overflow-y: auto;"></div>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-top pt-3">
@@ -48,24 +49,12 @@
<option value="bank_transfer">Банк. перевод</option>
</select>
</div>
<div class="d-grid gap-2">
<button class="btn btn-success" id="checkoutNow">
<i class="bi bi-check2-circle"></i> Продать
</button>
<button class="btn btn-outline-primary btn-sm" id="scheduleLater">
<i class="bi bi-calendar2"></i> Запланировать
</button>
<button class="btn btn-outline-secondary btn-sm" id="clearCart">
<i class="bi bi-trash"></i> Очистить
</button>
</div>
</div>
</div>
</div>
<!-- Action Buttons Panel -->
<div class="card">
<div class="card action-buttons-panel">
<div class="card-body p-2">
<div class="row g-2">
<div class="col-4">
@@ -89,7 +78,13 @@
</button>
</div>
<div class="col-4">
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
<button class="btn btn-outline-primary rounded-3 w-100" id="scheduleLater" style="height: 60px;">
<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;">
<i class="bi bi-trash"></i><br>Очистить
</button>
</div>
<div class="col-4">
@@ -97,12 +92,10 @@
</button>
</div>
<div class="col-4">
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
<button class="btn btn-success rounded-3 w-100" id="checkoutNow" style="height: 60px;">
<i class="bi bi-check2-circle"></i><br>Продать
</button>
</div>
<div class="col-4">
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
</button>
</div>
</div>
</div>