Enhance dinosaur forms and templates with improved styling and layout using Bulma CSS framework
This commit is contained in:
Ross
+9
-1
@@ -10,5 +10,13 @@ class DinosaurForm(forms.ModelForm):
|
||||
'speed', 'weight', 'intelligence', 'height',
|
||||
]
|
||||
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}),
|
||||
}
|
||||
|
||||
@@ -1,15 +1,23 @@
|
||||
<div class="card" id="card-{{ card.pk }}">
|
||||
<h3>{{ card.name }}</h3>
|
||||
<div><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div>
|
||||
<div>{{ card.description|linebreaksbr }}</div>
|
||||
<ul>
|
||||
<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>
|
||||
<article class="box card-item" id="card-{{ card.pk }}">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-5">{{ card.name }}</p>
|
||||
<p class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</p>
|
||||
</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>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
{% load static %}
|
||||
<div class="grid">
|
||||
<div class="columns is-multiline">
|
||||
{% for card in cards %}
|
||||
{% include 'cards/_card_item.html' with card=card %}
|
||||
<div class="column is-3-desktop is-4-tablet is-6-mobile">
|
||||
{% include 'cards/_card_item.html' with card=card %}
|
||||
</div>
|
||||
{% empty %}
|
||||
<p>No dinosaurs yet — add one!</p>
|
||||
<div class="notification is-warning">No dinosaurs yet — add one!</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -7,41 +7,76 @@
|
||||
{% endif %}
|
||||
{% csrf_token %}
|
||||
{{ form.non_field_errors }}
|
||||
<div class="row">
|
||||
{{ form.name.label_tag }}<br>
|
||||
{{ form.name }}
|
||||
<div class="field">
|
||||
<label class="label">{{ form.name.label }}</label>
|
||||
<div class="control">
|
||||
{{ form.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.era.label_tag }}<br>
|
||||
{{ form.era }}
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<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="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="row">
|
||||
{{ form.diet.label_tag }}<br>
|
||||
{{ form.diet }}
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ form.description.label }}</label>
|
||||
<div class="control">
|
||||
{{ form.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.description.label_tag }}<br>
|
||||
{{ form.description }}
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ form.image.label }}</label>
|
||||
<div class="control">
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
{{ form.image }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.image.label_tag }}<br>
|
||||
{{ form.image }}
|
||||
|
||||
<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 class="field">
|
||||
<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="row">
|
||||
{{ form.speed.label_tag }} {{ form.speed }}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.weight.label_tag }} {{ form.weight }}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.intelligence.label_tag }} {{ form.intelligence }}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.height.label_tag }} {{ form.height }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<button type="submit">Save</button>
|
||||
<button type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -4,19 +4,22 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<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>
|
||||
<style>
|
||||
body{font-family:system-ui,Segoe UI,Roboto,Arial;margin:20px}
|
||||
.card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
|
||||
.controls{margin-bottom:12px}
|
||||
.grid{display:flex;flex-wrap:wrap}
|
||||
.grid .card{width:220px}
|
||||
form .row{margin-bottom:8px}
|
||||
.app-container{padding:1.5rem}
|
||||
.card-item{min-height:140px}
|
||||
.highlight-new{animation: highlight 1.6s ease}
|
||||
@keyframes highlight{0%{background:lavenderblush}100%{background:transparent}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TopTrumps — Dinosaurs</h1>
|
||||
<div id="messages"></div>
|
||||
{% block content %}{% endblock %}
|
||||
<section class="section">
|
||||
<div class="container app-container">
|
||||
<h1 class="title">TopTrumps — Dinosaurs</h1>
|
||||
<div id="messages"></div>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
{% extends 'cards/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="controls">
|
||||
<button hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
|
||||
<div class="level">
|
||||
<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 id="htmx-form"></div>
|
||||
|
||||
@@ -1,15 +1,23 @@
|
||||
<div class="card" id="card-{{ card.pk }}">
|
||||
<h3>{{ card.name }}</h3>
|
||||
<div><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div>
|
||||
<div>{{ card.description|linebreaksbr }}</div>
|
||||
<ul>
|
||||
<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>
|
||||
<article class="box card-item" id="card-{{ card.pk }}">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-5">{{ card.name }}</p>
|
||||
<p class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</p>
|
||||
</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>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
{% load static %}
|
||||
<div class="grid">
|
||||
<div class="columns is-multiline">
|
||||
{% for card in cards %}
|
||||
{% include 'cards/_card_item.html' with card=card %}
|
||||
<div class="column is-3-desktop is-4-tablet is-6-mobile">
|
||||
{% include 'cards/_card_item.html' with card=card %}
|
||||
</div>
|
||||
{% empty %}
|
||||
<p>No dinosaurs yet — add one!</p>
|
||||
<div class="notification is-warning">No dinosaurs yet — add one!</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
+65
-30
@@ -6,41 +6,76 @@
|
||||
{% endif %}
|
||||
{% csrf_token %}
|
||||
{{ form.non_field_errors }}
|
||||
<div class="row">
|
||||
{{ form.name.label_tag }}<br>
|
||||
{{ form.name }}
|
||||
<div class="field">
|
||||
<label class="label">{{ form.name.label }}</label>
|
||||
<div class="control">
|
||||
{{ form.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.era.label_tag }}<br>
|
||||
{{ form.era }}
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<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="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="row">
|
||||
{{ form.diet.label_tag }}<br>
|
||||
{{ form.diet }}
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ form.description.label }}</label>
|
||||
<div class="control">
|
||||
{{ form.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.description.label_tag }}<br>
|
||||
{{ form.description }}
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ form.image.label }}</label>
|
||||
<div class="control">
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
{{ form.image }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.image.label_tag }}<br>
|
||||
{{ form.image }}
|
||||
|
||||
<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 class="field">
|
||||
<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="row">
|
||||
{{ form.speed.label_tag }} {{ form.speed }}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.weight.label_tag }} {{ form.weight }}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.intelligence.label_tag }} {{ form.intelligence }}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ form.height.label_tag }} {{ form.height }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<button type="submit">Save</button>
|
||||
<button type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -4,19 +4,22 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<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>
|
||||
<style>
|
||||
body{font-family:system-ui,Segoe UI,Roboto,Arial;margin:20px}
|
||||
.card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
|
||||
.controls{margin-bottom:12px}
|
||||
.grid{display:flex;flex-wrap:wrap}
|
||||
.grid .card{width:220px}
|
||||
form .row{margin-bottom:8px}
|
||||
.app-container{padding:1.5rem}
|
||||
.card-item{min-height:140px}
|
||||
.highlight-new{animation: highlight 1.6s ease}
|
||||
@keyframes highlight{0%{background:lavenderblush}100%{background:transparent}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TopTrumps — Dinosaurs</h1>
|
||||
<div id="messages"></div>
|
||||
{% block content %}{% endblock %}
|
||||
<section class="section">
|
||||
<div class="container app-container">
|
||||
<h1 class="title">TopTrumps — Dinosaurs</h1>
|
||||
<div id="messages"></div>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
{% extends 'cards/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="controls">
|
||||
<button hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
|
||||
<div class="level">
|
||||
<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 id="htmx-form"></div>
|
||||
|
||||
Reference in New Issue
Block a user