feat: add avatar zoom modal on click

- Added Bootstrap modal for enlarged avatar view
- Made avatar image clickable with cursor pointer
- Added modal trigger to both static and dynamically loaded avatars
- Modal displays full-size avatar centered with dark backdrop
- Close button positioned in top-right corner

backend/static/js/components/employeeProfile.js

@@ -64,7 +64,11 @@ export class EmployeeProfile {
       return `
         <img src="${employee.avatar}"
              alt="Аватар ${employee.last_name} ${employee.first_name}"
-             class="ios-ava" style="object-fit:cover;">
+             class="ios-ava" 
+             style="object-fit:cover; cursor: pointer;"
+             data-bs-toggle="modal"
+             data-bs-target="#avatarModal"
+             data-avatar-url="${employee.avatar}">
       `;
     } else {
       const initial = (employee.first_name || employee.last_name || '?').charAt(0).toUpperCase();

backend/templates/employees/components/employee_detail_scripts.html

@@ -64,5 +64,20 @@
     if (employeeForm) window.employeeForm = employeeForm;
     if (skillsManager) window.skillsManager = skillsManager;
     if (deptRoleEditor) window.deptRoleEditor = deptRoleEditor;
+
+    // 4. Обработчик клика на аватар для просмотра увеличенной версии
+    const avatarModal = document.getElementById('avatarModal');
+    if (avatarModal) {
+      avatarModal.addEventListener('show.bs.modal', (event) => {
+        // Получаем элемент, который вызвал модалку
+        const button = event.relatedTarget;
+        if (button && button.dataset.avatarUrl) {
+          const modalImage = avatarModal.querySelector('#avatarModalImage');
+          if (modalImage) {
+            modalImage.src = button.dataset.avatarUrl;
+          }
+        }
+      });
+    }
   });
 </script>

backend/templates/employees/employee_detail.html

@@ -32,7 +32,11 @@
               {% if emp.avatar %}
                 <img src="{{ emp.avatar }}"
                      alt="Аватар {{ emp.last_name }} {{ emp.first_name }}"
-                     class="ios-ava" style="object-fit:cover;">
+                     class="ios-ava" 
+                     style="object-fit:cover; cursor: pointer;"
+                     data-bs-toggle="modal"
+                     data-bs-target="#avatarModal"
+                     data-avatar-url="{{ emp.avatar }}">
               {% else %}
                 <div class="ios-ava--ph">
                   {% firstof emp.first_name emp.last_name "?" as initial %}
@@ -428,6 +432,20 @@
 
 <!-- Модальное окно для просмотра публикации -->
 {% include "feed/components/modal_post_detail.html" %}
+
+<!-- Модальное окно для увеличенного просмотра аватара -->
+<div class="modal fade" id="avatarModal" tabindex="-1" aria-labelledby="avatarModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content bg-transparent border-0">
+      <div class="modal-header border-0 pb-0">
+        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+      </div>
+      <div class="modal-body text-center p-0">
+        <img id="avatarModalImage" src="" alt="Аватар" class="img-fluid rounded" style="max-height: 80vh; object-fit: contain;">
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
 
 {% block extra_js %}