pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-23 00:11:09 -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

82
backend/templates/cotton/ui/button.html Normal file
View File

@@ -0,0 +1,82 @@
{% comment %}
Cotton Button Component - Django Template Version of shadcn/ui Button
Converts existing button component to use Django Cotton's component system
{% endcomment %}
{% load static %}
<!-- Cotton Button Component -->
<c-vars
variant="variant|default:'default'"
size="size|default:'default'"
button_classes="button_classes|default:''"
type="type|default:'button'"
disabled="disabled|default:''"
onclick="onclick|default:''"
x_data="x_data|default:''"
x_on="x_on|default:''"
hx_get="hx_get|default:''"
hx_post="hx_post|default:''"
hx_target="hx_target|default:''"
hx_swap="hx_swap|default:''"
icon_left="icon_left|default:''"
icon_right="icon_right|default:''"
text="text|default:''"
attrs="attrs|default:''"
/>
<button
class="
inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium
ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2
focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
{% if variant == 'default' %}
bg-primary text-primary-foreground hover:bg-primary/90
{% elif variant == 'destructive' %}
bg-destructive text-destructive-foreground hover:bg-destructive/90
{% elif variant == 'outline' %}
border border-input bg-background hover:bg-accent hover:text-accent-foreground
{% elif variant == 'secondary' %}
bg-secondary text-secondary-foreground hover:bg-secondary/80
{% elif variant == 'ghost' %}
hover:bg-accent hover:text-accent-foreground
{% elif variant == 'link' %}
text-primary underline-offset-4 hover:underline
{% endif %}
{% if size == 'default' %}
h-10 px-4 py-2
{% elif size == 'sm' %}
h-9 rounded-md px-3
{% elif size == 'lg' %}
h-11 rounded-md px-8
{% elif size == 'icon' %}
h-10 w-10
{% endif %}
{{ button_classes }}
"
type="{{ type }}"
{% if onclick %}onclick="{{ onclick }}"{% endif %}
{% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
{% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
{% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
{% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
{% if x_data %}x-data="{{ x_data }}"{% endif %}
{% if x_on %}{{ x_on }}{% endif %}
{% if disabled and disabled != '' %}disabled{% endif %}
{{ attrs }}
>
{% if icon_left %}
<i class="{{ icon_left }} w-4 h-4"></i>
{% endif %}
<!-- Button Text Content -->
<c-slot name="content">
{% if text %}
{{ text }}
{% endif %}
</c-slot>
{% if icon_right %}
<i class="{{ icon_right }} w-4 h-4"></i>
{% endif %}
</button>