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

Update website to use new reusable components for common elements

Browse Source 
Refactor HTML templates to incorporate Django Cotton components for buttons, forms, and other UI elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/55dLPZG
This commit is contained in:
pac7
2025-09-21 13:34:51 +00:00
committed by pacnpal
parent 26ff320806
commit 0cf6805c18
10 changed files with 688 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
backend/templates/cotton/ui/card.html Normal file
View File

@@ -0,0 +1,58 @@
{% comment %}
Cotton Card Component - Django Template Version of shadcn/ui Card
Converts existing card component to use Django Cotton's component system
{% endcomment %}
<!-- Cotton Card Component -->
<c-vars
card_classes="card_classes|default:''"
title="title|default:''"
description="description|default:''"
header_content="header_content|default:''"
body_content="body_content|default:''"
footer_content="footer_content|default:''"
content="content|default:''"
/>
<div class="rounded-lg border bg-card text-card-foreground shadow-sm {{ card_classes }}">
{% if title or description or header_content %}
<div class="flex flex-col space-y-1.5 p-6">
{% if title %}
<h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
{% endif %}
{% if description %}
<p class="text-sm text-muted-foreground">{{ description }}</p>
{% endif %}
<!-- Card Header Slot -->
<c-slot name="header">
{% if header_content %}
{{ header_content|safe }}
{% endif %}
</c-slot>
</div>
{% endif %}
{% if content or body_content %}
<div class="p-6 pt-0">
<!-- Card Body Content -->
<c-slot name="content">
{% if content %}
{{ content|safe }}
{% endif %}
{% if body_content %}
{{ body_content|safe }}
{% endif %}
</c-slot>
</div>
{% endif %}
{% if footer_content %}
<div class="flex items-center p-6 pt-0">
<!-- Card Footer Slot -->
<c-slot name="footer">
{{ footer_content|safe }}
</c-slot>
</div>
{% endif %}
</div>