From 4ad752ef024a95d1a65bdd347e6651125aa68787 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?= <igor_26reg@mail.ru>
Date: Tue, 28 Oct 2025 09:46:15 +0300
Subject: [PATCH] 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)
---
 .../static/css/components/employee-list.css   | 127 ++++++++++++++++++
 .../templates/employees/employees_list.html   |  73 +---------
 2 files changed, 128 insertions(+), 72 deletions(-)
 create mode 100644 backend/static/css/components/employee-list.css

diff --git a/backend/static/css/components/employee-list.css b/backend/static/css/components/employee-list.css
new file mode 100644
index 00000000..e67a9211
--- /dev/null
+++ b/backend/static/css/components/employee-list.css
@@ -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; 
+}
diff --git a/backend/templates/employees/employees_list.html b/backend/templates/employees/employees_list.html
index fd260ebe..a4ec6ba7 100644
--- a/backend/templates/employees/employees_list.html
+++ b/backend/templates/employees/employees_list.html
@@ -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 %}