Skip to content

Commit 61f214b

Browse files
rinkitadhanaDonnieBLT
rinkitadhana
and
DonnieBLT
authored
fixed profile-edit page (#3920)
Co-authored-by: DonnieBLT <[email protected]>
1 parent 953e4de commit 61f214b

File tree

1 file changed

+45
-49
lines changed

1 file changed

+45
-49
lines changed

‎website/templates/profile_edit.html

+45-49
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
{% block content %}
1919
{% include "includes/sidenav.html" %}
2020
<div class="container mx-auto px-4 py-8">
21-
<div class="max-w-4xl mx-auto">
21+
<div class="lg:max-w-[1700px] mx-auto">
2222
<!-- Header -->
2323
<div class="text-center mb-12">
2424
<h2 class="text-3xl font-bold text-gray-900">Edit Profile</h2>
@@ -27,7 +27,7 @@ <h2 class="text-3xl font-bold text-gray-900">Edit Profile</h2>
2727
<!-- Main Form -->
2828
<form method="post"
2929
enctype="multipart/form-data"
30-
class="bg-white rounded-2xl shadow-xl p-8">
30+
class=" bg-white rounded-xl w-full border border-gray-200 shadow-md py-10 px-8">
3131
{% csrf_token %}
3232
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
3333
<!-- Left Column -->
@@ -47,7 +47,7 @@ <h2 class="text-3xl font-bold text-gray-900">Edit Profile</h2>
4747
</div>
4848
{% endif %}
4949
<label for="id_user_avatar"
50-
class="absolute bottom-0 right-0 bg-[#e74c3c] text-white p-2 rounded-full cursor-pointer hover:bg-red-700 transition-colors">
50+
class="absolute bottom-0 right-0 bg-[#e74c3c] text-white px-3 py-2 rounded-full cursor-pointer hover:bg-red-700 transition-colors">
5151
<i class="fas fa-camera"></i>
5252
</label>
5353
<input type="file"
@@ -66,7 +66,7 @@ <h2 class="text-3xl font-bold text-gray-900">Edit Profile</h2>
6666
name="role"
6767
id="id_role"
6868
value="{{ form.role.value }}"
69-
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
69+
class="w-full placeholder:text-base px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
7070
placeholder="e.g., Security Researcher">
7171
</div>
7272
<div>
@@ -75,7 +75,7 @@ <h2 class="text-3xl font-bold text-gray-900">Edit Profile</h2>
7575
<textarea name="description"
7676
id="id_description"
7777
rows="4"
78-
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
78+
class="w-full placeholder:text-base px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
7979
placeholder="Tell us about yourself...">{{ form.description.value }}</textarea>
8080
</div>
8181
</div>
@@ -91,7 +91,7 @@ <h2 class="text-3xl font-bold text-gray-900">Edit Profile</h2>
9191
name="discounted_hourly_rate"
9292
id="id_discounted_hourly_rate"
9393
value="{{ form.discounted_hourly_rate.value }}"
94-
class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
94+
class="w-full placeholder:text-base pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
9595
placeholder="0.00">
9696
</div>
9797
</div>
@@ -108,7 +108,7 @@ <h3 class="text-lg font-semibold text-gray-900">Social Links</h3>
108108
name="linkedin_url"
109109
id="id_linkedin_url"
110110
value="{{ form.linkedin_url.value|default_if_none:'' }}"
111-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
111+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
112112
placeholder="https://linkedin.com/in/username">
113113
</div>
114114
</div>
@@ -121,7 +121,7 @@ <h3 class="text-lg font-semibold text-gray-900">Social Links</h3>
121121
name="github_url"
122122
id="id_github_url"
123123
value="{{ form.github_url.value|default_if_none:'' }}"
124-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
124+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
125125
placeholder="https://github.com/username">
126126
</div>
127127
</div>
@@ -134,7 +134,7 @@ <h3 class="text-lg font-semibold text-gray-900">Social Links</h3>
134134
name="x_username"
135135
id="id_x_username"
136136
value="{{ form.x_username.value|default_if_none:'' }}"
137-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
137+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
138138
placeholder="@username">
139139
</div>
140140
</div>
@@ -147,20 +147,20 @@ <h3 class="text-lg font-semibold text-gray-900">Social Links</h3>
147147
name="website_url"
148148
id="id_website_url"
149149
value="{{ form.website_url.value|default_if_none:'' }}"
150-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
150+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
151151
placeholder="https://yourwebsite.com">
152152
</div>
153153
</div>
154154
</div>
155155
</div>
156156
<!-- Issues Hidden -->
157-
<div class="flex items-center">
157+
<div class="flex items-center ">
158158
<input type="checkbox"
159159
name="issues_hidden"
160160
id="id_issues_hidden"
161161
class="h-5 w-5 text-[#e74c3c] border-gray-300 rounded focus:ring-[#e74c3c]"
162162
{% if form.issues_hidden.value %}checked{% endif %}>
163-
<label for="id_issues_hidden" class="ml-3 text-sm font-medium text-gray-700">Hide Issues</label>
163+
<p for="id_issues_hidden" class="ml-3 text-sm font-medium text-gray-700">Hide Issues</p>
164164
</div>
165165
</div>
166166
<!-- Right Column -->
@@ -174,7 +174,7 @@ <h3 class="text-lg font-semibold text-gray-900">Social Links</h3>
174174
name="email"
175175
id="id_email"
176176
value="{{ form.email.value|default_if_none:'' }}"
177-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
177+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
178178
required>
179179
</div>
180180
{% if form.email.errors %}<div class="mt-2 text-sm text-red-600">{{ form.email.errors }}</div>{% endif %}
@@ -192,7 +192,7 @@ <h3 class="text-lg font-semibold text-gray-900">Crypto Addresses</h3>
192192
name="btc_address"
193193
id="id_btc_address"
194194
value="{{ form.btc_address.value|default_if_none:'' }}"
195-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
195+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
196196
placeholder="BTC Address">
197197
</div>
198198
</div>
@@ -205,7 +205,7 @@ <h3 class="text-lg font-semibold text-gray-900">Crypto Addresses</h3>
205205
name="bch_address"
206206
id="id_bch_address"
207207
value="{{ form.bch_address.value|default_if_none:'' }}"
208-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
208+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
209209
placeholder="BCH Address">
210210
</div>
211211
</div>
@@ -218,7 +218,7 @@ <h3 class="text-lg font-semibold text-gray-900">Crypto Addresses</h3>
218218
name="eth_address"
219219
id="id_eth_address"
220220
value="{{ form.eth_address.value|default_if_none:'' }}"
221-
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
221+
class="w-full placeholder:text-base pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
222222
placeholder="ETH Address">
223223
</div>
224224
</div>
@@ -230,7 +230,7 @@ <h3 class="text-lg font-semibold text-gray-900">Crypto Addresses</h3>
230230
<div class="relative">
231231
<input type="text"
232232
id="tagSearch"
233-
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
233+
class="w-full placeholder:text-base px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
234234
placeholder="Search tags...">
235235
</div>
236236
<div id="tagContainer"
@@ -259,27 +259,25 @@ <h3 class="text-lg font-semibold text-gray-900">Crypto Addresses</h3>
259259
<div class="relative">
260260
<input type="text"
261261
id="domainSearch"
262-
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
262+
class="w-full placeholder:text-base px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
263263
placeholder="Search domains...">
264264
</div>
265265
<div id="domainContainer"
266266
class="mt-4 max-h-48 overflow-y-auto border border-gray-300 rounded-lg p-4">
267267
<div class="flex flex-wrap gap-2">
268268
{% for domain in form.subscribed_domains.field.queryset %}
269-
{% if domain.id in form.subscribed_domains.value %}
270-
<div class="domain-item">
271-
<input type="checkbox"
272-
name="subscribed_domains"
273-
value="{{ domain.id }}"
274-
id="domain_{{ domain.id }}"
275-
class="hidden"
276-
checked>
277-
<label for="domain_{{ domain.id }}"
278-
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium cursor-pointer bg-[#e74c3c] text-white hover:bg-red-700 transition-colors">
279-
{{ domain.name }}
280-
</label>
281-
</div>
282-
{% endif %}
269+
<div class="domain-item">
270+
<input type="checkbox"
271+
name="subscribed_domains"
272+
value="{{ domain.id }}"
273+
id="domain_{{ domain.id }}"
274+
class="hidden"
275+
{% if domain.id in form.subscribed_domains.value %}checked{% endif %}>
276+
<label for="domain_{{ domain.id }}"
277+
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium cursor-pointer transition-colors {% if domain.id in form.subscribed_domains.value %}bg-[#e74c3c] text-white hover:bg-red-700{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
278+
{{ domain.name }}
279+
</label>
280+
</div>
283281
{% endfor %}
284282
</div>
285283
</div>
@@ -290,27 +288,25 @@ <h3 class="text-lg font-semibold text-gray-900">Crypto Addresses</h3>
290288
<div class="relative">
291289
<input type="text"
292290
id="userSearch"
293-
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
291+
class="w-full placeholder:text-base px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e74c3c] focus:border-[#e74c3c]"
294292
placeholder="Search users...">
295293
</div>
296294
<div id="userContainer"
297295
class="mt-4 max-h-48 overflow-y-auto border border-gray-300 rounded-lg p-4">
298296
<div class="flex flex-wrap gap-2">
299297
{% for user in form.subscribed_users.field.queryset %}
300-
{% if user.id in form.subscribed_users.value %}
301-
<div class="user-item">
302-
<input type="checkbox"
303-
name="subscribed_users"
304-
value="{{ user.id }}"
305-
id="user_{{ user.id }}"
306-
class="hidden"
307-
checked>
308-
<label for="user_{{ user.id }}"
309-
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium cursor-pointer bg-[#e74c3c] text-white hover:bg-red-700 transition-colors">
310-
{{ user.username }}
311-
</label>
312-
</div>
313-
{% endif %}
298+
<div class="user-item">
299+
<input type="checkbox"
300+
name="subscribed_users"
301+
value="{{ user.id }}"
302+
id="user_{{ user.id }}"
303+
class="hidden"
304+
{% if user.id in form.subscribed_users.value %}checked{% endif %}>
305+
<label for="user_{{ user.id }}"
306+
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium cursor-pointer transition-colors {% if user.id in form.subscribed_users.value %}bg-[#e74c3c] text-white hover:bg-red-700{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
307+
{{ user.username }}
308+
</label>
309+
</div>
314310
{% endfor %}
315311
</div>
316312
</div>
@@ -326,8 +322,8 @@ <h3 class="text-lg font-semibold text-gray-900">Crypto Addresses</h3>
326322
</div>
327323
</form>
328324
<!-- Danger Zone -->
329-
<div class="mt-12 p-6 bg-red-50 rounded-lg border border-red-200">
330-
<h3 class="text-lg font-semibold text-red-700 mb-4">Danger Zone</h3>
325+
<div class="mt-12 p-6 bg-red-50 rounded-lg border flex justify-between border-red-200">
326+
<h3 class="text-lg font-semibold text-red-700">Danger Zone</h3>
331327
<form action="{% url 'user_deletion' %}"
332328
method="post"
333329
onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.');">

0 commit comments

Comments
 (0)