From aec884240e167aec2807ee1a56ceeef8d8571f4e Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Thu, 30 Oct 2025 00:14:30 +0300
Subject: [PATCH] =?UTF-8?q?refactor:=20=D0=A3=D0=BF=D1=80=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=D1=82=D1=8C=20=D0=BC=D0=B0=D0=BA=D0=B5=D1=82=20?=
 =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA?=
 =?UTF-8?q?=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=B2?=
 =?UTF-8?q?=D0=B0=D1=80=D0=B8=D0=B0=D0=BD=D1=82=D0=BE=D0=B2=20=D0=B8=20?=
 =?UTF-8?q?=D0=B2=D0=B5=D1=80=D0=BD=D1=83=D1=82=D1=8C=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BA=D1=82=D0=BD=D1=8B=D0=B9=20=D0=B2=D0=B8=D0=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Переместить название и описание над таблицей в отдельную карточку
- Убрать двухколонный 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>
---
 .../templates/products/variantgroup_form.html | 112 ++++++++++++------
 1 file changed, 79 insertions(+), 33 deletions(-)

diff --git a/myproject/products/templates/products/variantgroup_form.html b/myproject/products/templates/products/variantgroup_form.html
index 98a5635..c738b31 100644
--- a/myproject/products/templates/products/variantgroup_form.html
+++ b/myproject/products/templates/products/variantgroup_form.html
@@ -23,37 +23,33 @@
     <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-body p-3">
-                        <h5 class="card-title mb-3">Информация о группе</h5>
+        <!-- Основная информация о группе -->
+        <div class="card border-0 shadow-sm mb-4">
+            <div class="card-body p-3">
+                <h5 class="card-title mb-3">Информация о группе</h5>
 
-                        <div class="mb-3">
-                            <label for="{{ form.name.id_for_label }}" class="form-label">{{ form.name.label }}</label>
-                            {{ form.name }}
-                            {% if form.name.errors %}
-                                <div class="text-danger small mt-1">{{ form.name.errors }}</div>
-                            {% endif %}
-                        </div>
+                <div class="mb-3">
+                    <label for="{{ form.name.id_for_label }}" class="form-label">{{ form.name.label }}</label>
+                    {{ form.name }}
+                    {% if form.name.errors %}
+                        <div class="text-danger small mt-1">{{ form.name.errors }}</div>
+                    {% endif %}
+                </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.description.id_for_label }}" class="form-label">{{ form.description.label }}</label>
-                            {{ form.description }}
-                            {% if form.description.errors %}
-                                <div class="text-danger small mt-1">{{ form.description.errors }}</div>
-                            {% endif %}
-                        </div>
-                    </div>
+                <div class="mb-3">
+                    <label for="{{ form.description.id_for_label }}" class="form-label">{{ form.description.label }}</label>
+                    {{ form.description }}
+                    {% if form.description.errors %}
+                        <div class="text-danger small mt-1">{{ form.description.errors }}</div>
+                    {% endif %}
                 </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>
+        <!-- Товары в группе -->
+        <div class="card border-0 shadow-sm">
+            <div class="card-body p-3">
+                <h5 class="card-title mb-3">Товары в группе (в порядке приоритета)</h5>
 
                         {{ items_formset.management_form }}
 
@@ -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>