[UPDT] EMPLOYEE, RECRUITMENT: Added image enlarging functionality while hover in both card and profile view of employee and candidate

employee/static/employee/search.js

@@ -56,4 +56,25 @@ function employeeFilter(element) {
   $('#card').attr('hx-vals', stringQueyObject);
 }
 
+// Profile picture enlarging
 
+function enlargeImage(image) {
+  console.log(image)
+  var enlargeImageContainer = document.getElementById('enlargeImageContainer');
+  enlargeImageContainer.innerHTML = ''; 
+
+  var enlargedImage = document.createElement('img');
+  enlargedImage.src = image.src;
+  enlargeImageContainer.appendChild(enlargedImage);
+
+  setTimeout(function() {
+    enlargeImageContainer.style.display = 'block';
+  }, 250);
+}
+
+function hideEnlargeImage() {
+  var enlargeImageContainer = document.getElementById('enlargeImageContainer');
+  enlargeImageContainer.innerHTML = '';
+  enlargeImageContainer.style.display = 'none';
+
+}

employee/templates/employee/profile/profile_view.html

@@ -1,4 +1,25 @@
 {% extends 'index.html' %} {% load i18n %} {% load static %} {% block content %}
+
+<style>
+  .enlarge-image-container {
+    display: none;
+    position: fixed;
+    top: 40%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30%;
+    height: 50%;
+    z-index: 9999;
+  }
+  .enlarge-image-container img{
+    max-width: 100%;
+    height: auto;
+    border-radius: 5%;
+  }
+</style>
+
+<div id="enlargeImageContainer" class="enlarge-image-container"></div>
+
 <div class="oh-wrapper">
   <div class="oh-card mt-4 mb-5">
     <div class="d-flex flex-row-reverse">
@@ -20,11 +41,15 @@
                 src="/media/{{employee.employee_profile}}"
                 class="oh-profile-section__avatar"
                 alt="Username"
+                style="border-radius:10%"
+                onmouseover="enlargeImage(this)"
+                onmouseout="hideEnlargeImage()"
               />
               {% else %}
               <img
                 src="https://ui-avatars.com/api/?name={{employee.employee_first_name}}+{{employee.employee_last_name}}&background=random"
                 class="oh-profile-section__avatar"
+                style="border-radius:10%"
                 alt="Username"
               />
               {% endif %}

employee/templates/employee/view/individual.html

@@ -2,6 +2,26 @@
 {% load static %} 
 {% comment %} {% include 'employee_nav.html' %} {% endcomment %}
 
+<style>
+  .enlarge-image-container {
+    display: none;
+    position: fixed;
+    top: 40%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30%;
+    height: 50%;
+    z-index: 9999;
+  }
+  .enlarge-image-container img{
+    max-width: 100%;
+    height: auto;
+    border-radius: 5%;
+  }
+</style>
+
+<div id="enlargeImageContainer" class="enlarge-image-container"></div>
+
 <div class="oh-wrapper" id="view-container">
   <div class="oh-card mt-4 mb-5">
     <div class="d-flex flex-row-reverse">
@@ -23,6 +43,8 @@
                 src="/media/{{employee.employee_profile}}"
                 class="oh-profile__image"
                 alt="Username"
+                onmouseover="enlargeImage(this)"
+                onmouseout="hideEnlargeImage()"
               />
               {% else %}
               <img

employee/templates/employee_personal_info/employee_card.html

@@ -4,6 +4,7 @@
 {% load basefilters %}
 
 
+
 {% if messages %}
     <div class="oh-alert-container">
         {% for message in messages %}
@@ -14,26 +15,43 @@
     </div>
     {% endif %}
 {% include 'filter_tags.html' %}
+
+<style>
+
+  .profile-picture {
+    transition: transform 0.3s;
+    z-index:9999
+    ;
+  }
+  
+  .profile-picture:hover {
+      transform: scale(2.4);
+  }
+  
+</style>
+
 <div class="oh-layout--grid-3">
   {% for emp in data %}
   <div  class="oh-kanban-card" style="color: inherit;text-decoration: none;">
     <a href="{% url 'employee-view-individual' emp.id %}" style="color: inherit;text-decoration: none; display: flex;">
     <div class="oh-kanban-card__avatar">
-      <div class="oh-kanban-card__profile-container">
-        {% if emp.employee_profile %}
-        <img
-        src="/media/{{emp.employee_profile}}"
-        class="oh-kanban-card__profile-image"
-        alt="Username"
-        />
+      {% if emp.employee_profile %}
+        <div class="oh-kanban-card__profile-container profile-picture">
+          <img
+          src="/media/{{emp.employee_profile}}"
+          class="oh-kanban-card__profile-image"
+          alt="Username"
+          />
+        </div>
         {% else %}
-        <img
-        src="https://ui-avatars.com/api/?name={{emp.employee_first_name}}+{{emp.employee_last_name}}&background=random"
-        class="oh-kanban-card__profile-image"
-        alt="Username"
-        />
+        <div class="oh-kanban-card__profile-container">
+          <img
+          src="https://ui-avatars.com/api/?name={{emp.employee_first_name}}+{{emp.employee_last_name}}&background=random"
+          class="oh-kanban-card__profile-image"
+          alt="Username"
+          />
+        </div>
         {% endif %}
-      </div>
     </div>
     
     <div class="oh-kanban-card__details">

recruitment/templates/candidate/candidate_card.html

@@ -1,6 +1,21 @@
 {% load i18n %}
 {% load basefilters %}
 {{candidates}}
+
+<style>
+
+  .profile-picture {
+    transition: transform 0.3s;
+    z-index:9999
+    ;
+  }
+  
+  .profile-picture:hover {
+      transform: scale(2.4);
+  }
+  
+</style>
+
 {% if messages %}
 <div class="oh-wrapper">
     {% for message in messages %}
@@ -20,21 +35,23 @@
   <div  class="oh-kanban-card candidate {% if cand.hired %}hired-cand{% endif %}" style="color: inherit;text-decoration: none;">
     <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none; display: flex;">
     <div class="oh-kanban-card__avatar">
-      <div class="oh-kanban-card__profile-container">
-        {% if cand.profile == None %}
-        <img
-        src="https://ui-avatars.com/api/?name={{cand}}&background=random"
-        class="oh-kanban-card__profile-image"
-        alt="Username"
-        />
-        {% else %}
-        <img
-        src="/media/{{cand.profile}}"
-        class="oh-kanban-card__profile-image"
-        alt="Username"
-        />
-        {% endif %}
-      </div>
+      {% if cand.profile == None %}
+        <div class="oh-kanban-card__profile-container">
+          <img
+            src="https://ui-avatars.com/api/?name={{cand}}&background=random"
+            class="oh-kanban-card__profile-image"
+            alt="Username"
+            />
+        </div>
+      {% else %}
+        <div class="oh-kanban-card__profile-container profile-picture">
+          <img
+          src="/media/{{cand.profile}}"
+          class="oh-kanban-card__profile-image"
+          alt="Username"
+          />
+        </div>
+      {% endif %}
     </div>
     
     <div class="oh-kanban-card__details">

recruitment/templates/candidate/individual.html

@@ -1,4 +1,25 @@
 {% extends 'index.html' %} {% load i18n %} {% load yes_no %} {% block content %}
+
+<style>
+  .enlarge-image-container {
+    display: none;
+    position: fixed;
+    top: 40%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30%;
+    height: 50%;
+    z-index: 9999;
+  }
+  .enlarge-image-container img{
+    max-width: 100%;
+    height: auto;
+    border-radius: 5%;
+  }
+</style>
+
+<div id="enlargeImageContainer" class="enlarge-image-container"></div>
+
 <div class="oh-wrapper" id="section">
   <div class="oh-card mt-4 mb-5">
     <div class="d-flex flex-row-reverse">
@@ -15,6 +36,9 @@
                 src="{{candidate.profile.url}}"
                 class="oh-profile-section__avatar preview"
                 alt="Username"
+                style="border-radius:10%"
+                onmouseover="enlargeImage(this)"
+                onmouseout="hideEnlargeImage()"
               />
               {% else %}
               <img
@@ -405,5 +429,28 @@
       localStorage.setItem("activeCandTab",targetId)
     });
   });
+
+// Profile picture enlarging
+
+  function enlargeImage(image) {
+    var enlargeImageContainer = document.getElementById('enlargeImageContainer');
+    enlargeImageContainer.innerHTML = ''; 
+  
+    var enlargedImage = document.createElement('img');
+    enlargedImage.src = image.src;
+    enlargeImageContainer.appendChild(enlargedImage);
+  
+    setTimeout(function() {
+      enlargeImageContainer.style.display = 'block';
+    }, 250);
+  }
+  
+  function hideEnlargeImage() {
+    var enlargeImageContainer = document.getElementById('enlargeImageContainer');
+    enlargeImageContainer.innerHTML = ''; // Clear the content
+    enlargeImageContainer.style.display = 'none';
+  
+  }
+
 </script>
 {% endblock content %}