diff --git a/backend/templates/cotton/ui/button.html b/backend/templates/cotton/ui/button.html index bc9ad39b..c3ff7229 100644 --- a/backend/templates/cotton/ui/button.html +++ b/backend/templates/cotton/ui/button.html @@ -13,8 +13,8 @@ Converts existing button component to use Django Cotton's component system type="type|default:'button'" disabled="disabled|default:''" onclick="onclick|default:''" - x_data="x_data|default:''" - x_on="x_on|default:''" + x_data="x_data" + x_on="x_on" hx_get="hx_get|default:''" hx_post="hx_post|default:''" hx_target="hx_target|default:''" @@ -60,7 +60,7 @@ Converts existing button component to use Django Cotton's component system {% 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 and x_data != '' %}x-data="{{ x_data }}"{% endif %} + {% if x_data and x_data != 'x_data' %}x-data="{{ x_data }}"{% endif %} {% if x_on %}{{ x_on }}{% endif %} {% if disabled and disabled != '' %}disabled{% endif %} {{ attrs }} diff --git a/backend/templates/cotton/ui/input.html b/backend/templates/cotton/ui/input.html index 5a1e185d..b308839e 100644 --- a/backend/templates/cotton/ui/input.html +++ b/backend/templates/cotton/ui/input.html @@ -14,9 +14,9 @@ Converts existing input component to use Django Cotton's component system disabled="disabled|default:''" required="required|default:''" readonly="readonly|default:''" - x_model="x_model|default:''" - x_data="x_data|default:''" - x_on="x_on|default:''" + x_model="x_model" + x_data="x_data" + x_on="x_on" hx_get="hx_get|default:''" hx_post="hx_post|default:''" hx_target="hx_target|default:''" @@ -41,7 +41,7 @@ Converts existing input component to use Django Cotton's component system {% if required %}required{% endif %} {% if readonly %}readonly{% endif %} {% if x_model %}x-model="{{ x_model }}"{% endif %} - {% if x_data %}x-data="{{ x_data }}"{% endif %} + {% if x_data and x_data != 'x_data' %}x-data="{{ x_data }}"{% endif %} {% if x_on %}{{ x_on }}{% endif %} {% if hx_get %}hx-get="{{ hx_get }}"{% endif %} {% if hx_post %}hx-post="{{ hx_post }}"{% endif %} diff --git a/backend/templates/pages/cotton_minimal_test.html b/backend/templates/pages/cotton_minimal_test.html new file mode 100644 index 00000000..fcc30651 --- /dev/null +++ b/backend/templates/pages/cotton_minimal_test.html @@ -0,0 +1,21 @@ +{% extends 'base/base.html' %} +{% load cotton %} + +{% block title %}Minimal Cotton Test - ThrillWiki{% endblock %} + +{% block content %} +
+

Minimal Cotton Test

+ + +
+

Working Cotton Button (from enhanced_header.html):

+ + +
+ +
+

If you see buttons above, Cotton components are working correctly!

+
+
+{% endblock %} \ No newline at end of file diff --git a/backend/templates/pages/cotton_simple_test.html b/backend/templates/pages/cotton_simple_test.html new file mode 100644 index 00000000..b49622d9 --- /dev/null +++ b/backend/templates/pages/cotton_simple_test.html @@ -0,0 +1,64 @@ +{% extends 'base/base.html' %} +{% load static %} +{% load cotton %} + +{% block title %}Simple Cotton Test - ThrillWiki{% endblock %} + +{% block content %} +
+
+

+ Simple Cotton Components Test +

+

+ Basic test of Cotton components +

+
+ + +
+

1. Button Component

+ +
+ + +
+
+ + +
+

2. Card Component

+ + + +

Card content goes here.

+ + +
+ + +
+

3. Input Component

+ + +
+ + +
+

4. Status Badge Component

+ + +
+ + +
+

+ + Basic Cotton Test Complete +

+

+ If you can see this page without errors, basic Cotton components are working. +

+
+
+{% endblock %} \ No newline at end of file diff --git a/backend/templates/pages/cotton_test.html b/backend/templates/pages/cotton_test.html new file mode 100644 index 00000000..852f3f14 --- /dev/null +++ b/backend/templates/pages/cotton_test.html @@ -0,0 +1,460 @@ +{% extends 'base/base.html' %} +{% load static %} +{% load cotton %} + +{% block title %}Cotton Components Test - ThrillWiki{% endblock %} + +{% block content %} +
+
+

+ Cotton Components Test Suite +

+

+ Testing all 9 Phase 1 Cotton Components +

+
+ + +
+

+ + 1. Button Component Tests +

+ +
+ +
+

Variants

+
+ + + + + +
+
+ + +
+

Sizes

+
+ + + + +
+
+ + +
+

Interactive

+
+ + +
+ HTMX result will appear here +
+
+
+
+
+ + +
+

+ + 2. Card Component Tests +

+ +
+ + + +

+ This is the main content area of the card component. +

+ + +
+ + +
+ + + + + + +
+

Complex Card

+ +
+ + +
+ +

+ Testing nested components within cards. +

+
+ + +
+
+ + +
+

+ + 3. Input Component Tests +

+ +
+
+

Input Types

+ + + + +
+ +
+

Alpine.js Integration

+ +

+ Value: +

+ +
+ HTMX input result +
+
+
+
+ + +
+

+ + 4. Status Badge Component Tests +

+ +
+
+

Statuses

+
+ + + + +
+
+ +
+

Sizes

+
+ + + +
+
+ +
+

Custom Content

+ + Custom Status Text + +
+
+
+ + +
+

+ + 5. Pagination Component Tests +

+ +
+

+ Testing pagination with mock page object data: +

+ + +
+ {% with mock_paginator=page_obj %} + + + +
+
+ + Previous + + + Next + +
+ + +
+ {% endwith %} +
+
+
+ + +
+

+ + 6. Search Form Component Tests +

+ +
+ + +
+ + +
+ +
+ +
+ + +
+
+ + + +
+ + +
+ + +
+
+ + +
+

+ + 7. Login Form Component Tests +

+ +
+
+

Test Login Form

+ + + +
+ HTMX login form result will appear here +
+
+
+
+ + +
+

+ + 8 & 9. Turnstile Widget Component Tests +

+ +
+
+

Normal Turnstile Widget

+
+ +
+
+ +
+

Empty Turnstile Widget (DEBUG Mode)

+
+ +
+
+
+
+ + +
+

+ + Test Results Summary +

+ +
+
+
9
+

Components Tested

+
+
+
?
+

JavaScript Status

+
+
+
✓
+

Responsive Design

+
+
+ +
+

JavaScript Test Results:

+
+
Running JavaScript tests...
+
+
+
+
+ + + +{% endblock %} \ No newline at end of file diff --git a/backend/thrillwiki/urls.py b/backend/thrillwiki/urls.py index 2a2946e7..99cd1bfa 100644 --- a/backend/thrillwiki/urls.py +++ b/backend/thrillwiki/urls.py @@ -71,6 +71,21 @@ urlpatterns = [ TemplateView.as_view(template_name="pages/privacy.html"), name="privacy", ), + path( + "cotton-test/", + TemplateView.as_view(template_name="pages/cotton_test.html"), + name="cotton_test", + ), + path( + "cotton-simple/", + TemplateView.as_view(template_name="pages/cotton_simple_test.html"), + name="cotton_simple_test", + ), + path( + "cotton-minimal/", + TemplateView.as_view(template_name="pages/cotton_minimal_test.html"), + name="cotton_minimal_test", + ), # Custom authentication URLs first (to override allauth defaults) path("accounts/", include("apps.accounts.urls")), # Default allauth URLs (for social auth and other features)