Profile Page and Edit Profile Page modified

IEEE-NITK · Jan 10, 2025 · 771e35f · 771e35f
1 parent f8a1bde
commit 771e35f
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 60 deletions.
diff --git a/corpus/accounts/forms.py b/corpus/accounts/forms.py
@@ -68,9 +68,9 @@ class Meta:
         model = User
         fields = ['phone_no', 'gender', 'email', 'profile_pic']
         widgets = {
-            'phone_no': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 text-black'}),
-            'gender': forms.Select(attrs={'class': 'rounded-lg border-gray-300 text-black'}),
-            'email': forms.EmailInput(attrs={'class': 'rounded-lg border-gray-300 text-black'}),
+            'phone_no': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200'}),
+            'gender': forms.Select(attrs={'class': 'rounded-lg border-gray-300 bg-base-200'}),
+            'email': forms.EmailInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200'}),
             'profile_pic': forms.ClearableFileInput(attrs={'multiple': False}),
 
         }
@@ -83,13 +83,13 @@ class Meta:
             'ieee_number', 'ieee_email', 'linkedin', 'github', 'is_nep'
         ]
         widgets = {
-            'edu_email': forms.EmailInput(attrs={'class': 'rounded-lg border-gray-300 text-black', 'required': True}),
-            'roll_number': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 text-black', 'required': True}),
-            'reg_number': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 text-black', 'required': True}),
-            'minor_branch': forms.Select(attrs={'class': 'rounded-lg border-gray-300 text-black'}),
-            'ieee_number': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 text-black','required': True}),
-            'ieee_email': forms.EmailInput(attrs={'class': 'rounded-lg border-gray-300 text-black'}),
-            'linkedin': forms.URLInput(attrs={'class': 'rounded-lg border-gray-300 text-black'}),
-            'github': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 text-black'}),
+            'edu_email': forms.EmailInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200', 'required': True}),
+            'roll_number': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200', 'required': True}),
+            'reg_number': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200', 'required': True}),
+            'minor_branch': forms.Select(attrs={'class': 'rounded-lg border-gray-300 bg-base-200 w-full',}),
+            'ieee_number': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200','required': True}),
+            'ieee_email': forms.EmailInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200'}),
+            'linkedin': forms.URLInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200'}),
+            'github': forms.TextInput(attrs={'class': 'rounded-lg border-gray-300 bg-base-200'}),
             'is_nep': forms.CheckboxInput(),
         }
diff --git a/corpus/templates/accounts/edit_profile.html b/corpus/templates/accounts/edit_profile.html
@@ -12,7 +12,7 @@ <h2 class="text-3xl font-bold text-center mb-6">Edit Profile</h2>
             {% csrf_token %}
 
             <!-- Personal Information Section -->
-            <div class="card bg-gray-100 border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all">
+            <div class="card bg-gray-100 border-0 sm:border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all">
                 <div class="card-body">
                     <h3 class="card-title text-xl font-semibold mb-4">Personal Information</h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -27,10 +27,10 @@ <h3 class="card-title text-xl font-semibold mb-4">Personal Information</h3>
                             <div class="flex justify-end mb-4">
                                 {% if user.profile_pic %}
                                     <img src="{{ user.profile_pic.url }}" 
-                                         alt="{{ user }}" class="rounded-full w-24 h-24 object-cover shadow-lg" id="profilePicPreview">
+                                         alt="{{ user }}" style="width: 12em;" class="rounded-full h-48 object-cover mx-auto max-w-full shadow-lg" id="profilePicPreview">
                                 {% else %}
                                     <img src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed={{ exec_member.roll_number }}" 
-                                         alt="{{ user }}" class="rounded-full w-24 h-24 object-cover shadow-lg" id="profilePicPreview">
+                                         alt="{{ user }}" style="width: 12em;" class="rounded-full h-48 object-cover mx-auto max-w-full shadow-lg" id="profilePicPreview">
                                 {% endif %}
                             </div>
 
@@ -70,7 +70,7 @@ <h3 class="card-title text-xl font-semibold mb-4">Personal Information</h3>
 
             {% if executive_member_form %}
             <!-- NITK Details Card -->
-            <div class="card bg-gray-100 border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all mt-6">
+            <div class="card bg-gray-100 border-0 sm:border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all mt-6">
                 <div class="card-body">
                     <h3 class="card-title text-xl font-semibold mb-4">NITK Details</h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -103,7 +103,7 @@ <h3 class="card-title text-xl font-semibold mb-4">NITK Details</h3>
             </div>
 
             <!-- IEEE Details Card -->
-            <div class="card bg-gray-100 border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all mt-6">
+            <div class="card bg-gray-100 border-0 sm:border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all mt-6">
                 <div class="card-body">
                     <h3 class="card-title text-xl font-semibold mb-4">IEEE Details</h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -124,7 +124,7 @@ <h3 class="card-title text-xl font-semibold mb-4">IEEE Details</h3>
             </div>
 
             <!-- Socials Card -->
-            <div class="card bg-gray-100 border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all mt-6">
+            <div class="card bg-gray-100 border-0 sm:border border-neutral rounded-lg shadow-xl hover:shadow-2xl transition-all mt-6">
                 <div class="card-body">
                     <h3 class="card-title text-xl font-semibold mb-4">Socials</h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -159,18 +159,41 @@ <h3 class="card-title text-xl font-semibold mb-4">Socials</h3>
                 </div>
             </div>
             {% endif %}
-
+
+            <!-- Save Changes Modal -->
+            <div id="saveChangesModal" class="modal" aria-hidden="true">
+                <div class="modal-box">
+                    <h3 class="text-lg font-bold">Confirm Save Changes</h3>
+                    <p>Are you sure you want to save these changes?</p>
+                    <div class="modal-action mt-4 flex justify-center gap-4">
+                        <button type="submit" class="btn btn-primary" id="confirmSaveChanges">Yes, Save</button>
+                        <button type="button" class="btn btn-secondary modal-close">Cancel</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Go Back Modal -->
+            <div id="goBackModal" class="modal" aria-hidden="true">
+                <div class="modal-box">
+                    <h3 class="text-lg font-bold">Confirm Go Back</h3>
+                    <p>Are you sure you want to go back? All unsaved changes will be lost!</p>
+                    <div class="modal-action mt-4 flex justify-center gap-4">
+                        <a href="{% url 'accounts_profile' roll_no=exec_member.roll_number %}" class="btn btn-primary">Yes, Go Back</a>
+                        <button type="button" class="btn btn-secondary modal-close">Cancel</button>
+                    </div>
+                </div>
+            </div>
+
+
             <!-- Buttons Section -->
-            <div class="mt-6 flex justify-between gap-16">
-                <button type="submit" class="btn btn-primary" onclick="return confirm('Are you sure you want to save these changes?')">Save Changes</button>
-                <a href="{% url 'accounts_profile' roll_no=exec_member.roll_number %}" 
-                   class="btn btn-secondary" 
-                   onclick="return confirm('Are you sure you want to go back? All unsaved changes will be lost!')">
-                   Go Back
-                </a>
+            <div class="mt-6 flex justify-center gap-4">
+                <button type="button" class="btn btn-primary" id="openSaveChangesModal">Save Changes</button>
+                <button type="button" class="btn btn-secondary" id="openGoBackModal">Go Back</button>
             </div>
-        </form>
-    </div>
+
+    </form>
+</div>
+
 
     <script>
         // Preview image before uploading
@@ -205,6 +228,38 @@ <h3 class="card-title text-xl font-semibold mb-4">Socials</h3>
             // Hide the clear image button again
             this.style.display = 'none';
         });
+
+        // Show Save Changes modal
+        document.getElementById('openSaveChangesModal').addEventListener('click', function() {
+            const modal = document.getElementById('saveChangesModal');
+            modal.setAttribute('open', 'true');  // Add 'open' attribute to show the modal
+            modal.setAttribute('aria-hidden', 'false');  // Make it accessible
+        });
+
+        // Show Go Back modal
+        document.getElementById('openGoBackModal').addEventListener('click', function() {
+            const modal = document.getElementById('goBackModal');
+            modal.setAttribute('open', 'true');  // Add 'open' attribute to show the modal
+            modal.setAttribute('aria-hidden', 'false');  // Make it accessible
+        });
+
+        // Close modal when clicking the close button
+        document.querySelectorAll('.modal-close').forEach(function(button) {
+            button.addEventListener('click', function() {
+                const modal = this.closest('.modal');
+                modal.removeAttribute('open');  // Remove the 'open' attribute to hide the modal
+                modal.setAttribute('aria-hidden', 'true');  // Make it accessible
+            });
+        });
+
+        // Close modal when clicking outside of it
+        window.addEventListener('click', function(e) {
+            if (e.target.classList.contains('modal')) {
+                e.target.removeAttribute('open');  // Remove 'open' attribute when clicking outside
+                e.target.setAttribute('aria-hidden', 'true');  // Make it accessible
+            }
+        });
+
     </script>
 
 {% endblock %}
diff --git a/corpus/templates/accounts/profile.html b/corpus/templates/accounts/profile.html
@@ -7,18 +7,15 @@
 {% block content %}
     <div class="w-5/6 md:w-2/3 my-10 mx-auto flex flex-col md:flex-row gap-8">
         <!-- Div with image, name, society and core member position if any -->
-        <div class="w-full md:w-1/3 prose text-center p-5 border border-neutral rounded-lg md:border-none">
+        <div class="w-full md:w-1/3 prose text-center p-5 border-0 sm:border border-neutral rounded-lg">
             {% if user.profile_pic %}
-                <img src="{{ user.profile_pic.url }}" alt="{{ user }}" class="rounded rounded-full w-64 h-64 mx-auto"/>
+                <img src="{{ user.profile_pic.url }}" alt="{{ user }}" style="width: 12em;" class="rounded-full h-48 object-cover mx-auto max-w-full"/>
             {% else %}
                 <img src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed={{ exec_member.roll_number }}"
-                     alt="{{ user }}" class="rounded rounded-full w-64 h-64 mx-auto"/>
+                     alt="{{ user }}" style="width: 12em;" class="rounded-full h-48 object-cover mx-auto max-w-full"/>
             {% endif %}
 
             <h1 class="my-2">{{ user }}</h1>
-            <!-- Todo
-                <h2 class="my-1">Core Post comes here</h2>
-            -->
             <h3 class="m-0">{{ exec_member.sig }}</h3>
 
             <!-- Edit Profile Link -->
@@ -30,35 +27,41 @@ <h3 class="m-0">{{ exec_member.sig }}</h3>
         </div>
 
         <!-- Div with other information about the person -->
-        <div class="w-full md:w-2/3 p-5 border border-neutral rounded-lg flex flex-col gap-2">
-            <div tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+        <div class="w-full md:w-2/3 p-5 border-0 sm:border border-neutral rounded-lg flex flex-col gap-2">
+            <div tabindex="0" class="collapse collapse-arrow border-0 md:border-base-300 bg-base-200">
                 <div class="collapse-title text-xl font-bold">Personal Information</div>
                 <div class="collapse-content">
                     <div class="grid grid-cols-2 gap-5">
                         <div class="font-bold">Name</div>
                         <div>{{ user }}</div>
+                    </div>
+                    <div class="mt-8 grid grid-cols-2 gap-5">
                         <div class="font-bold">Date Joined</div>
                         <div>{{ exec_member.date_joined|date:"M d, Y" }}</div>
                     </div>
                 </div>
             </div>
-            <div tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+
+            <div tabindex="0" class="collapse collapse-arrow border-0 md:border-base-300 bg-base-200">
                 <div class="collapse-title text-xl font-bold">IEEE Membership Information</div>
                 <div class="collapse-content">
                     <div class="grid grid-cols-2 gap-5">
                         <div class="font-bold">IEEE Membership Number</div>
                         <div>{{ exec_member.ieee_number }}</div>
+                    </div>
+                    <div class="mt-8 grid grid-cols-2 gap-5">
                         <div class="font-bold">IEEE Membership Email</div>
                         <div>{{ exec_member.ieee_email }}</div>
                     </div>
                 </div>
             </div>
-            <div tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+
+            <div tabindex="0" class="collapse collapse-arrow border-0 md:border-base-300 bg-base-200">
                 <div class="collapse-title text-xl font-bold">Reports Published</div>
                 <div class="collapse-content">
                     {% if reports %}
                         <div class="grid grid-cols-1 gap-5">
-                            <ul class="list-disc p-5">
+                            <ul class="list-disc p-5 space-y-6">
                                 {% for report in reports %}
                                     <li>
                                         <a href="{% url 'virtual_expo_report' report_id=report.id %}"
@@ -74,28 +77,30 @@ <h3 class="m-0">{{ exec_member.sig }}</h3>
                     {% endif %}
                 </div>
             </div>
-            <div tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+
+            <div tabindex="0" class="collapse collapse-arrow border-0 md:border-base-300 bg-base-200">
                 <div class="collapse-title text-xl font-bold">Blogs Published</div>
                 <div class="collapse-content">
                     {% if blogs %}
-                    <div class="grid grid-cols-1 gap-5">
-                        <ul class="list-disc p-5">
-                            {% for blog in blogs %}
-                                <li>
-                                    <h3 class="font-bold">{{ blog.title }}</h3>
-                                    <p>{{ blog.description }}</p>
-                                    <p>Published on: {{ blog.published_date|date:"M d, Y" }}</p>
-                                    <a href="/blog/{{ blog.slug }}" class="link link-primary">Read More</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                {% else %}
-                    No blogs available yet. Check back soon!
-                {% endif %}
+                        <div class="grid grid-cols-1 gap-5">
+                            <ul class="list-disc p-5 space-y-6">
+                                {% for blog in blogs %}
+                                    <li>
+                                        <h3 class="font-bold">{{ blog.title }}</h3>
+                                        <p>{{ blog.description }}</p>
+                                        <p>Published on: {{ blog.published_date|date:"M d, Y" }}</p>
+                                        <a href="/blog/{{ blog.slug }}" class="link link-primary">Read More</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% else %}
+                        No blogs available yet. Check back soon!
+                    {% endif %}
                 </div>
             </div>
-            <div tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+
+            <div tabindex="0" class="collapse collapse-arrow border-0 md:border-base-300 bg-base-200">
                 <div class="collapse-title text-xl font-bold">Links</div>
                 <div class="collapse-content">
                     <div class="grid grid-cols-2 gap-5">
@@ -112,7 +117,9 @@ <h3 class="font-bold">{{ blog.title }}</h3>
                                 {% endif %}
                             {% endif %}
                         </div>
+                    </div>
 
+                    <div class="mt-8 grid grid-cols-2 gap-5">
                         <!-- LinkedIn Section -->
                         <div class="font-bold">LinkedIn</div>
                         <div>
@@ -126,12 +133,9 @@ <h3 class="font-bold">{{ blog.title }}</h3>
                                 {% endif %}
                             {% endif %}
                         </div>
-                    </div>
-
+                    </div>   
                 </div>
             </div>
         </div>
     </div>
-
-
-{% endblock %}
+{% endblock %}