refactor: Improve job detail page by updating job card and applicatio…

…n form
pingojo · Sep 8, 2024 · 4dfe068 · 4dfe068
1 parent 4cd834f
commit 4dfe068
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/website/templates/company_detail.html b/website/templates/company_detail.html
@@ -228,19 +228,19 @@
                         </br>
                         <a href="https://mail.google.com/mail/?view=cm&fs=1&to={{ company.email|urlencode }}"
                            title="Open Gmail"
-                           style="text-decoration: none">📧</a>
+                           style="text-decoration: none">Gmail: 📧</a>
                         <a href="#"
                            onclick="copyToClipboard('{{ company.email }}'); return false;"
                            title="Copy to clipboard"
-                           style="text-decoration: none">📋</a>
+                           style="text-decoration: none">Copy: 📋</a>
                         <a href="#"
                            style="text-decoration: none"
                            hx-post="/api/bounced_email/"
                            hx-trigger="click"
                            hx-target="this"
                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                            onclick="handleBounceReport(this, event, '{{ company.email }}')"
-                           title="Report Email Bounce">🚫</a>
+                           title="Report Email Bounce">Bounce: 🚫</a>
                     </span>
                 {% else %}
                     <form hx-post="{% url 'update_company' company.id %}"

diff --git a/website/templates/partials/job_detail_include.html b/website/templates/partials/job_detail_include.html
@@ -1,8 +1,6 @@
 {% load humanize %}
 {% load static %}
 <style>
-
-
     .skill-icon {
         width: 20px;
         /* Adjust size as needed */
@@ -15,7 +13,6 @@
             justify-content: space-between;
             align-items: flex-start"
      id="job-posting">
-    <!-- Main Job Description -->
     <div style="width: 700px;" id="job-description">
         <h3>Job Description</h3>
         <p>{{ job.description_markdown|linebreaks }}</p>
@@ -33,17 +30,19 @@ <h4 style="margin-top: 0;">Skills:</h4>
                         gap: 10px"
                  id="skills-list">
                 {% for skill in job.skills.all %}
-                    <div style="display: flex; align-items: center;">
-                        <a href="/?search={{ skill.name }}&search_type=skill"
-                           style="text-decoration: none;
-                                  color: #007bff">
-                            <img src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/{{ skill.slug }}.png"
-                                 alt="{{ skill.name }} Icon"
-                                 class="skill-icon"
-                                 onerror="this.onerror=null; this.src='/static/img/logo.png'">
-                            <span>{{ skill.name }}</span>
-                        </a>
-                    </div>
+                    {% if skill.name %}
+                        <div style="display: flex; align-items: center;">
+                            <a href="/?search={{ skill.name }}&search_type=skill"
+                               style="text-decoration: none;
+                                      color: #007bff">
+                                <img src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/{{ skill.slug }}.png"
+                                     alt="{{ skill.name }} Icon"
+                                     class="skill-icon"
+                                     onerror="this.onerror=null; this.src='/static/img/logo.png'">
+                                <span>{{ skill.name }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
                 {% endfor %}
             </div>
         </div>
@@ -84,11 +83,30 @@ <h4 style="margin-top: 0;">Skills:</h4>
         const selectedTextSpan = document.getElementById('selected-text');
         selectedTextSpan.textContent = `Add Skill "${selectedText}"`;
 
-        // Position the div above the skills section
-        const skillsSection = document.getElementById('skills-section');
-        const rect = skillsSection.getBoundingClientRect();
-        addSkillDiv.style.top = `${rect.top - addSkillDiv.offsetHeight - 10}px`;
-        addSkillDiv.style.left = `${rect.left}px`;
+        // Get the mouse position to position the add-skill-div
+        const mouseX = event.clientX;
+        const mouseY = event.clientY;
+
+        // Ensure the div doesn't go off the viewport
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const divWidth = addSkillDiv.offsetWidth;
+        const divHeight = addSkillDiv.offsetHeight;
+
+        // Adjust left and top positions to fit within the viewport
+        let leftPosition = mouseX;
+        let topPosition = mouseY + 10; // Small offset to avoid overlap with text selection
+
+        if (mouseX + divWidth > viewportWidth) {
+            leftPosition = viewportWidth - divWidth - 10; // Adjust to fit on the screen
+        }
+        if (mouseY + divHeight > viewportHeight) {
+            topPosition = mouseY - divHeight - 10; // Adjust upward if too close to the bottom
+        }
+
+        // Set position of the div
+        addSkillDiv.style.left = `${leftPosition}px`;
+        addSkillDiv.style.top = `${topPosition}px`;
 
         addSkillDiv.style.display = 'block';
 
@@ -112,6 +130,7 @@ <h4 style="margin-top: 0;">Skills:</h4>
     }
 });
 
+
 document.addEventListener('DOMContentLoaded', function() {
     // Scroll to top when the page loads
     window.scrollTo(0, 0);