From fdd14804a745c1c3b74904e07c35c818a01db0b3 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Wed, 19 Nov 2025 00:53:16 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D0=B0=20=D1=81?=
 =?UTF-8?q?=D1=82=D0=B0=D1=82=D1=83=D1=81=D0=BE=D0=B2=20=D0=B7=D0=B0=D0=BA?=
 =?UTF-8?q?=D0=B0=D0=B7=D0=BE=D0=B2:=20=D0=B7=D0=B0=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20Fon?=
 =?UTF-8?q?t=20Awesome=20=D0=BD=D0=B0=20Bootstrap=20Icons,=20=D1=83=D0=B2?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B8=D1=87=D0=B5=D0=BD=D1=8B=20=D0=B1=D0=B5=D0=B9?=
 =?UTF-8?q?=D0=B4=D0=B6=D0=B8,=20=D0=BF=D0=BE=D0=BB=D0=BD=D1=8B=D0=B5=20?=
 =?UTF-8?q?=D0=BD=D0=B0=D0=B7=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B2=20=D0=B8=20=D0=B8=D1=82=D0=BE=D0=B3=D0=BE?=
 =?UTF-8?q?=D0=B2,=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=B9=D1=81=D1=82=D0=B2=D0=B8=D0=B9=20=D1=82=D0=BE=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BA=D0=BE=20=D1=81=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B0?=
 =?UTF-8?q?=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../orders/templates/orders/status_list.html  | 314 +++++++-----------
 1 file changed, 111 insertions(+), 203 deletions(-)

diff --git a/myproject/orders/templates/orders/status_list.html b/myproject/orders/templates/orders/status_list.html
index 9392178..8d7683e 100644
--- a/myproject/orders/templates/orders/status_list.html
+++ b/myproject/orders/templates/orders/status_list.html
@@ -5,225 +5,133 @@
 
 {% block content %}
 <style>
-    .status-card {
-        border: none;
-        border-left: 4px solid;
-        padding: 10px 14px;
-        margin-bottom: 6px;
-        border-radius: 4px;
-        background: #f8f9fa;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+    .compact-table {
+        font-size: 0.85rem;
     }
-
-    .status-card:hover {
-        background: white;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transform: translateX(2px);
+    .compact-table th,
+    .compact-table td {
+        padding: 0.4rem 0.5rem;
+        vertical-align: middle;
     }
-
-    .status-card-left {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        min-width: 0;
+    .compact-table .btn-sm {
+        padding: 0.2rem 0.5rem;
+        font-size: 0.75rem;
+        min-width: 32px;
     }
-
-    .status-color {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        flex-shrink: 0;
-        border: 2px solid rgba(0, 0, 0, 0.1);
-    }
-
-    .status-info {
-        flex: 1;
-        min-width: 0;
-    }
-
-    .status-name {
-        font-weight: 600;
-        font-size: 13px;
-        margin: 0;
-        word-break: break-word;
-    }
-
-    .status-meta {
-        display: flex;
-        gap: 6px;
-        margin-top: 2px;
-        flex-wrap: wrap;
-    }
-
-    .status-badge {
-        font-size: 10px;
-        padding: 2px 5px;
-        border-radius: 3px;
-    }
-
-    .status-actions {
-        display: flex;
-        gap: 8px;
-        flex-shrink: 0;
-        margin-left: 12px;
-    }
-
-    .status-actions .btn {
-        padding: 5px 10px !important;
-        font-size: 12px !important;
+    .compact-table .badge {
+        font-size: 0.75rem;
+        padding: 0.35rem 0.6rem;
         white-space: nowrap;
-        font-weight: 500;
-        border: 1.5px solid;
     }
-
-    .status-actions .btn i {
-        margin-right: 6px;
-    }
-
-    .status-actions .btn-outline-primary {
-        color: #0d6efd;
-        border-color: #0d6efd;
-    }
-
-    .status-actions .btn-outline-primary:hover {
-        background-color: #0d6efd;
-        color: white;
-    }
-
-    .status-actions .btn-outline-danger {
-        color: #dc3545;
-        border-color: #dc3545;
-    }
-
-    .status-actions .btn-outline-danger:hover {
-        background-color: #dc3545;
-        color: white;
-    }
-
-    .status-actions .btn-outline-secondary:disabled {
-        color: #6c757d;
-        border-color: #6c757d;
-        cursor: not-allowed;
-        opacity: 0.65;
-    }
-
-    .header-section {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 16px;
-    }
-
-    .header-left h1 {
-        font-size: 24px;
-        margin: 0;
-        font-weight: 700;
-    }
-
-    .header-left p {
-        margin: 2px 0 0 0;
-        color: #6c757d;
-        font-size: 12px;
-    }
-
-    @media (max-width: 768px) {
-        .header-section {
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 16px;
-        }
-
-        .status-card {
-            flex-direction: column;
-            align-items: flex-start;
-        }
-
-        .status-card-left {
-            width: 100%;
-            margin-bottom: 12px;
-        }
-
-        .status-actions {
-            width: 100%;
-            margin-left: 0;
-        }
-
-        .status-actions .btn {
-            flex: 1;
-        }
+    .compact-table code {
+        font-size: 0.75rem;
     }
 </style>
-
-<div class="container mt-4" style="max-width: 900px;">
-    <div class="header-section">
-        <div class="header-left">
-            <h1>Статусы</h1>
-            <p>{{ statuses|length }} статусов в системе</p>
-        </div>
+<div class="container-fluid mt-3">
+    <div class="d-flex justify-content-between align-items-center mb-2">
         <div>
-            <a href="{% url 'orders:status_create' %}" class="btn btn-primary" style="font-weight: 600;">
-                <i class="fas fa-plus"></i> Создать
-            </a>
+            <h1 class="h5 mb-0">Статусы</h1>
+            <div class="text-muted" style="font-size: 0.75rem;">{{ statuses|length }} статусов</div>
         </div>
+        <a href="{% url 'orders:status_create' %}" class="btn btn-primary btn-sm">
+            <i class="bi bi-plus-lg"></i> Создать
+        </a>
     </div>
 
     {% if messages %}
         {% for message in messages %}
-        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert" style="margin-bottom: 16px;">
-            {{ message }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>
+            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
+                {{ message }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
         {% endfor %}
     {% endif %}
 
-    <div>
-        {% for status in statuses %}
-        <div class="status-card" style="border-left-color: {{ status.color }};">
-            <div class="status-card-left">
-                <div class="status-color" style="background-color: {{ status.color }};"></div>
-                <div class="status-info">
-                    <p class="status-name" title="{{ status.name }}">{{ status.name }}</p>
-                    <div class="status-meta">
-                        <span class="status-badge bg-secondary">{{ status.code }}</span>
-                        {% if status.is_system %}
-                            <span class="status-badge bg-info">sys</span>
-                        {% endif %}
-                        {% if status.is_positive_end %}
-                            <span class="status-badge bg-success">✓</span>
-                        {% elif status.is_negative_end %}
-                            <span class="status-badge bg-danger">✗</span>
-                        {% endif %}
-                        {% if status.orders_count > 0 %}
-                            <span class="status-badge bg-light text-dark">{{ status.orders_count }} заказ{{ status.orders_count|pluralize:",а,ов" }}</span>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-            <div class="status-actions">
-                <a href="{% url 'orders:status_edit' status.pk %}" class="btn btn-outline-primary" title="Редактировать">
-                    <i class="fas fa-edit"></i> Редактировать
-                </a>
-                {% if not status.is_system and status.orders_count == 0 %}
-                <a href="{% url 'orders:status_delete' status.pk %}" class="btn btn-outline-danger" title="Удалить">
-                    <i class="fas fa-trash"></i> Удалить
-                </a>
-                {% else %}
-                <button class="btn btn-outline-secondary" disabled title="{% if status.is_system %}Системный статус{% else %}В статусе есть заказы{% endif %}">
-                    <i class="fas fa-trash"></i> Удалить
-                </button>
-                {% endif %}
-            </div>
-        </div>
-        {% empty %}
-        <div style="text-align: center; padding: 40px 20px; color: #6c757d;">
-            <i class="fas fa-inbox" style="font-size: 32px; margin-bottom: 12px; opacity: 0.5;"></i>
-            <p style="font-size: 14px;">Статусы не найдены</p>
-        </div>
-        {% endfor %}
+    <div class="table-responsive">
+        <table class="table table-hover table-sm compact-table">
+            <thead class="table-light">
+                <tr>
+                    <th style="width: 50px;">№</th>
+                    <th style="width: 30px;"></th>
+                    <th>Название</th>
+                    <th class="d-none d-md-table-cell" style="width: 100px;">Код</th>
+                    <th class="d-none d-lg-table-cell" style="width: 100px;">Тип</th>
+                    <th class="d-none d-md-table-cell" style="width: 130px;">Итог</th>
+                    <th class="d-none d-xl-table-cell">Описание</th>
+                    <th style="width: 70px;">Заказы</th>
+                    <th style="width: 200px;">Действия</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for status in statuses %}
+                    <tr>
+                        <td class="text-muted">{{ status.order }}</td>
+                        <td>
+                            <span class="d-inline-block rounded-circle" style="width:14px;height:14px;background-color:{{ status.color }};border:1px solid rgba(0,0,0,.2);"></span>
+                        </td>
+                        <td>
+                            <span class="fw-semibold">{{ status.name }}</span>
+                            {% if status.label %}
+                                <span class="text-muted ms-1" style="font-size:0.75rem;">({{ status.label }})</span>
+                            {% endif %}
+                        </td>
+                        <td class="d-none d-md-table-cell"><code>{{ status.code }}</code></td>
+                        <td class="d-none d-lg-table-cell">
+                            {% if status.is_system %}
+                                <span class="badge bg-info">Системный</span>
+                            {% else %}
+                                <span class="badge bg-success">Пользовательский</span>
+                            {% endif %}
+                        </td>
+                        <td class="d-none d-md-table-cell">
+                            {% if status.is_positive_end %}
+                                <span class="badge bg-success">✓ Положительный</span>
+                            {% elif status.is_negative_end %}
+                                <span class="badge bg-danger">✗ Отрицательный</span>
+                            {% else %}
+                                <span class="badge bg-secondary">Промежуточный</span>
+                            {% endif %}
+                        </td>
+                        <td class="d-none d-xl-table-cell" style="font-size:0.75rem;">
+                            {% if status.description %}
+                                {{ status.description|truncatechars:60 }}
+                            {% else %}
+                                <span class="text-muted">—</span>
+                            {% endif %}
+                        </td>
+                        <td class="text-center">
+                            {% if status.orders_count > 0 %}
+                                <span class="badge bg-light text-dark">{{ status.orders_count }}</span>
+                            {% else %}
+                                <span class="text-muted">0</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <div class="d-flex gap-1">
+                                <a href="{% url 'orders:status_edit' status.pk %}" class="btn btn-outline-primary btn-sm" title="Редактировать">
+                                    <i class="bi bi-pencil"></i>
+                                </a>
+                                {% if not status.is_system and status.orders_count == 0 %}
+                                    <a href="{% url 'orders:status_delete' status.pk %}" class="btn btn-outline-danger btn-sm" title="Удалить">
+                                        <i class="bi bi-trash"></i>
+                                    </a>
+                                {% else %}
+                                    <button class="btn btn-outline-secondary btn-sm" disabled title="{% if status.is_system %}Системный статус{% else %}В статусе есть заказы{% endif %}">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                {% endif %}
+                            </div>
+                        </td>
+                    </tr>
+                {% empty %}
+                    <tr>
+                        <td colspan="9" class="text-center text-muted py-3">
+                            <i class="bi bi-inbox me-2"></i> Статусы не найдены
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
     </div>
 </div>
 {% endblock %}