refactor: Extract request-list CSS and deduplicate styles
- Created static/css/components/request-list.css (170 lines) - Removed duplicate styles from request_list_full.html (~120 lines) - Removed duplicate ios-search styles from chat_list.html (~29 lines) - Reused document-list.css in request_list_full.html - All tests passing (17 OK)
This commit is contained in:
parent
ef2d0490e6
commit
f1b72ffb91
159
backend/static/css/components/request-list.css
Normal file
159
backend/static/css/components/request-list.css
Normal file
@ -0,0 +1,159 @@
|
||||
/**
|
||||
* request-list.css
|
||||
* Стили списка заявлений и панели действий
|
||||
*/
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
REQUEST LIST
|
||||
────────────────────────────────────────────────────────────── */
|
||||
/* Список заявлений в стиле общего feed-списка */
|
||||
#reqList.feed-stream {
|
||||
display: block;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
#reqList .req-row {
|
||||
padding: .9rem 1rem !important;
|
||||
margin: 0 !important;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
#reqList .req-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
#reqList .feed-hd {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr auto;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#reqList .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);
|
||||
}
|
||||
|
||||
.req-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge-status {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
REQUEST DRAWER (выезжающая панель действий)
|
||||
────────────────────────────────────────────────────────────── */
|
||||
.req-drawer {
|
||||
margin-top: .6rem;
|
||||
padding: .75rem;
|
||||
background: var(--bs-tertiary-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.req-drawer__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: .75rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.req-drawer__title {
|
||||
font-size: .85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .02em;
|
||||
color: var(--bs-secondary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.req-actions-grid {
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.req-actions-grid .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Кнопка «Рассмотреть» — стрелка вращается */
|
||||
.action-toggle .chev {
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
.action-toggle[aria-expanded="true"] .chev {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Плавное появление контента внутри collapse */
|
||||
.collapse .req-drawer__inner {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.collapse.show .req-drawer__inner {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: opacity .16s ease .04s, transform .16s ease .04s;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
SOFT BUTTONS (акценты для destructive/approve)
|
||||
────────────────────────────────────────────────────────────── */
|
||||
.btn-soft-danger {
|
||||
background: color-mix(in srgb, var(--bs-danger) 10%, transparent);
|
||||
border-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-soft-danger {
|
||||
background: color-mix(in srgb, var(--bs-danger) 16%, transparent);
|
||||
}
|
||||
|
||||
.btn-soft-success {
|
||||
background: color-mix(in srgb, var(--bs-success) 12%, transparent);
|
||||
border-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-soft-success {
|
||||
background: color-mix(in srgb, var(--bs-success) 18%, transparent);
|
||||
}
|
||||
|
||||
/* Кнопка-тогглер — компактнее и нейтральнее */
|
||||
.btn-review {
|
||||
--bs-btn-padding-y: .25rem;
|
||||
--bs-btn-padding-x: .6rem;
|
||||
--bs-btn-font-size: .875rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
COMMENT TEXTAREA
|
||||
────────────────────────────────────────────────────────────── */
|
||||
.comment-new textarea {
|
||||
resize: vertical;
|
||||
max-height: 300px;
|
||||
min-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -5,34 +5,8 @@
|
||||
{% block title %}Мои чаты{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
|
||||
<link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
|
||||
<style>
|
||||
.ios-search{ position:relative; width:100%; max-width:420px; }
|
||||
.ios-search-input{
|
||||
width:100%; height:40px; padding:8px 38px;
|
||||
border-radius:14px; border:1px solid var(--bs-border-color);
|
||||
background: color-mix(in srgb, var(--bs-body-bg), #000 4%);
|
||||
font-size:15px; outline:none;
|
||||
transition: box-shadow .2s, border-color .2s, background .2s;
|
||||
}
|
||||
[data-bs-theme="dark"] .ios-search-input{
|
||||
background: color-mix(in srgb, var(--bs-body-bg), #fff 6%);
|
||||
}
|
||||
.ios-search-input:focus{
|
||||
border-color: var(--bs-primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15);
|
||||
}
|
||||
.ios-search > .bi-search{
|
||||
position:absolute; left:10px; top:50%; transform:translateY(-50%);
|
||||
opacity:.55; pointer-events:none; font-size:.95rem;
|
||||
}
|
||||
.ios-search-clear{
|
||||
position:absolute; right:4px; top:50%; transform:translateY(-50%);
|
||||
border:0; background:transparent; padding:6px; display:none;
|
||||
}
|
||||
.ios-search-clear .bi-x-lg{ opacity:.6; font-size:.9rem; }
|
||||
.ios-search-input:not(:placeholder-shown) ~ .ios-search-clear{ display:block; }
|
||||
|
||||
/* чуть плотнее заголовок-строку */
|
||||
.feed-header { gap:.6rem; flex-wrap:wrap; }
|
||||
</style>
|
||||
|
||||
@ -4,123 +4,8 @@
|
||||
{% block title %}Заявления{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Список заявлений в стиле общего feed-списка */
|
||||
#reqList.feed-stream{ display:block; gap:0 !important; }
|
||||
#reqList .req-row{ padding:.9rem 1rem !important; margin:0 !important; border-bottom:1px solid var(--bs-border-color); }
|
||||
#reqList .req-row:last-child{ border-bottom:0; }
|
||||
#reqList .feed-hd{ display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:.75rem; margin:0; padding:0 !important; }
|
||||
#reqList .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); }
|
||||
.req-actions{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
|
||||
.badge-status{ font-weight:600; }
|
||||
.text-mono{ font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
</style>
|
||||
|
||||
<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>
|
||||
<style>
|
||||
/* ... ваши стили выше ... */
|
||||
|
||||
/* Выезжающая панель действий */
|
||||
.req-drawer {
|
||||
margin-top:.6rem;
|
||||
padding:.75rem;
|
||||
background: var(--bs-tertiary-bg); /* адаптивно для light/dark */
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,.04);
|
||||
}
|
||||
.req-drawer__head{
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
gap:.75rem; margin-bottom:.5rem;
|
||||
}
|
||||
.req-drawer__title{
|
||||
font-size:.85rem; text-transform:uppercase; letter-spacing:.02em;
|
||||
color: var(--bs-secondary-color); font-weight:600;
|
||||
}
|
||||
|
||||
.req-actions-grid{
|
||||
display:grid; gap:.5rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
align-items:stretch;
|
||||
}
|
||||
.req-actions-grid .btn{ width:100%; justify-content:center; }
|
||||
|
||||
/* Кнопка «Рассмотреть» — стрелка вращается */
|
||||
.action-toggle .chev{ transition:transform .2s ease; }
|
||||
.action-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
|
||||
|
||||
/* Плавное появление контента внутри collapse */
|
||||
.collapse .req-drawer__inner{ opacity:0; transform: translateY(-4px); }
|
||||
.collapse.show .req-drawer__inner{
|
||||
opacity:1; transform:none; transition:opacity .16s ease .04s, transform .16s ease .04s;
|
||||
}
|
||||
|
||||
/* Небольшие акценты для destructive/approve */
|
||||
.btn-soft-danger{ background: color-mix(in srgb, var(--bs-danger) 10%, transparent); border-color: var(--bs-border-color); }
|
||||
[data-bs-theme="dark"] .btn-soft-danger{ background: color-mix(in srgb, var(--bs-danger) 16%, transparent); }
|
||||
.btn-soft-success{ background: color-mix(in srgb, var(--bs-success) 12%, transparent); border-color: var(--bs-border-color); }
|
||||
[data-bs-theme="dark"] .btn-soft-success{ background: color-mix(in srgb, var(--bs-success) 18%, transparent); }
|
||||
|
||||
/* Кнопка-тогглер — компактнее и нейтральнее */
|
||||
.btn-review{
|
||||
--bs-btn-padding-y: .25rem; --bs-btn-padding-x:.6rem; --bs-btn-font-size:.875rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.comment-new textarea {
|
||||
resize: vertical;
|
||||
max-height: 300px;
|
||||
min-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="{% static 'css/components/request-list.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/components/document-list.css' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user