ross/toptrumps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance dinosaur forms and templates with improved styling and layout using Bulma CSS framework

Browse Source
This commit is contained in:
Ross
2025-12-04 21:46:56 +00:00
parent 75398cf53f
commit 33fbae9426
11 changed files with 229 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/forms.py
+9 -1
View File
@@ -10,5 +10,13 @@ class DinosaurForm(forms.ModelForm):
'speed', 'weight', 'intelligence', 'height', 'speed', 'weight', 'intelligence', 'height',
] ]
widgets = { widgets = {
'description': forms.Textarea(attrs={'rows': 3}), 'name': forms.TextInput(attrs={'class': 'input', 'placeholder': 'T. rex'}),
'era': forms.Select(attrs={'class': 'input'}),
'diet': forms.Select(attrs={'class': 'input'}),
'description': forms.Textarea(attrs={'class': 'textarea', 'rows': 3}),
'image': forms.ClearableFileInput(attrs={'class': 'file-input'}),
'speed': forms.NumberInput(attrs={'class': 'input', 'min': 0, 'max': 100}),
'weight': forms.NumberInput(attrs={'class': 'input', 'min': 0, 'max': 100}),
'intelligence': forms.NumberInput(attrs={'class': 'input', 'min': 0, 'max': 100}),
'height': forms.NumberInput(attrs={'class': 'input', 'min': 0, 'max': 100}),
} }
cards/templates/cards/_card_item.html
+22 -14
View File
@@ -1,15 +1,23 @@
<div class="card" id="card-{{ card.pk }}"> <article class="box card-item" id="card-{{ card.pk }}">
<h3>{{ card.name }}</h3> <div class="media">
<div><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div> <div class="media-content">
<div>{{ card.description|linebreaksbr }}</div> <p class="title is-5">{{ card.name }}</p>
<ul> <p class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</p>
<li>Speed: {{ card.speed }}</li>
<li>Weight: {{ card.weight }}</li>
<li>Intelligence: {{ card.intelligence }}</li>
<li>Height: {{ card.height }}</li>
</ul>
<div>
<button hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
<button hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
</div> </div>
</div> </div>
<div class="content">
<div>{{ card.description|linebreaksbr }}</div>
<table class="table is-fullwidth is-narrow">
<tbody>
<tr><th>Speed</th><td>{{ card.speed }}</td></tr>
<tr><th>Weight</th><td>{{ card.weight }}</td></tr>
<tr><th>Intelligence</th><td>{{ card.intelligence }}</td></tr>
<tr><th>Height</th><td>{{ card.height }}</td></tr>
</tbody>
</table>
<div class="buttons">
<button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
<button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
</div>
</div>
</article>
cards/templates/cards/_cards_list.html
+4 -2
View File
@@ -1,8 +1,10 @@
{% load static %} {% load static %}
<div class="grid"> <div class="columns is-multiline">
{% for card in cards %} {% for card in cards %}
<div class="column is-3-desktop is-4-tablet is-6-mobile">
{% include 'cards/_card_item.html' with card=card %} {% include 'cards/_card_item.html' with card=card %}
</div>
{% empty %} {% empty %}
<p>No dinosaurs yet — add one!</p> <div class="notification is-warning">No dinosaurs yet — add one!</div>
{% endfor %} {% endfor %}
</div> </div>
cards/templates/cards/_form.html
+58 -23
View File
@@ -7,41 +7,76 @@
{% endif %} {% endif %}
{% csrf_token %} {% csrf_token %}
{{ form.non_field_errors }} {{ form.non_field_errors }}
<div class="row"> <div class="field">
{{ form.name.label_tag }}<br> <label class="label">{{ form.name.label }}</label>
<div class="control">
{{ form.name }} {{ form.name }}
</div> </div>
<div class="row">
{{ form.era.label_tag }}<br>
{{ form.era }}
</div> </div>
<div class="row">
{{ form.diet.label_tag }}<br> <div class="field is-horizontal">
{{ form.diet }} <div class="field-body">
<div class="field">
<label class="label">{{ form.era.label }}</label>
<div class="control">
<div class="select is-fullwidth">{{ form.era }}</div>
</div> </div>
<div class="row"> </div>
{{ form.description.label_tag }}<br> <div class="field">
<label class="label">{{ form.diet.label }}</label>
<div class="control">
<div class="select is-fullwidth">{{ form.diet }}</div>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">{{ form.description.label }}</label>
<div class="control">
{{ form.description }} {{ form.description }}
</div> </div>
<div class="row"> </div>
{{ form.image.label_tag }}<br>
<div class="field">
<label class="label">{{ form.image.label }}</label>
<div class="control">
<div class="file has-name">
<label class="file-label">
{{ form.image }} {{ form.image }}
</label>
</div> </div>
<div class="row">
{{ form.speed.label_tag }} {{ form.speed }}
</div> </div>
<div class="row">
{{ form.weight.label_tag }} {{ form.weight }}
</div> </div>
<div class="row">
{{ form.intelligence.label_tag }} {{ form.intelligence }} <div class="field is-horizontal">
<div class="field-body">
<div class="field">
<label class="label">{{ form.speed.label }}</label>
<div class="control">{{ form.speed }}</div>
</div> </div>
<div class="row"> <div class="field">
{{ form.height.label_tag }} {{ form.height }} <label class="label">{{ form.weight.label }}</label>
<div class="control">{{ form.weight }}</div>
</div>
<div class="field">
<label class="label">{{ form.intelligence.label }}</label>
<div class="control">{{ form.intelligence }}</div>
</div>
<div class="field">
<label class="label">{{ form.height.label }}</label>
<div class="control">{{ form.height }}</div>
</div>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary" type="submit">Save</button>
</div>
<div class="control">
<button class="button is-light" type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
</div> </div>
<div class="row">
<button type="submit">Save</button>
<button type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
</div> </div>
</form> </form>
</div> </div>
cards/templates/cards/base.html
+10 -7
View File
@@ -4,19 +4,22 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>TopTrumps - Dinosaurs</title> <title>TopTrumps - Dinosaurs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<script src="https://unpkg.com/htmx.org@1.9.5"></script> <script src="https://unpkg.com/htmx.org@1.9.5"></script>
<style> <style>
body{font-family:system-ui,Segoe UI,Roboto,Arial;margin:20px} .app-container{padding:1.5rem}
.card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px} .card-item{min-height:140px}
.controls{margin-bottom:12px} .highlight-new{animation: highlight 1.6s ease}
.grid{display:flex;flex-wrap:wrap} @keyframes highlight{0%{background:lavenderblush}100%{background:transparent}}
.grid .card{width:220px}
form .row{margin-bottom:8px}
</style> </style>
</head> </head>
<body> <body>
<h1>TopTrumps — Dinosaurs</h1> <section class="section">
<div class="container app-container">
<h1 class="title">TopTrumps — Dinosaurs</h1>
<div id="messages"></div> <div id="messages"></div>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div>
</section>
</body> </body>
</html> </html>
cards/templates/cards/list.html
+6 -2
View File
@@ -1,8 +1,12 @@
{% extends 'cards/base.html' %} {% extends 'cards/base.html' %}
{% block content %} {% block content %}
<div class="controls"> <div class="level">
<button hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button> <div class="level-left">
<div class="level-item">
<button class="button is-primary" hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
</div>
</div>
</div> </div>
<div id="htmx-form"></div> <div id="htmx-form"></div>
templates/cards/_card_item.html
+22 -14
View File
@@ -1,15 +1,23 @@
<div class="card" id="card-{{ card.pk }}"> <article class="box card-item" id="card-{{ card.pk }}">
<h3>{{ card.name }}</h3> <div class="media">
<div><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div> <div class="media-content">
<div>{{ card.description|linebreaksbr }}</div> <p class="title is-5">{{ card.name }}</p>
<ul> <p class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</p>
<li>Speed: {{ card.speed }}</li>
<li>Weight: {{ card.weight }}</li>
<li>Intelligence: {{ card.intelligence }}</li>
<li>Height: {{ card.height }}</li>
</ul>
<div>
<button hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
<button hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
</div> </div>
</div> </div>
<div class="content">
<div>{{ card.description|linebreaksbr }}</div>
<table class="table is-fullwidth is-narrow">
<tbody>
<tr><th>Speed</th><td>{{ card.speed }}</td></tr>
<tr><th>Weight</th><td>{{ card.weight }}</td></tr>
<tr><th>Intelligence</th><td>{{ card.intelligence }}</td></tr>
<tr><th>Height</th><td>{{ card.height }}</td></tr>
</tbody>
</table>
<div class="buttons">
<button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
<button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
</div>
</div>
</article>
templates/cards/_cards_list.html
+4 -2
View File
@@ -1,8 +1,10 @@
{% load static %} {% load static %}
<div class="grid"> <div class="columns is-multiline">
{% for card in cards %} {% for card in cards %}
<div class="column is-3-desktop is-4-tablet is-6-mobile">
{% include 'cards/_card_item.html' with card=card %} {% include 'cards/_card_item.html' with card=card %}
</div>
{% empty %} {% empty %}
<p>No dinosaurs yet — add one!</p> <div class="notification is-warning">No dinosaurs yet — add one!</div>
{% endfor %} {% endfor %}
</div> </div>
templates/cards/_form.html
+58 -23
View File
@@ -6,41 +6,76 @@
{% endif %} {% endif %}
{% csrf_token %} {% csrf_token %}
{{ form.non_field_errors }} {{ form.non_field_errors }}
<div class="row"> <div class="field">
{{ form.name.label_tag }}<br> <label class="label">{{ form.name.label }}</label>
<div class="control">
{{ form.name }} {{ form.name }}
</div> </div>
<div class="row">
{{ form.era.label_tag }}<br>
{{ form.era }}
</div> </div>
<div class="row">
{{ form.diet.label_tag }}<br> <div class="field is-horizontal">
{{ form.diet }} <div class="field-body">
<div class="field">
<label class="label">{{ form.era.label }}</label>
<div class="control">
<div class="select is-fullwidth">{{ form.era }}</div>
</div> </div>
<div class="row"> </div>
{{ form.description.label_tag }}<br> <div class="field">
<label class="label">{{ form.diet.label }}</label>
<div class="control">
<div class="select is-fullwidth">{{ form.diet }}</div>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">{{ form.description.label }}</label>
<div class="control">
{{ form.description }} {{ form.description }}
</div> </div>
<div class="row"> </div>
{{ form.image.label_tag }}<br>
<div class="field">
<label class="label">{{ form.image.label }}</label>
<div class="control">
<div class="file has-name">
<label class="file-label">
{{ form.image }} {{ form.image }}
</label>
</div> </div>
<div class="row">
{{ form.speed.label_tag }} {{ form.speed }}
</div> </div>
<div class="row">
{{ form.weight.label_tag }} {{ form.weight }}
</div> </div>
<div class="row">
{{ form.intelligence.label_tag }} {{ form.intelligence }} <div class="field is-horizontal">
<div class="field-body">
<div class="field">
<label class="label">{{ form.speed.label }}</label>
<div class="control">{{ form.speed }}</div>
</div> </div>
<div class="row"> <div class="field">
{{ form.height.label_tag }} {{ form.height }} <label class="label">{{ form.weight.label }}</label>
<div class="control">{{ form.weight }}</div>
</div>
<div class="field">
<label class="label">{{ form.intelligence.label }}</label>
<div class="control">{{ form.intelligence }}</div>
</div>
<div class="field">
<label class="label">{{ form.height.label }}</label>
<div class="control">{{ form.height }}</div>
</div>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary" type="submit">Save</button>
</div>
<div class="control">
<button class="button is-light" type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
</div> </div>
<div class="row">
<button type="submit">Save</button>
<button type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
</div> </div>
</form> </form>
</div> </div>
templates/cards/base.html
+10 -7
View File
@@ -4,19 +4,22 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>TopTrumps - Dinosaurs</title> <title>TopTrumps - Dinosaurs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<script src="https://unpkg.com/htmx.org@1.9.5"></script> <script src="https://unpkg.com/htmx.org@1.9.5"></script>
<style> <style>
body{font-family:system-ui,Segoe UI,Roboto,Arial;margin:20px} .app-container{padding:1.5rem}
.card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px} .card-item{min-height:140px}
.controls{margin-bottom:12px} .highlight-new{animation: highlight 1.6s ease}
.grid{display:flex;flex-wrap:wrap} @keyframes highlight{0%{background:lavenderblush}100%{background:transparent}}
.grid .card{width:220px}
form .row{margin-bottom:8px}
</style> </style>
</head> </head>
<body> <body>
<h1>TopTrumps — Dinosaurs</h1> <section class="section">
<div class="container app-container">
<h1 class="title">TopTrumps — Dinosaurs</h1>
<div id="messages"></div> <div id="messages"></div>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div>
</section>
</body> </body>
</html> </html>
templates/cards/list.html
+6 -2
View File
@@ -1,8 +1,12 @@
{% extends 'cards/base.html' %} {% extends 'cards/base.html' %}
{% block content %} {% block content %}
<div class="controls"> <div class="level">
<button hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button> <div class="level-left">
<div class="level-item">
<button class="button is-primary" hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
</div>
</div>
</div> </div>
<div id="htmx-form"></div> <div id="htmx-form"></div>