From d79c523d09e876cddb3e3bbc728ff126c08f1953 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Thu, 11 Dec 2025 00:10:44 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B4=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B0=D0=BD=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=20=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=20=D1=81=D0=BF?=
 =?UTF-8?q?=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BD=D0=B0=20=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=BD=D0=BE=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BE=D1=87?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Убрана правая боковая панель с формой
- Перенесён поиск товаров и форма в центральную карточку 'Добавить позицию в документ'
- Форма теперь располагается горизонтально под поиском
- Кнопка изменена на явную: 'Добавить в документ' с иконкой check-circle
- Добавлена подсказка об использовании поиска
- Улучшена визуальная иерархия: информация о документе → добавление позиции → таблица позиций
- Более простой и понятный UX для пользователей
---
 .../inventory/writeoff_document/detail.html   | 145 +++++++++---------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/myproject/inventory/templates/inventory/writeoff_document/detail.html b/myproject/inventory/templates/inventory/writeoff_document/detail.html
index 52c2bea..0b062c6 100644
--- a/myproject/inventory/templates/inventory/writeoff_document/detail.html
+++ b/myproject/inventory/templates/inventory/writeoff_document/detail.html
@@ -27,8 +27,9 @@
     {% endif %}
 
     <div class="row g-3">
-        <!-- Основная информация -->
-        <div class="col-lg-8">
+        <!-- Основной контент - одна колонка -->
+        <div class="col-12">
+            <!-- Информация о документе -->
             <div class="card border-0 shadow-sm mb-3">
                 <div class="card-header bg-light py-3 d-flex justify-content-between align-items-center">
                     <h5 class="mb-0">
@@ -96,6 +97,77 @@
                 </div>
             </div>
 
+            <!-- Добавление позиции -->
+            {% if document.can_edit %}
+            <div class="card border-0 shadow-sm mb-3">
+                <div class="card-header bg-light py-3">
+                    <h6 class="mb-0"><i class="bi bi-plus-square me-2"></i>Добавить позицию в документ</h6>
+                </div>
+                <div class="card-body">
+                    <!-- Компонент поиска товаров -->
+                    <div class="mb-3">
+                        {% include 'products/components/product_search_picker.html' with container_id='writeoff-document-picker' title='Найти товар для списания' warehouse_id=document.warehouse.id filter_in_stock_only=True categories=categories tags=tags add_button_text='Выбрать товар' multi_select=False show_select_all=False content_height='250px' %}
+                    </div>
+
+                    <!-- Информация о выбранном товаре -->
+                    <div id="selected-product-info" class="alert alert-info mb-3" style="display: none;">
+                        <div class="d-flex align-items-center">
+                            <img id="selected-product-photo" src="" alt="" class="rounded me-2" style="width: 50px; height: 50px; object-fit: cover; display: none;">
+                            <div class="flex-grow-1">
+                                <strong id="selected-product-name" class="d-block"></strong>
+                                <small class="text-muted" id="selected-product-sku"></small>
+                            </div>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" id="clear-selected-product" title="Очистить">
+                                <i class="bi bi-x"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Форма добавления позиции -->
+                    <form method="post" action="{% url 'inventory:writeoff-document-add-item' document.pk %}" id="add-item-form">
+                        {% csrf_token %}
+
+                        <div class="row g-3">
+                            <div class="col-md-3">
+                                <label for="id_product" class="form-label">Товар <span class="text-danger">*</span></label>
+                                {{ item_form.product }}
+                                {% if item_form.product.errors %}
+                                <div class="text-danger small">{{ item_form.product.errors.0 }}</div>
+                                {% endif %}
+                            </div>
+
+                            <div class="col-md-2">
+                                <label for="id_quantity" class="form-label">Количество <span class="text-danger">*</span></label>
+                                {{ item_form.quantity }}
+                                {% if item_form.quantity.errors %}
+                                <div class="text-danger small">{{ item_form.quantity.errors.0 }}</div>
+                                {% endif %}
+                            </div>
+
+                            <div class="col-md-3">
+                                <label for="id_reason" class="form-label">Причина</label>
+                                {{ item_form.reason }}
+                            </div>
+
+                            <div class="col-md-4">
+                                <label for="id_notes" class="form-label">Примечания</label>
+                                {{ item_form.notes }}
+                            </div>
+                        </div>
+
+                        <div class="mt-3">
+                            <button type="submit" class="btn btn-primary">
+                                <i class="bi bi-check-circle me-1"></i>Добавить в документ
+                            </button>
+                            <small class="text-muted ms-3">
+                                <i class="bi bi-info-circle"></i> Используйте поиск выше для быстрого выбора товара
+                            </small>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            {% endif %}
+
             <!-- Таблица позиций -->
             <div class="card border-0 shadow-sm">
                 <div class="card-header bg-light py-3">
@@ -162,75 +234,6 @@
                 </div>
             </div>
         </div>
-
-        <!-- Боковая панель: добавление позиции -->
-        {% if document.can_edit %}
-        <div class="col-lg-4">
-            <!-- Компонент поиска товаров -->
-            <div class="mb-3">
-                {% include 'products/components/product_search_picker.html' with container_id='writeoff-document-picker' title='Поиск товара для списания' warehouse_id=document.warehouse.id filter_in_stock_only=True categories=categories tags=tags add_button_text='Выбрать товар' multi_select=False show_select_all=False content_height='300px' %}
-            </div>
-
-            <!-- Форма добавления позиции -->
-            <div class="card border-0 shadow-sm sticky-top" style="top: 1rem;">
-                <div class="card-header bg-light py-3">
-                    <h6 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Добавить товар</h6>
-                </div>
-                <div class="card-body">
-                    <!-- Информация о выбранном товаре -->
-                    <div id="selected-product-info" class="alert alert-info mb-3" style="display: none;">
-                        <div class="d-flex align-items-center">
-                            <img id="selected-product-photo" src="" alt="" class="rounded me-2" style="width: 40px; height: 40px; object-fit: cover; display: none;">
-                            <div class="flex-grow-1">
-                                <strong id="selected-product-name" class="d-block"></strong>
-                                <small class="text-muted" id="selected-product-sku"></small>
-                            </div>
-                            <button type="button" class="btn btn-sm btn-outline-secondary" id="clear-selected-product" title="Очистить">
-                                <i class="bi bi-x"></i>
-                            </button>
-                        </div>
-                    </div>
-
-                    <form method="post" action="{% url 'inventory:writeoff-document-add-item' document.pk %}" id="add-item-form">
-                        {% csrf_token %}
-
-                        <div class="mb-3">
-                            <label for="id_product" class="form-label">Товар <span class="text-danger">*</span></label>
-                            {{ item_form.product }}
-                            {% if item_form.product.errors %}
-                            <div class="text-danger small">{{ item_form.product.errors.0 }}</div>
-                            {% endif %}
-                            <small class="text-muted d-block mt-1">
-                                <i class="bi bi-info-circle"></i> Используйте поиск выше для удобного выбора
-                            </small>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="id_quantity" class="form-label">Количество <span class="text-danger">*</span></label>
-                            {{ item_form.quantity }}
-                            {% if item_form.quantity.errors %}
-                            <div class="text-danger small">{{ item_form.quantity.errors.0 }}</div>
-                            {% endif %}
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="id_reason" class="form-label">Причина</label>
-                            {{ item_form.reason }}
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="id_notes" class="form-label">Примечания</label>
-                            {{ item_form.notes }}
-                        </div>
-
-                        <button type="submit" class="btn btn-primary w-100">
-                            <i class="bi bi-plus-lg me-1"></i>Добавить
-                        </button>
-                    </form>
-                </div>
-            </div>
-        </div>
-        {% endif %}
     </div>
 </div>