From 48021da856ec2e6be643620a2ea40f094b410e21 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Fri, 7 Nov 2025 18:25:10 +0300
Subject: [PATCH] =?UTF-8?q?refactor:=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=89=D0=B5=D0=BD=D1=8B=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82?=
 =?UTF-8?q?=D1=80=D1=8B=20=D0=B8=D0=B7=20=D0=B1=D0=BE=D0=BA=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B5=D1=80=D1=85=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Изменения:
- Фильтры теперь расположены горизонтально в одной строке над таблицей
- Кнопка "Создать заказ" перенесена в правый верхний угол рядом с заголовком
- Календарный фильтр дат вынесен во вторую строку для лучшей читаемости
- Убрана двухколоночная компоновка, таблица теперь занимает всю ширину
- Улучшена компактность интерфейса - больше места для таблицы данных

Преимущества новой компоновки:
- Таблица заказов использует всю ширину экрана
- Фильтры компактно организованы сверху
- Улучшена видимость данных

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../orders/templates/orders/order_list.html   | 136 +++++++++---------
 1 file changed, 67 insertions(+), 69 deletions(-)

diff --git a/myproject/orders/templates/orders/order_list.html b/myproject/orders/templates/orders/order_list.html
index 7661d6f..dd78ec0 100644
--- a/myproject/orders/templates/orders/order_list.html
+++ b/myproject/orders/templates/orders/order_list.html
@@ -9,80 +9,80 @@
 
 {% block content %}
 <div class="container-fluid">
-    <div class="row mb-4">
+    <!-- Заголовок и кнопка создания -->
+    <div class="row mb-3 align-items-center">
         <div class="col">
             <h1>Заказы</h1>
         </div>
-    </div>
-
-    <div class="row">
-        <!-- Левая колонка: Фильтры и кнопка -->
-        <div class="col-md-3 mb-4">
-            <!-- Фильтры и поиск -->
-            <div class="card mb-3">
-                <div class="card-header">
-                    <h5 class="mb-0">
-                        <i class="bi bi-funnel-fill"></i> Фильтры
-                    </h5>
-                </div>
-                <div class="card-body">
-                    <form method="get">
-                        <!-- Поиск -->
-                        <div class="mb-3">
-                            <label for="{{ filter.form.search.id_for_label }}" class="form-label">
-                                <i class="bi bi-search"></i> Поиск
-                            </label>
-                            {{ filter.form.search }}
-                        </div>
-
-                        <!-- Календарный фильтр по дате доставки -->
-                        {% include 'orders/components/date_range_filter.html' with field_after=filter.form.delivery_date_after field_before=filter.form.delivery_date_before label="Дата доставки" icon="truck" %}
-
-                        <!-- Статус -->
-                        <div class="mb-3">
-                            <label for="{{ filter.form.status.id_for_label }}" class="form-label">
-                                <i class="bi bi-flag"></i> Статус
-                            </label>
-                            {{ filter.form.status }}
-                        </div>
-
-                        <!-- Тип доставки -->
-                        <div class="mb-3">
-                            <label for="{{ filter.form.delivery_type.id_for_label }}" class="form-label">
-                                <i class="bi bi-box"></i> Тип
-                            </label>
-                            {{ filter.form.delivery_type }}
-                        </div>
-
-                        <!-- Статус оплаты -->
-                        <div class="mb-3">
-                            <label for="{{ filter.form.payment_status.id_for_label }}" class="form-label">
-                                <i class="bi bi-credit-card"></i> Оплата
-                            </label>
-                            {{ filter.form.payment_status }}
-                        </div>
-
-                        <!-- Кнопки -->
-                        <div class="d-grid gap-2">
-                            <button type="submit" class="btn btn-primary">
-                                <i class="bi bi-check-circle"></i> Применить
-                            </button>
-                            <a href="{% url 'orders:order-list' %}" class="btn btn-outline-secondary">
-                                <i class="bi bi-x-circle"></i> Сбросить
-                            </a>
-                        </div>
-                    </form>
-                </div>
-            </div>
-
-            <!-- Кнопка создания заказа -->
-            <a href="{% url 'orders:order-create' %}" class="btn btn-success w-100">
+        <div class="col-auto">
+            <a href="{% url 'orders:order-create' %}" class="btn btn-success">
                 <i class="bi bi-plus-circle"></i> Создать заказ
             </a>
         </div>
+    </div>
 
-        <!-- Правая колонка: Таблица заказов -->
-        <div class="col-md-9">
+    <!-- Фильтры сверху -->
+    <div class="card mb-4">
+        <div class="card-header">
+            <h5 class="mb-0">
+                <i class="bi bi-funnel-fill"></i> Фильтры
+            </h5>
+        </div>
+        <div class="card-body">
+            <form method="get">
+                <div class="row g-3">
+                    <!-- Поиск -->
+                    <div class="col-md-3">
+                        <label for="{{ filter.form.search.id_for_label }}" class="form-label">
+                            <i class="bi bi-search"></i> Поиск
+                        </label>
+                        {{ filter.form.search }}
+                    </div>
+
+                    <!-- Статус -->
+                    <div class="col-md-2">
+                        <label for="{{ filter.form.status.id_for_label }}" class="form-label">
+                            <i class="bi bi-flag"></i> Статус
+                        </label>
+                        {{ filter.form.status }}
+                    </div>
+
+                    <!-- Тип доставки -->
+                    <div class="col-md-2">
+                        <label for="{{ filter.form.delivery_type.id_for_label }}" class="form-label">
+                            <i class="bi bi-box"></i> Тип
+                        </label>
+                        {{ filter.form.delivery_type }}
+                    </div>
+
+                    <!-- Статус оплаты -->
+                    <div class="col-md-2">
+                        <label for="{{ filter.form.payment_status.id_for_label }}" class="form-label">
+                            <i class="bi bi-credit-card"></i> Оплата
+                        </label>
+                        {{ filter.form.payment_status }}
+                    </div>
+
+                    <!-- Кнопки -->
+                    <div class="col-md-3 d-flex align-items-end gap-2">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-check-circle"></i> Применить
+                        </button>
+                        <a href="{% url 'orders:order-list' %}" class="btn btn-outline-secondary">
+                            <i class="bi bi-x-circle"></i> Сбросить
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Календарный фильтр по дате доставки (вторая строка) -->
+                <div class="row mt-3">
+                    <div class="col-md-6">
+                        {% include 'orders/components/date_range_filter.html' with field_after=filter.form.delivery_date_after field_before=filter.form.delivery_date_before label="Дата доставки" icon="truck" %}
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
 
     <!-- Таблица заказов -->
     <div class="card">
@@ -220,8 +220,6 @@
             {% endif %}
         </div>
     </div>
-        </div>
-    </div>
 </div>
 {% endblock %}