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)
This commit is contained in:
parent
347740c4a4
commit
3dbfae88c5
204
backend/static/css/components/document-list.css
Normal file
204
backend/static/css/components/document-list.css
Normal file
@ -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;
|
||||
}
|
||||
@ -4,48 +4,7 @@
|
||||
{% block title %}Документы{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Список документов в общей «карточке» */
|
||||
#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{ 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; }
|
||||
</style>
|
||||
<style>
|
||||
.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; }
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="{% static 'css/components/document-list.css' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user