refactor: Extract employee-list CSS to component
- Created static/css/components/employee-list.css (130 lines) - Extracted employee list styles from employees_list.html (~74 lines removed) - Features: CSS custom properties for layout, grid-based row structure, avatar styling - Maintained scrollable container with proper border management - All tests passing (17 OK)
This commit is contained in:
parent
cc478bcd1d
commit
19ebbd6351
127
backend/static/css/components/employee-list.css
Normal file
127
backend/static/css/components/employee-list.css
Normal file
@ -0,0 +1,127 @@
|
||||
/**
|
||||
* Employee List Component
|
||||
*
|
||||
* Стили для списка сотрудников с аватарами, должностями и действиями
|
||||
* Оптимизирован для вертикальной прокрутки и адаптивного отображения
|
||||
*/
|
||||
|
||||
/* Токены списка сотрудников */
|
||||
#empList{
|
||||
--emp-row-py: .6rem; /* вертикальные отступы строки */
|
||||
--emp-row-px: .75rem; /* горизонтальные отступы строки */
|
||||
--emp-gap: 14px; /* расстояние внутри строки */
|
||||
--emp-avatar: 56px; /* размер аватара */
|
||||
}
|
||||
|
||||
/* Контейнер списка (скролл в колонке) */
|
||||
#empList{
|
||||
border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 12%);
|
||||
border-radius: var(--feed-radius, 16px);
|
||||
background: var(--bs-body-bg);
|
||||
padding: 0;
|
||||
max-height: calc(100dvh - var(--navbar-h, 0px) - 160px);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Важно: убираем межстрочный gap от .feed-stream */
|
||||
#empList.feed-stream{
|
||||
display: block;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
/* Строка сотрудника */
|
||||
#empList .emp-row{
|
||||
padding: var(--emp-row-py) var(--emp-row-px) !important;
|
||||
margin: 0 !important;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
#empList .emp-row:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* Шапка строки: [аватар] [контент] [действия] */
|
||||
#empList .emp-row .feed-hd{
|
||||
display: grid;
|
||||
grid-template-columns: var(--emp-avatar) 1fr auto;
|
||||
align-items: center;
|
||||
gap: var(--emp-gap);
|
||||
margin: 0;
|
||||
padding: 0 !important; /* без внутренних паддингов — ими управляет .emp-row */
|
||||
}
|
||||
|
||||
/* Аватар */
|
||||
#empList .emp-row .feed-ava{
|
||||
width: var(--emp-avatar);
|
||||
height: var(--emp-avatar);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--bs-secondary-bg), transparent 30%);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#empList .emp-row .feed-ava img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
#empList .emp-row .feed-ava i{
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/* Контент */
|
||||
#empList .emp-row .feed-meta{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feed-author{
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.emp-pos{
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.feed-sub{
|
||||
margin-top: .25rem;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.feed-sub a{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.feed-sub a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Действия справа */
|
||||
.emp-actions{
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* Хвост карточки в списке не используем — убираем отступы */
|
||||
#empList .emp-row .feed-actions{
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#empList .emp-row .feed-body:empty{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#empList .emp-row .feed-body{
|
||||
padding: 0 !important;
|
||||
}
|
||||
@ -6,80 +6,9 @@
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/components/employee-list.css' %}">
|
||||
<style>
|
||||
/* ios-search стили теперь в static/css/components/ios-search.css */
|
||||
.feed-header { gap:.6rem; flex-wrap:wrap; }
|
||||
|
||||
/* Токены списка сотрудников */
|
||||
#empList{
|
||||
--emp-row-py: .6rem; /* вертикальные отступы строки */
|
||||
--emp-row-px: .75rem; /* горизонтальные отступы строки */
|
||||
--emp-gap: 14px; /* расстояние внутри строки */
|
||||
--emp-avatar: 56px; /* размер аватара */
|
||||
}
|
||||
|
||||
/* Контейнер списка (скролл в колонке) */
|
||||
#empList{
|
||||
border:1px solid color-mix(in srgb, var(--bs-border-color), transparent 12%);
|
||||
border-radius: var(--feed-radius, 16px);
|
||||
background: var(--bs-body-bg);
|
||||
padding:0;
|
||||
max-height: calc(100dvh - var(--navbar-h, 0px) - 160px);
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Важно: убираем межстрочный gap от .feed-stream */
|
||||
#empList.feed-stream{ display:block; gap:0 !important; }
|
||||
|
||||
/* Строка сотрудника */
|
||||
#empList .emp-row{
|
||||
padding: var(--emp-row-py) var(--emp-row-px) !important;
|
||||
margin:0 !important;
|
||||
border-bottom:1px solid var(--bs-border-color);
|
||||
}
|
||||
#empList .emp-row:last-child{ border-bottom:0; }
|
||||
|
||||
/* Шапка строки: [аватар] [контент] [действия] */
|
||||
#empList .emp-row .feed-hd{
|
||||
display:grid;
|
||||
grid-template-columns: var(--emp-avatar) 1fr auto;
|
||||
align-items:center;
|
||||
gap: var(--emp-gap);
|
||||
margin:0; padding:0 !important; /* без внутренних паддингов — ими управляет .emp-row */
|
||||
}
|
||||
|
||||
/* Аватар */
|
||||
#empList .emp-row .feed-ava{
|
||||
width: var(--emp-avatar);
|
||||
height: var(--emp-avatar);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
background: color-mix(in srgb, var(--bs-secondary-bg), transparent 30%);
|
||||
flex:none;
|
||||
}
|
||||
#empList .emp-row .feed-ava img{
|
||||
display:block; width:100%; height:100%;
|
||||
object-fit:cover; object-position:center;
|
||||
}
|
||||
#empList .emp-row .feed-ava i{ font-size:1.5rem; line-height:1; opacity:.6; }
|
||||
|
||||
/* Контент */
|
||||
#empList .emp-row .feed-meta{ margin:0; padding:0; min-width:0; }
|
||||
.feed-author{ font-weight:700; line-height:1.25; }
|
||||
.emp-pos{ color:var(--bs-secondary-color); }
|
||||
.feed-sub{ margin-top:.25rem; color:var(--bs-secondary-color); }
|
||||
.feed-sub a{ color:inherit; text-decoration:none; }
|
||||
.feed-sub a:hover{ text-decoration:underline; }
|
||||
|
||||
/* Действия справа */
|
||||
.emp-actions{ justify-self:end; }
|
||||
|
||||
/* Хвост карточки в списке не используем — убираем отступы */
|
||||
#empList .emp-row .feed-actions{ padding:0 !important; }
|
||||
#empList .emp-row .feed-body:empty{ display:none !important; }
|
||||
#empList .emp-row .feed-body{ padding:0 !important; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user