smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Улучшена таблица статусов заказов: заменены иконки Font Awesome на Bootstrap Icons, увеличены бейджи, полные названия типов и итогов, кнопки действий только с иконками

Browse Source
This commit is contained in:
Andrey Smakotin
2025-11-19 00:53:16 +03:00
parent a1888b7745
commit fdd14804a7
1 changed files with 111 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
myproject/orders/templates/orders/status_list.html
View File

@@ -5,225 +5,133 @@
{% block content %} {% block content %}
<style> <style>
.status-card { .compact-table {
border: none; font-size: 0.85rem;
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 th,
.status-card:hover { .compact-table td {
background: white; padding: 0.4rem 0.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); vertical-align: middle;
transform: translateX(2px);
} }
.compact-table .btn-sm {
.status-card-left { padding: 0.2rem 0.5rem;
flex: 1; font-size: 0.75rem;
display: flex; min-width: 32px;
align-items: center;
gap: 12px;
min-width: 0;
} }
.compact-table .badge {
.status-color { font-size: 0.75rem;
width: 24px; padding: 0.35rem 0.6rem;
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;
white-space: nowrap; 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> </style>
<div class="container-fluid mt-3">
<div class="container mt-4" style="max-width: 900px;"> <div class="d-flex justify-content-between align-items-center mb-2">
<div class="header-section">
<div class="header-left">
<h1>Статусы</h1>
<p>{{ statuses|length }} статусов в системе</p>
</div>
<div> <div>
<a href="{% url 'orders:status_create' %}" class="btn btn-primary" style="font-weight: 600;"> <h1 class="h5 mb-0">Статусы</h1>
<i class="fas fa-plus"></i> Создать <div class="text-muted" style="font-size: 0.75rem;">{{ statuses|length }} статусов</div>
</a>
</div> </div>
<a href="{% url 'orders:status_create' %}" class="btn btn-primary btn-sm">
<i class="bi bi-plus-lg"></i> Создать
</a>
</div> </div>
{% if messages %} {% if messages %}
{% for message in messages %} {% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert" style="margin-bottom: 16px;"> <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }} {{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<div> <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 %} {% for status in statuses %}
<div class="status-card" style="border-left-color: {{ status.color }};"> <tr>
<div class="status-card-left"> <td class="text-muted">{{ status.order }}</td>
<div class="status-color" style="background-color: {{ status.color }};"></div> <td>
<div class="status-info"> <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>
<p class="status-name" title="{{ status.name }}">{{ status.name }}</p> </td>
<div class="status-meta"> <td>
<span class="status-badge bg-secondary">{{ status.code }}</span> <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 %} {% if status.is_system %}
<span class="status-badge bg-info">sys</span> <span class="badge bg-info">Системный</span>
{% else %}
<span class="badge bg-success">Пользовательский</span>
{% endif %} {% endif %}
</td>
<td class="d-none d-md-table-cell">
{% if status.is_positive_end %} {% if status.is_positive_end %}
<span class="status-badge bg-success">✓</span> <span class="badge bg-success">✓ Положительный</span>
{% elif status.is_negative_end %} {% elif status.is_negative_end %}
<span class="status-badge bg-danger">✗</span> <span class="badge bg-danger">✗ Отрицательный</span>
{% else %}
<span class="badge bg-secondary">Промежуточный</span>
{% endif %} {% 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 %} {% if status.orders_count > 0 %}
<span class="status-badge bg-light text-dark">{{ status.orders_count }} заказ{{ status.orders_count|pluralize:",а,ов" }}</span> <span class="badge bg-light text-dark">{{ status.orders_count }}</span>
{% else %}
<span class="text-muted">0</span>
{% endif %} {% endif %}
</div> </td>
</div> <td>
</div> <div class="d-flex gap-1">
<div class="status-actions"> <a href="{% url 'orders:status_edit' status.pk %}" class="btn btn-outline-primary btn-sm" title="Редактировать">
<a href="{% url 'orders:status_edit' status.pk %}" class="btn btn-outline-primary" title="Редактировать"> <i class="bi bi-pencil"></i>
<i class="fas fa-edit"></i> Редактировать
</a> </a>
{% if not status.is_system and status.orders_count == 0 %} {% if not status.is_system and status.orders_count == 0 %}
<a href="{% url 'orders:status_delete' status.pk %}" class="btn btn-outline-danger" title="Удалить"> <a href="{% url 'orders:status_delete' status.pk %}" class="btn btn-outline-danger btn-sm" title="Удалить">
<i class="fas fa-trash"></i> Удалить <i class="bi bi-trash"></i>
</a> </a>
{% else %} {% else %}
<button class="btn btn-outline-secondary" disabled title="{% if status.is_system %}Системный статус{% else %}В статусе есть заказы{% endif %}"> <button class="btn btn-outline-secondary btn-sm" disabled title="{% if status.is_system %}Системный статус{% else %}В статусе есть заказы{% endif %}">
<i class="fas fa-trash"></i> Удалить <i class="bi bi-trash"></i>
</button> </button>
{% endif %} {% endif %}
</div> </div>
</div> </td>
</tr>
{% empty %} {% empty %}
<div style="text-align: center; padding: 40px 20px; color: #6c757d;"> <tr>
<i class="fas fa-inbox" style="font-size: 32px; margin-bottom: 12px; opacity: 0.5;"></i> <td colspan="9" class="text-center text-muted py-3">
<p style="font-size: 14px;">Статусы не найдены</p> <i class="bi bi-inbox me-2"></i> Статусы не найдены
</div> </td>
</tr>
{% endfor %} {% endfor %}
</tbody>
</table>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}