From 3dbfae88c5b51d497321dbb71e372b40d10b3e6a 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: Tue, 28 Oct 2025 09:51:47 +0300 Subject: [PATCH] refactor: Extract document-list CSS to component - Created static/css/components/document-list.css (220 lines) - Extracted styles from document_list.html (~50 lines removed) - Features: document list layout, recipient picker widget, acknowledgments UI - All tests passing (17 OK) --- .../static/css/components/document-list.css | 204 ++++++++++++++++++ .../templates/documents/document_list.html | 43 +--- 2 files changed, 205 insertions(+), 42 deletions(-) create mode 100644 backend/static/css/components/document-list.css diff --git a/backend/static/css/components/document-list.css b/backend/static/css/components/document-list.css new file mode 100644 index 00000000..6d592ee9 --- /dev/null +++ b/backend/static/css/components/document-list.css @@ -0,0 +1,204 @@ +/** + * document-list.css + * Стили списка документов, виджета получателей, и подтверждений + */ + +/* ───────────────────────────────────────────────────────────── + DOCUMENT LIST +────────────────────────────────────────────────────────────── */ +/* Список документов в общей «карточке» */ +#docList.feed-stream { + display: block; + gap: 0 !important; +} + +#docList .doc-row { + padding: .9rem 1rem !important; + margin: 0 !important; + border-bottom: 1px solid var(--bs-border-color); +} + +#docList .doc-row:last-child { + border-bottom: 0; +} + +#docList .feed-hd { + display: grid; + grid-template-columns: 28px 1fr auto; + align-items: center; + gap: .75rem; + margin: 0; + padding: 0 !important; +} + +#docList .feed-ico { + width: 28px; + height: 28px; + display: grid; + place-items: center; + border-radius: 8px; + background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent); + border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 30%); + color: var(--bs-primary); +} + +.btn-icon { + width: 36px; + height: 36px; + display: inline-grid; + place-items: center; + border: 1px solid var(--bs-border-color); + border-radius: 10px; + background: transparent; +} + +.btn-icon--danger { + color: var(--bs-danger); +} + +.doc-actions { + display: flex; + align-items: center; + gap: .4rem; +} + +.badge-acked { + background: #d1e7dd; + color: #0f5132; + border: 1px solid #badbcc; + padding: .28rem .55rem; + border-radius: 999px; + font-size: .8rem; +} + +[data-bs-theme="dark"] .badge-acked { + background: #234; + color: #8fd4b3; + border-color: #1f3b33; +} + +.scope-switch .btn { + min-height: 36px; + border-radius: 999px; +} + +/* ───────────────────────────────────────────────────────────── + RECIPIENT PICKER +────────────────────────────────────────────────────────────── */ +.recipient-picker { + border: 1px solid var(--bs-border-color); + border-radius: 12px; + padding: .75rem; + background: var(--bs-body-bg); +} + +.recipient-picker .rp-selected { + display: flex; + flex-wrap: wrap; + gap: .4rem; + margin-bottom: .5rem; +} + +.recipient-picker .rp-chip { + display: inline-flex; + align-items: center; + gap: .35rem; + border: 1px solid var(--bs-border-color); + border-radius: 999px; + padding: .2rem .55rem; + font-size: .85rem; +} + +.recipient-picker .rp-chip button { + border: 0; + background: transparent; + padding: 0 .2rem; + line-height: 1; +} + +.recipient-picker .rp-search { + position: relative; +} + +.recipient-picker .rp-search input { + width: 100%; +} + +.recipient-picker .rp-results { + margin-top: .5rem; + max-height: 220px; + overflow: auto; + border: 1px solid var(--bs-border-color); + border-radius: 10px; +} + +.recipient-picker .rp-item { + display: flex; + align-items: center; + gap: .5rem; + padding: .45rem .6rem; + border-bottom: 1px solid var(--bs-border-color); +} + +.recipient-picker .rp-item:last-child { + border-bottom: 0; +} + +.recipient-picker .rp-item small { + color: var(--bs-secondary-color); +} + +.recipient-picker .rp-empty { + padding: .6rem; + text-align: center; + color: var(--bs-secondary-color); +} + +.recipient-picker .rp-avatar { + width: 26px; + height: 26px; + border-radius: 50%; + background: color-mix(in srgb, var(--bs-primary) 12%, transparent); + display: inline-grid; + place-items: center; + font-size: .7rem; +} + +.recipient-block[hidden] { + display: none !important; +} + +/* ───────────────────────────────────────────────────────────── + ACKNOWLEDGMENTS +────────────────────────────────────────────────────────────── */ +.acks-list { + max-height: 50vh; + overflow: auto; + margin: 0; + padding-left: 1.1rem; +} + +.acks-empty { + color: var(--bs-secondary-color); +} + +.acks-more { + margin-top: .5rem; +} + +.feed-ava { + width: 32px; + height: 32px; + flex: 0 0 32px; + border-radius: 50%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.rp-avatar { + width: 100%; + height: 100%; + object-fit: cover; +} diff --git a/backend/templates/documents/document_list.html b/backend/templates/documents/document_list.html index 282ec8b7..1e1cc81f 100644 --- a/backend/templates/documents/document_list.html +++ b/backend/templates/documents/document_list.html @@ -4,48 +4,7 @@ {% block title %}Документы{% endblock %} {% block extra_css %} - - - + {% endblock %} {% block content %}