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

Add testing pages and update component attributes for enhanced interactivity

Browse Source 
Integrates Django Cotton components with new test pages, updating button and input component templates to correctly handle `x_data` and `x_on` attributes for improved interactivity.

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/J3NgjVS
This commit is contained in:
pac7
2025-09-21 13:51:06 +00:00
committed by pacnpal
parent 1294b3009e
commit cb944485b8
6 changed files with 567 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
backend/templates/pages/cotton_simple_test.html Normal file
View File

@@ -0,0 +1,64 @@
{% extends 'base/base.html' %}
{% load static %}
{% load cotton %}
{% block title %}Simple Cotton Test - ThrillWiki{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto space-y-8">
<div class="text-center">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
Simple Cotton Components Test
</h1>
<p class="text-lg text-gray-600 dark:text-gray-400">
Basic test of Cotton components
</p>
</div>
<!-- Test 1: Simple Button -->
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
<h2 class="text-xl font-semibold mb-4">1. Button Component</h2>
<div class="space-y-3">
<c-ui.button text="Test Button" />
<c-ui.button variant="outline" text="Outline Button" />
</div>
</section>
<!-- Test 2: Simple Card -->
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
<h2 class="text-xl font-semibold mb-4">2. Card Component</h2>
<c-ui.card title="Test Card" description="This is a test card">
<c-slot:content>
<p>Card content goes here.</p>
</c-slot:content>
</c-ui.card>
</section>
<!-- Test 3: Simple Input -->
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
<h2 class="text-xl font-semibold mb-4">3. Input Component</h2>
<c-ui.input placeholder="Test input field" />
</section>
<!-- Test 4: Simple Status Badge -->
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
<h2 class="text-xl font-semibold mb-4">4. Status Badge Component</h2>
<c-ui.status_badge status="OPERATIONAL" />
</section>
<!-- Success indicator -->
<section class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border border-green-200 dark:border-green-700">
<h2 class="text-xl font-semibold mb-4 text-green-800 dark:text-green-200">
<i class="fas fa-check-circle mr-2"></i>
Basic Cotton Test Complete
</h2>
<p class="text-green-700 dark:text-green-300">
If you can see this page without errors, basic Cotton components are working.
</p>
</section>
</div>
{% endblock %}