Merge pull request #838 from GhostManager/hotfix/fixed-pfp-distortion

Improved display of profile pictures

Author: chrismaddalena

ghostwriter/home/forms.py

@@ -35,8 +35,9 @@ def __init__(self, *args, **kwargs):
                 """
                 <h4 class="icon avatar-upload-icon">Avatar Upload</h4>
                 <hr>
-                <p>Your new avatar should be a square (equal height and width) for the best looking results.</p>
-                Previews for images will appear below.</p>
+                <p>Your avatar will be displayed as a circle and automatically cropped to fit. For best results,
+                upload a square image (equal height and width) or ensure your face is centered in the image.</p>
+                <p>Previews for images will appear below.</p>
                 <div id="avatarPreview" class="pb-3"></div>
                 """
             ),

ghostwriter/reporting/forms.py

@@ -218,7 +218,7 @@ def __init__(self, *args, **kwargs):
         self.helper.layout = Layout(
             HTML(
                 """
-                <h4 class="icon signature-icon">Report Information</h4>
+                <h4 class="icon edit-icon">Evidence Information</h4>
                 <hr>
                 <p>The friendly name is used to reference this evidence in the report and the caption appears below
                 the figures in the generated reports.</p>

ghostwriter/reporting/templates/reporting/evidence_detail.html

@@ -106,18 +106,18 @@ <h4 class="icon file-icon">File Contents</h4>
   <script src="{% static 'js/evidence-lightbox.js' %}"></script>
   <script>
     $(document).ready(function() {
-      console.log('Evidence detail page loaded');
+      // console.log('Evidence detail page loaded');
 
       // Initialize evidence lightbox
       if (typeof initEvidenceLightbox === 'function') {
-        console.log('initEvidenceLightbox function found');
+        // console.log('initEvidenceLightbox function found');
         initEvidenceLightbox();
       } else {
         console.error('initEvidenceLightbox function not found');
       }
 
       // Check if elements exist
-      console.log('Clickable elements found:', $('.js-open-lightbox').length);
+      // console.log('Clickable elements found:', $('.js-open-lightbox').length);
     });
   </script>
 {% endblock %}

ghostwriter/reporting/templates/reporting/evidence_form.html

@@ -2,6 +2,18 @@
 
 {% block pagetitle %}Evidence Form{% endblock %}
 
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ul class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'home:dashboard' %}">Dashboard</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'rolodex:client_detail' report.project.client.id %}">{{ report.project.client.name }}</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'rolodex:project_detail' report.project.id %}">{{ report.project }}</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'reporting:report_detail' report.id %}">{{ report }}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Evidence Form</li>
+        </ul>
+    </nav>
+{% endblock %}
+
 {% block content %}
     {% include "reporting/evidence_form_template.html" with form=form %}
 {% endblock %}

ghostwriter/reporting/views.py

@@ -731,6 +731,7 @@ def get_context_data(self, **kwargs):
             report = self.finding_instance.report
         else:
             report = self.report_instance
+        ctx["report"] = report
         ctx["cancel_link"] = reverse("reporting:report_detail", kwargs={"pk": report.pk}) + "#evidence"
         if "modal" in self.kwargs:
             friendly_names = self.evidence_queryset.values_list("friendly_name", flat=True)
@@ -818,6 +819,7 @@ def get_form_kwargs(self):
 
     def get_context_data(self, **kwargs):
         ctx = super().get_context_data(**kwargs)
+        ctx["report"] = self.object.associated_report
         ctx["cancel_link"] = reverse(
             "reporting:evidence_detail",
             kwargs={"pk": self.object.pk},

ghostwriter/static/css/styles.css

@@ -251,6 +251,7 @@ label {
   top: 15px;
   right: 25px;
   border-color: rgba(255, 255, 255, 0.3);
+  object-fit: cover;
 }
 
 /* ---------------------------------------------------
@@ -538,6 +539,7 @@ input[type='file'] {
   position: relative;
   display: inline-block;
   border-color: rgba(255, 255, 255, 0.3);
+  object-fit: cover;
 }
 
 .avatar_note {
@@ -546,6 +548,7 @@ input[type='file'] {
   border-radius: 50%;
   border-style: solid;
   border-width: 1px;
+  object-fit: cover;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 

ghostwriter/static/js/project.js

@@ -178,10 +178,70 @@ function showHideRow(btn, row) {
 // Insert a preview for pasted or selected image files
 function renderPreview(fileInput, previewDiv) {
   if (fileInput.files[0].type.indexOf('image') == 0) {
-    previewDiv.innerHTML = '<img id="loadedImage" alt="image"/ >'
-    let loadedImage = document.getElementById('loadedImage')
-    loadedImage.src = URL.createObjectURL(fileInput.files[0])
+    // Clear previous content
+    while (previewDiv.firstChild) {
+      previewDiv.removeChild(previewDiv.firstChild);
+    }
+
+    const loadedImage = document.createElement('img');
+    loadedImage.alt = 'image';
+    loadedImage.src = URL.createObjectURL(fileInput.files[0]);
     loadedImage.style.border = 'thin solid #555555';
+    previewDiv.appendChild(loadedImage);
+  }
+}
+
+// Insert avatar-specific previews showing how the image will appear in navbar and profile
+function renderAvatarPreview(fileInput, previewDiv) {
+  if (fileInput.files[0].type.indexOf('image') == 0) {
+    // Clear previous content
+    while (previewDiv.firstChild) {
+      previewDiv.removeChild(previewDiv.firstChild);
+    }
+
+    // Create container
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'center';
+    container.style.gap = '20px';
+    container.style.flexWrap = 'wrap';
+
+    // Create navbar preview section
+    const navbarSection = document.createElement('div');
+    const navbarLabel = document.createElement('p');
+    const navbarStrong = document.createElement('strong');
+    navbarStrong.textContent = 'Navbar Preview (40x40)';
+    navbarLabel.appendChild(navbarStrong);
+    const navbarImg = document.createElement('img');
+    navbarImg.alt = 'Navbar preview';
+    navbarImg.className = 'navbar-avatar';
+    navbarImg.style.position = 'static';
+    navbarSection.appendChild(navbarLabel);
+    navbarSection.appendChild(navbarImg);
+
+    // Create profile preview section
+    const profileSection = document.createElement('div');
+    const profileLabel = document.createElement('p');
+    const profileStrong = document.createElement('strong');
+    profileStrong.textContent = 'Profile Preview (250x250)';
+    profileLabel.appendChild(profileStrong);
+    const profileImg = document.createElement('img');
+    profileImg.alt = 'Profile preview';
+    profileImg.className = 'avatar';
+    profileImg.style.position = 'static';
+    profileSection.appendChild(profileLabel);
+    profileSection.appendChild(profileImg);
+
+    // Assemble and append
+    container.appendChild(navbarSection);
+    container.appendChild(profileSection);
+    previewDiv.appendChild(container);
+
+    // Set image sources
+    const imageUrl = URL.createObjectURL(fileInput.files[0]);
+    navbarImg.src = imageUrl;
+    profileImg.src = imageUrl;
   }
 }
 

ghostwriter/users/templates/users/profile_form.html

@@ -63,14 +63,14 @@
       if (pastedFileObj.files.length) {
         fileInput.files = pastedFileObj.files
         filename.textContent = fileInput.files[0].name
-        renderPreview(fileInput, previewDiv)
+        renderAvatarPreview(fileInput, previewDiv)
       }
     });
     // Detect when a file is dragged into the page and update the input and preview
     $('input[type=file]').on('change', function () {
       let filename = $(this).val().split('\\').pop();
       $('#filename').text(filename);
-      renderPreview(fileInput, previewDiv)
+      renderAvatarPreview(fileInput, previewDiv)
     });
   </script>
 {% endblock %}