refactor: Упростить макет формы редактирования вариантов и вернуть компактный вид

- Переместить название и описание над таблицей в отдельную карточку
- Убрать двухколонный layout (col-lg-4/col-lg-8), сделать весь контент в один столбец
- Удалить лишние div обёртки и стили для ограничения высоты (max-height: 36px)
- Уменьшить padding в таблице (4px 6px) для более компактного вида
- Таблица товаров тонкая и удобная, без скачков и деформаций

Результат:
- Чистый, компактный интерфейс в один столбец
- Без визуального шума и лишних обёрток
- Читаемо и просто для редактирования вариантов

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-30 00:14:30 +03:00
parent dbb94e9d2a
commit aec884240e

View File

@@ -23,10 +23,8 @@
<form method="post">
{% csrf_token %}
<div class="row g-3">
<!-- ЛЕВАЯ КОЛОНКА: Основная информация -->
<div class="col-lg-4">
<div class="card border-0 shadow-sm">
<!-- Основная информация о группе -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-3">
<h5 class="card-title mb-3">Информация о группе</h5>
@@ -47,10 +45,8 @@
</div>
</div>
</div>
</div>
<!-- ПРАВАЯ КОЛОНКА: Товары в группе -->
<div class="col-lg-8">
<!-- Товары в группе -->
<div class="card border-0 shadow-sm">
<div class="card-body p-3">
<h5 class="card-title mb-3">Товары в группе (в порядке приоритета)</h5>
@@ -129,8 +125,6 @@
</div>
</div>
</div>
</div>
</div>
<!-- Sticky Footer -->
<div class="sticky-bottom bg-white border-top mt-4 p-3 d-flex justify-content-between align-items-center shadow-sm">
@@ -143,17 +137,69 @@
</div>
<style>
.item-row { position: relative; }
.item-row .btn-outline-secondary { opacity: 0.6; }
.item-row .btn-outline-secondary:hover { opacity: 1; }
/* Таблица товаров в группе */
.table {
margin-bottom: 0;
}
/* Строки таблицы */
.item-row {
position: relative;
}
.item-row td {
padding: 4px 6px !important;
vertical-align: middle;
}
/* Select2 контейнеры в таблице */
.item-row .select2-container {
width: 100% !important;
display: block !important;
}
.item-row .select2-container .select2-selection {
border-radius: 4px !important;
border: 1px solid #dee2e6 !important;
}
/* Ограничить dropdown список от растягивания */
.select2-container--open .select2-dropdown {
max-height: 300px !important;
}
.select2-results__option {
padding: 8px !important;
line-height: 1.4 !important;
}
/* Стили для кнопок навигации */
.item-row .btn-outline-secondary {
opacity: 0.6;
}
.item-row .btn-outline-secondary:hover {
opacity: 1;
}
/* Скрыть поля priority и DELETE */
[name$="-priority"], [name$="-DELETE"], [name$="-id"] {
display: none !important;
}
.sticky-bottom { position: sticky; bottom: 0; z-index: 100; }
.table { margin-bottom: 0; }
/* Sticky footer */
.sticky-bottom {
position: sticky;
bottom: 0;
z-index: 100;
}
/* Данные товара (артикул, цена, наличие) */
[data-product-sku],
[data-product-price],
[data-product-stock] {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>