Skip to content

Commit acd33e0

Browse files
Nachiket-RoyNachiket-Roy
committed
ui improvement
1 parent 0668a4a commit acd33e0

File tree

6 files changed

+53
-38
lines changed

6 files changed

+53
-38
lines changed

‎website/migrations/0165_add_badge_icons.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ def add_badge_icons(apps, schema_editor):
9393
os.makedirs(os.path.dirname(media_icon_path), exist_ok=True)
9494

9595
# Need to copy this image in the media file so that it can be served by django
96-
shutil.copy(static_icon_path, media_icon_path)
96+
shutil.copyfile(static_icon_path, media_icon_path)
9797

9898
# Open the copied file and save it to the Badge model
9999
with open(media_icon_path, "rb") as f:

‎website/templates/github_issues.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h3 class="text-lg font-semibold">Issues</h3>
4040
</div>
4141
</div>
4242
<!-- BACON Rewards Section -->
43-
<div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
43+
<div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 mb-8">
4444
<div class="sm:col-span-5">
4545
<div class="bg-gray-50 p-6 rounded-lg border-2 border-[#e74c3c] shadow-sm">
4646
<div class="flex items-center gap-3 mb-4">
@@ -53,16 +53,16 @@ <h3 class="text-xl font-semibold text-gray-900">BACON Rewards</h3>
5353
<div class="flex flex-wrap gap-4">
5454
<div class="flex items-center gap-2">
5555
<i class="fas fa-check-circle text-[#e74c3c]"></i>
56-
<span class="text-sm text-gray-700">5 BACON tokens for accepted issues</span>
56+
<span class="text-gray-700">5 BACON tokens for accepted issues</span>
5757
</div>
5858
<div class="flex items-center gap-2">
5959
<i class="fas fa-star text-[#e74c3c]"></i>
60-
<span class="text-sm text-gray-700">Bonus tokens for security-related issues</span>
60+
<span class="text-gray-700">Bonus tokens for security-related issues</span>
6161
</div>
6262
</div>
6363
<div class="mt-4">
6464
<a href="/bacon"
65-
class="text-[#e74c3c] hover:text-[#c0392b] inline-flex items-center gap-2 text-sm">
65+
class="text-[#e74c3c] hover:text-[#c0392b] inline-flex items-center gap-2">
6666
<i class="fas fa-info-circle"></i>
6767
Learn more about BACON rewards
6868
</a>

‎website/templates/hackathons/list.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ <h3 class="text-sm font-medium text-gray-900">Past</h3>
109109
{% if hackathons %}
110110
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
111111
{% for hackathon in hackathons %}
112-
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
112+
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 flex flex-col h-full">
113113
{% if hackathon.banner_image %}
114114
<div class="h-40 bg-cover bg-center"
115115
style="background-image: url('{{ hackathon.banner_image.url }}')"></div>
@@ -118,9 +118,9 @@ <h3 class="text-sm font-medium text-gray-900">Past</h3>
118118
<i class="fas fa-code text-white text-5xl"></i>
119119
</div>
120120
{% endif %}
121-
<div class="p-6">
122-
<div class="flex justify-between items-start">
123-
<h2 class="text-xl font-bold text-gray-900 mb-2">{{ hackathon.name }}</h2>
121+
<div class="p-6 flex flex-col flex-grow">
122+
<div class="flex justify-between items-start mb-2">
123+
<h2 class="text-xl font-bold text-gray-900">{{ hackathon.name }}</h2>
124124
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if hackathon.is_ongoing %} bg-green-100 text-green-800 {% elif hackathon.has_ended %} bg-gray-100 text-gray-800 {% else %} bg-blue-100 text-blue-800 {% endif %} ">
125125
{% if hackathon.is_ongoing %}
126126
Ongoing
@@ -131,19 +131,22 @@ <h2 class="text-xl font-bold text-gray-900 mb-2">{{ hackathon.name }}</h2>
131131
{% endif %}
132132
</span>
133133
</div>
134-
<p class="text-gray-600 text-sm mb-4">
134+
<p class="text-gray-600 text-sm mb-3">
135135
Organized by <a href="{% url 'organization_detail' slug=hackathon.organization.slug %}"
136136
class="text-[#e74c3c] hover:underline">{{ hackathon.organization.name }}</a>
137137
</p>
138-
<p class="text-gray-700 mb-4 line-clamp-3">{{ hackathon.description|truncatechars:150 }}</p>
138+
<p class="text-gray-700 mb-4 line-clamp-3 flex-grow">{{ hackathon.description|truncatechars:150 }}</p>
139139
<div class="flex items-center text-sm text-gray-500 mb-4">
140140
<i class="far fa-calendar mr-2"></i>
141141
<span>{{ hackathon.start_time|date:"M d, Y" }} - {{ hackathon.end_time|date:"M d, Y" }}</span>
142142
</div>
143-
<a href="{% url 'hackathon_detail' slug=hackathon.slug %}"
144-
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#e74c3c] hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c] w-full justify-center">
145-
View Details
146-
</a>
143+
<div class="mt-auto">
144+
<a href="{% url 'hackathon_detail' slug=hackathon.slug %}"
145+
class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#e74c3c] hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c] w-full transition-colors duration-200">
146+
View Details
147+
<i class="fas fa-arrow-right ml-2"></i>
148+
</a>
149+
</div>
147150
</div>
148151
</div>
149152
{% endfor %}

‎website/templates/home.html‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ <h2 class="text-3xl font-bold">Recent Hackathons</h2>
230230
</div>
231231
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
232232
{% for hackathon in recent_hackathons %}
233-
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 border border-gray-200">
233+
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 border border-gray-200 flex flex-col">
234234
{% if hackathon.banner_image %}
235235
<div class="h-48 bg-cover bg-center"
236236
style="background-image: url('{{ hackathon.banner_image.url }}')"></div>
@@ -239,7 +239,7 @@ <h2 class="text-3xl font-bold">Recent Hackathons</h2>
239239
<i class="fas fa-code text-white text-5xl"></i>
240240
</div>
241241
{% endif %}
242-
<div class="p-6">
242+
<div class="p-6 flex flex-col flex-grow">
243243
<div class="flex justify-between items-start mb-2">
244244
<h3 class="text-xl font-bold text-gray-900">{{ hackathon.name }}</h3>
245245
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ hackathon.status_badge_class }}">
@@ -250,16 +250,18 @@ <h3 class="text-xl font-bold text-gray-900">{{ hackathon.name }}</h3>
250250
Organized by <a href="{% url 'organization_detail' slug=hackathon.organization.slug %}"
251251
class="text-[#e74c3c] hover:underline">{{ hackathon.organization.name }}</a>
252252
</p>
253-
<p class="text-gray-700 mb-4 line-clamp-3">{{ hackathon.description|truncatechars:150 }}</p>
253+
<p class="text-gray-700 mb-4 line-clamp-3 flex-grow">{{ hackathon.description|truncatechars:150 }}</p>
254254
<div class="flex items-center text-sm text-gray-500 mb-4">
255255
<i class="far fa-calendar mr-2"></i>
256256
<span>{{ hackathon.start_time|date:"M d, Y" }} - {{ hackathon.end_time|date:"M d, Y" }}</span>
257257
</div>
258-
<a href="{% url 'hackathon_detail' slug=hackathon.slug %}"
259-
class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#e74c3c] hover:bg-red-700 transition-colors w-full">
260-
View Details
261-
<i class="fas fa-arrow-right ml-2"></i>
262-
</a>
258+
<div class="mt-auto">
259+
<a href="{% url 'hackathon_detail' slug=hackathon.slug %}"
260+
class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#e74c3c] hover:bg-red-700 transition-colors w-full">
261+
View Details
262+
<i class="fas fa-arrow-right ml-2"></i>
263+
</a>
264+
</div>
263265
</div>
264266
</div>
265267
{% endfor %}
@@ -856,7 +858,7 @@ <h2 class="text-3xl font-bold text-center mb-12">Latest Blog Posts</h2>
856858
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
857859
{% if latest_blog_posts %}
858860
{% for post in latest_blog_posts %}
859-
<div class="bg-white rounded-lg shadow-lg border-2 border-[#e74c3c] overflow-hidden">
861+
<div class="bg-white rounded-lg shadow-lg border-2 border-[#e74c3c] overflow-hidden flex flex-col h-full">
860862
{% if post.image %}
861863
<div class="w-full h-48 overflow-hidden">
862864
<img src="{{ post.image.url }}"
@@ -866,7 +868,7 @@ <h2 class="text-3xl font-bold text-center mb-12">Latest Blog Posts</h2>
866868
class="w-full h-full object-cover">
867869
</div>
868870
{% endif %}
869-
<div class="p-6">
871+
<div class="p-6 flex flex-col flex-grow">
870872
<h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
871873
<div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
872874
<span class="flex items-center gap-1">
@@ -878,9 +880,14 @@ <h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
878880
{{ post.created_at|timesince }} ago
879881
</span>
880882
</div>
881-
<p class="text-gray-700 mb-4">{{ post.content|truncatewords:30 }}</p>
882-
<a href="{% url 'post_detail' slug=post.slug %}"
883-
class="text-[#e74c3c] hover:text-[#c0392b] font-medium">Read more</a>
883+
<p class="text-gray-700 mb-4 flex-grow">{{ post.content|truncatewords:30 }}</p>
884+
<div class="mt-auto">
885+
<a href="{% url 'post_detail' slug=post.slug %}"
886+
class="inline-flex items-center text-[#e74c3c] hover:text-[#c0392b] font-medium transition-colors duration-200">
887+
Read more
888+
<i class="fas fa-arrow-right ml-2"></i>
889+
</a>
890+
</div>
884891
</div>
885892
</div>
886893
{% endfor %}

‎website/templates/map.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,18 @@ <h1 class="text-3xl font-bold text-gray-900">Location Map</h1>
2020
{% endfor %}
2121
</div>
2222
</div>
23-
<div class="relative z-0">
23+
<div class="relative z-0 mb-8">
2424
<div id="map-loading" class="map-loading hidden">
2525
<div class="flex items-center space-x-2">
2626
<i class="fas fa-spinner fa-spin text-[#e74c3c]"></i>
2727
<span>Loading map...</span>
2828
</div>
2929
</div>
3030
<div id="map"
31-
class="w-full h-[600px] rounded-lg shadow-lg mb-8 overflow-hidden relative z-0 border-2 border-black">
31+
class="w-full h-[600px] rounded-lg shadow-lg overflow-hidden relative z-0 border-2 border-black mb-2">
32+
</div>
33+
<div class="flex justify-end">
34+
<p class="text-sm text-gray-500 italic">This map was inspired by the map on OWASP Nest</p>
3235
</div>
3336
</div>
3437
<div class="mt-8">
@@ -84,7 +87,6 @@ <h3 class="text-lg font-medium text-gray-900">{{ location.name }}</h3>
8487
<p class="text-gray-400 mt-2">Try selecting a different location type</p>
8588
</div>
8689
{% endfor %}
87-
this map was inspired by the map on OWASP Nest
8890
</div>
8991
</div>
9092
</div>

‎website/templates/users.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,9 @@ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tigh
6767
height="100px"
6868
alt="{{ contributor.name }}'s avatar"
6969
onerror="this.src='{% static 'images/dummy-user.png' %}'">
70-
<div class="text-2xl font-bold text-gray-900">{{ contributor.name }}</div>
71-
<div class="text-purple-600 text-lg">{{ contributor.contributor_type }}</div>
70+
<div class="text-2xl font-bold text-gray-900 text-center w-full truncate px-2"
71+
title="{{ contributor.name }}">{{ contributor.name }}</div>
72+
<div class="text-purple-600 text-lg text-center">{{ contributor.contributor_type }}</div>
7273
<p class="text-gray-600 text-center px-4">Contributions: {{ contributor.contributions }}</p>
7374
<div class="flex items-center justify-center gap-3 mt-2">
7475
<a href="{{ contributor.github_url }}"
@@ -112,14 +113,16 @@ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tigh
112113
height="100px"
113114
alt="user image" />
114115
{% endif %}
115-
<div class="transition duration-200 group-hover:text-[#e74c3c] text-gray-900 text-4xl font-bold">
116+
<div class="transition duration-200 group-hover:text-[#e74c3c] text-gray-900 text-4xl font-bold text-center w-full">
116117
<a href="{% url 'profile' slug=user.user.username %}"
117-
class="transition duration-200 hover:text-[#e74c3c]">{{ user.user.username }}</a>
118+
class="transition duration-200 hover:text-[#e74c3c] block truncate px-2 max-w-full"
119+
title="{{ user.user.username }}">{{ user.user.username }}</a>
118120
</div>
119-
<div class="text-purple-600 text-2xl">{{ user.role }}</div>
121+
<div class="text-purple-600 text-2xl text-center truncate w-full px-2"
122+
title="{{ user.role }}">{{ user.role }}</div>
120123
{% if user.discounted_hourly_rate %}
121-
<p class="transition duration-200 text-gray-600 text-center px-10 py-4 bg-gray-100 rounded-md shadow-md">
122-
<span class="font-semibold text-lg text-gray-600">Discounted Hourly Rate:</span>
124+
<p class="transition duration-200 text-gray-600 text-center px-4 py-4 bg-gray-100 rounded-md shadow-md w-full">
125+
<span class="font-semibold text-lg text-gray-600 block">Discounted Hourly Rate:</span>
123126
<span class="text-green-600 font-bold text-xl">${{ user.discounted_hourly_rate }}</span>
124127
</p>
125128
{% endif %}

0 commit comments

Comments
 (0)