pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 14:11:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve the appearance of empty states on the home page

Browse Source 
Update the home page template (backend/templates/home.html) to replace default text placeholders with visually appealing, styled divs for empty states. This includes adding gradient backgrounds to park and ride sections when no images are present, and displaying custom messages and emojis for "No Parks Yet", "No Rides Yet", and "No Ratings Yet" with improved styling and layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/8pkVaei
This commit is contained in:
pac7
2025-09-21 02:00:14 +00:00
committed by pacnpal
parent 388413fe70
commit d0cfe61af3
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/targeted_element_1758419719251.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

22
backend/templates/home.html
View File

@@ -76,7 +76,7 @@
{% if park.photos.first %} {% if park.photos.first %}
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ park.photos.first.image.url }}') center/cover no-repeat;" style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ park.photos.first.image.url }}') center/cover no-repeat;"
{% else %} {% else %}
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"
{% endif %}> {% endif %}>
<div class="absolute bottom-0 left-0 right-0 p-4 text-white"> <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<div class="text-lg font-semibold"> <div class="text-lg font-semibold">
@@ -96,7 +96,11 @@
</div> </div>
</a> </a>
{% empty %} {% empty %}
<p class="text-gray-600 dark:text-gray-400">No trending parks found.</p> <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
<div class="mb-4 text-4xl">🎢</div>
<div class="text-lg font-medium text-gray-900 dark:text-white">No Parks Yet</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Parks will appear here once they're added to the database</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@@ -113,7 +117,7 @@
{% if ride.photos.first %} {% if ride.photos.first %}
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ ride.photos.first.image.url }}') center/cover no-repeat;" style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ ride.photos.first.image.url }}') center/cover no-repeat;"
{% else %} {% else %}
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"
{% endif %}> {% endif %}>
<div class="absolute bottom-0 left-0 right-0 p-4 text-white"> <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<div class="text-lg font-semibold"> <div class="text-lg font-semibold">
@@ -133,7 +137,11 @@
</div> </div>
</a> </a>
{% empty %} {% empty %}
<p class="text-gray-600 dark:text-gray-400">No trending rides found.</p> <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
<div class="mb-4 text-4xl">🎠</div>
<div class="text-lg font-medium text-gray-900 dark:text-white">No Rides Yet</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Rides will appear here once they're added to the database</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@@ -191,7 +199,11 @@
</a> </a>
{% endif %} {% endif %}
{% empty %} {% empty %}
<p class="text-gray-600 dark:text-gray-400">No rated items found.</p> <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
<div class="mb-4 text-4xl">⭐</div>
<div class="text-lg font-medium text-gray-900 dark:text-white">No Ratings Yet</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Highest rated content will appear here once users start rating</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>