Merge pull request Hardhat-Enterprises#401 from ys2426/main

UI Fixes: Language Dropdown/Recently Viewed Button Issue; Internship Expand Behavior & Scrollable; Path Finder Top Spacing

Author: drkae456

custom_static/css/hardhat.css

@@ -27369,15 +27369,20 @@ blockquote {
 
   .recently-viewed-sidebar {
     position: fixed;
-    top: 150px; /* Adjust based on where you want it */
+    top: 150px; /* Adjusted to sit below language dropdown */
     right: 20px;
-    z-index: 1000;
+    z-index: 10;
     background-color: #1c2540;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
 }
 
+.recently-viewed-sidebar .dropdown-menu,
+.recently-viewed-sidebar .dropdown-toggle {
+    z-index: 10;
+}
+
   .recently-viewed-sidebar .dropdown-toggle {
     background-color: #1c2540; /* Matches the site's dark theme */
     color: #ffc107; /* Gold text color */

home/forms.py

@@ -457,6 +457,10 @@ class CaptchaForm(forms.Form):
 
 
 class UserBlogPageForm(ModelForm):
+    image_url = forms.URLField(required=False, widget=forms.URLInput(attrs={
+        'class': 'form-control',
+        'placeholder': _('Image URL (Dropbox/shared link, optional)')
+    }))
     def clean_name(self):
         return clean_text(self.cleaned_data.get('name', ''))
 
@@ -473,6 +477,7 @@ class Meta:
             'name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': _('Your name')}),
             'title': forms.Textarea(attrs={'class': 'form-control', 'placeholder': _('Your title'), 'rows': 2}),
             'description': forms.Textarea(attrs={'class': 'form-control', 'placeholder': _('Your description')}),
+            'file': forms.ClearableFileInput(attrs={'class': 'form-control', 'accept': 'image/*'})
         }
 
 

home/templates/careers/internships.html

@@ -188,6 +188,7 @@
     background: #ffffff;
     border-radius: 12px;
     padding: 1.5rem;
+    /* Removed fixed max-height and scroll to make content expand naturally */
     margin-top: 1.5rem;
     box-shadow: 0 4px 16px rgba(0,0,0,0.1);
     border: 2px solid #ffd700;
@@ -708,15 +709,6 @@ <h4><i class="fas fa-handshake text-info"></i> Career Development</h4>
     const detailsPanel = card.querySelector('.role-details-panel');
     const isExpanded = detailsPanel.classList.contains('show');
 
-    // Close all other panels first
-    document.querySelectorAll('.role-details-panel').forEach(panel => {
-      panel.classList.remove('show');
-    });
-    
-    document.querySelectorAll('.view-details-btn').forEach(btn => {
-      btn.classList.remove('expanded');
-    });
-    
     // Toggle current panel
     if (!isExpanded) {
       detailsPanel.classList.add('show');
@@ -735,18 +727,7 @@ <h4><i class="fas fa-handshake text-info"></i> Career Development</h4>
     }
   }
 
-  // Close details when clicking outside
-  document.addEventListener('click', function(event) {
-    if (!event.target.closest('.internship-card')) {
-      document.querySelectorAll('.role-details-panel').forEach(panel => {
-        panel.classList.remove('show');
-      });
-      
-      document.querySelectorAll('.view-details-btn').forEach(btn => {
-        btn.classList.remove('expanded');
-      });
-    }
-  });
+  // Keep details open unless toggled via the View Details button
 </script>
 
 {% endblock %}

home/templates/careers/path_finder.html

@@ -4,7 +4,7 @@
 {% block title %}Cybersecurity Career Path Finder | Hardhat Enterprises{% endblock %}
 
 {% block content %}
-<div class="container my-4">
+<div class="container my-4" style="padding-top: 6rem;">
 
 <style>
   .hh-card-dark{ background-color:#212529; color:#f1f3f5; }

home/templates/includes/navigation.html

@@ -498,6 +498,7 @@
             margin-top: 0.5rem !important;
             min-width: auto !important;
             width: auto !important;
+            z-index: 2001 !important;
           }
 
           .dropdown-menu#lang_menu .dropdown-item {

home/templates/pages/blogpage.html

@@ -48,7 +48,7 @@ <h4>{% trans "User Blogs" %}</h4>
       </div>
       <br/>
       <div class="form-group">
-        <label for="id_file">{% trans "Image Upload (optional):" %}</label>
+        <label for="id_file">{% trans "Image Upload" %}</label>
         {{ form.file }}
       </div>
       <br/>
@@ -132,8 +132,8 @@ <h5 style="color: black;" id="editModalLabel">{% trans "Edit Blog" %}</h5>
               </div>
               <br/>
               <div class="form-group">
-                <label for="editFile" style="color: black;">{% trans "Change Image (optional)" %}</label>
-                <input style="color: black;" type="file" class="form-control-file" id="editFile" name="file">
+                <label for="editFile" style="color: black;">{% trans "Change Image (from your computer, optional)" %}</label>
+                <input style="color: black;" type="file" class="form-control-file" id="editFile" name="file" accept="image/*">
               </div>
             </div>           
             <br/>

home/templates/pages/dashboard.html

@@ -2,7 +2,7 @@
 {% load static %}
 {% block content %}
 
-<main class="pt-6">
+<main class="pt-5">
   {% include 'includes/pre-loader.html' %}
 
   <!-- Header -->
@@ -42,17 +42,17 @@ <h4 style="color: black; margin-bottom: 20px;">Skill Progress Overview</h4>
 
     <!-- Overall Progress Bar -->
     <div class="mb-5">
-      <label class="text-light">Total Progress: {{ percent }}%</label>
+      <p class="text-dark">Total Progress: {{ percent }}%</p>
       <div class="progress" style="height: 16px;">
-        <div class="progress-bar bg-success" role="progressbar" style="width: {{ percent }}%;" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100"></div>
+        <div class="progress-bar bg-success" role="progressbar" data-progress="{{ percent }}" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100"></div>
       </div>
     </div>
 
     <!-- Skill Cards -->
     <div class="row">
       {% for skill in skills %}
       <div class="col-md-6 mb-4">
-        <div class="card bg-dark text-white shadow-sm rounded-4 transition transform hover:scale-105 hover:shadow-lg">
+        <div class="card bg-dark text-white shadow-sm rounded-4">
           <div class="card-body">
             <h5 class="card-title text-warning">{{ skill.title }}</h5>
             <p>
@@ -123,4 +123,14 @@ <h5 class="card-title text-warning">{{ skill.title }}</h5>
   });
 </script>
 
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.progress-bar[data-progress]').forEach(function(bar){
+      var value = parseFloat(bar.getAttribute('data-progress')) || 0;
+      value = Math.max(0, Math.min(100, value));
+      bar.style.width = value + '%';
+    });
+  });
+  </script>
+
 {% endblock %}