From fd4bde67e03d10bfde7209065bfb6455a1f2a23b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?= =?UTF-8?q?=D0=B8=D0=BD?= Date: Wed, 3 Dec 2025 07:33:29 +0300 Subject: [PATCH] =?UTF-8?q?style(requests):=20=D1=82=D0=B0=D0=B1=D0=BB?= =?UTF-8?q?=D0=B8=D1=87=D0=BD=D1=8B=D0=B9=20=D0=B2=D0=B8=D0=B4=20=D1=81?= =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=BA=D0=B0=20=D0=B7=D0=B0=D1=8F=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=B1=D0=B5=D0=B7=20=D1=80=D0=B0?= =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D0=BB=D0=B8=D1=82=D0=B5=D0=BB=D1=8C=D0=BD?= =?UTF-8?q?=D1=8B=D1=85=20=D0=BB=D0=B8=D0=BD=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Сеточный layout с выравниванием колонок (иконка, метаданные, действия) - Убраны разделительные линии между блоками внутри заявления - Тонкая линия между заявлениями для визуального разделения - Убрана граница над блоком комментариев (card-actions border-top: none) - Выравнивание комментариев по левому краю текста заявления - Адаптивный дизайн для мобильных устройств - Мягкий hover-эффект для строк --- .../static/css/components/request-list.css | 141 +++++++++++++++++- .../requests_app/request_list_full.html | 1 + 2 files changed, 138 insertions(+), 4 deletions(-) diff --git a/backend/static/css/components/request-list.css b/backend/static/css/components/request-list.css index 19235c5a..f45a81d6 100644 --- a/backend/static/css/components/request-list.css +++ b/backend/static/css/components/request-list.css @@ -1,10 +1,143 @@ /** * request-list.css * - * Все стили заявлений теперь используют общие компоненты: - * - card-list.css для структуры карточек + * Табличный вид списка заявлений без разделяющих линий + * между элементами, но с чистой сеткой как в таблице. + * + * Используется: + * - card-list.css для базовой структуры карточек * - message-inputs.scss для форм комментариев * - common.css для утилит и бейджей - * - * Этот файл оставлен для возможных специфичных доработок в будущем. */ + +/* Контейнер списка заявлений */ +#reqList.card { + display: block; + gap: 0; + padding: 0; +} + +/* Строка заявления - табличный вид */ +#reqList .req-row { + padding: 0; + margin: 0; + border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 50%); + transition: background-color 0.15s ease; +} + +#reqList .req-row:hover { + background-color: color-mix(in srgb, var(--bs-primary) 3%, transparent); +} + +#reqList .req-row:last-child { + border-bottom: 0; +} + +/* Заголовок заявления - сетка с выравниванием колонок */ +#reqList .req-row > .card-header { + display: grid; + grid-template-columns: 42px 1fr auto; + align-items: center; + gap: 1rem; + padding: 0.875rem 1rem; + border-bottom: none; + background: transparent; +} + +/* Иконка типа заявления */ +#reqList .card-icon { + width: 42px; + height: 42px; + flex: 0 0 auto; +} + +/* Метаданные заявления */ +#reqList .card-meta { + min-width: 0; /* Для корректного truncate */ +} + +/* Тело карточки (комментарий) */ +#reqList .req-row > .card-body { + padding: 0 1rem 0.875rem 1rem; + margin-left: calc(42px + 1rem); /* Выравнивание с текстом */ + border-bottom: none; +} + +/* Футер с кнопками действий (комментарии, вложения) */ +#reqList .req-row > .card-actions { + padding: 0.5rem 1rem; + margin-left: calc(42px + 1rem); /* Выравнивание с текстом */ + border-top: none; /* Убираем разделяющую линию */ + background: transparent; +} + +/* Блок комментариев */ +#reqList .comments-block { + border-top: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 70%); + background: color-mix(in srgb, var(--bs-tertiary-bg), transparent 50%); + margin: 0; + padding: 1rem; +} + +/* Отступ для списка комментариев */ +#reqList .comments-list { + margin-left: calc(42px + 1rem); /* Выравнивание с текстом заявления */ +} + +/* Форма нового комментария */ +#reqList .comment-new { + margin-left: calc(42px + 1rem); /* Выравнивание с текстом заявления */ +} + +/* Адаптивность для мобильных устройств */ +@media (max-width: 768px) { + #reqList .req-row > .card-header { + grid-template-columns: 36px 1fr; + gap: 0.75rem; + padding: 0.75rem; + } + + #reqList .card-icon { + width: 36px; + height: 36px; + } + + #reqList .req-row > .card-body { + padding: 0 0.75rem 0.75rem 0.75rem; + margin-left: calc(36px + 0.75rem); + } + + #reqList .req-row > .card-actions { + padding: 0.5rem 0.75rem; + margin-left: calc(36px + 0.75rem); + } + + #reqList .comments-list, + #reqList .comment-new { + margin-left: 0; /* На мобильных убираем отступ */ + } + + /* Кнопки действий переносятся в следующую строку */ + #reqList .req-row > .card-header { + grid-template-columns: 36px 1fr; + } + + #reqList .req-row > .card-header > .ms-auto { + grid-column: 2; + margin-top: 0.5rem; + margin-left: 0 !important; + justify-self: start; + } +} + +/* Дополнительные утилиты */ +#reqList .card-title { + font-size: 0.95rem; + line-height: 1.4; +} + +#reqList .card-subtitle { + font-size: 0.85rem; + color: var(--bs-secondary-color); +} + diff --git a/backend/templates/requests_app/request_list_full.html b/backend/templates/requests_app/request_list_full.html index a489e614..cab0edbe 100644 --- a/backend/templates/requests_app/request_list_full.html +++ b/backend/templates/requests_app/request_list_full.html @@ -5,6 +5,7 @@ {% block extra_css %} + {% endblock %}