.
This commit is contained in:
Ross
@@ -1,29 +1,30 @@
|
||||
<article class="box card-item" id="card-{{ card.pk }}"
|
||||
{% if background and background.image %}style="background-image: url('{{ background.image.url }}'); background-size: cover; background-position: center; position: relative;"{% endif %}>
|
||||
<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>
|
||||
<article class="card-item" id="card-{{ card.pk }}">
|
||||
<div class="toptrump-card">
|
||||
<div class="hero-image" style="background-image: url('{% if background and background.image %}{{ background.image.url }}{% endif %}');">
|
||||
{% if card.image %}
|
||||
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="display:block;margin:16px auto 0; max-width:72%; height:auto; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,0.3); border-radius:6px;">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band">{{ card.name }}</div>
|
||||
<div class="card-body">
|
||||
<div class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div>
|
||||
{% if card.facts_list %}
|
||||
<ul class="fact-list is-size-7">
|
||||
{% for fact in card.facts_list|slice:":2" %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<div class="stat-row"><div class="stat-label">Speed</div><div class="stat-bar"><div class="stat-fill" style="width:{{ card.speed }}%"></div></div></div>
|
||||
<div class="stat-row"><div class="stat-label">Weight</div><div class="stat-bar"><div class="stat-fill" style="width:{{ card.weight }}%"></div></div></div>
|
||||
<div class="stat-row"><div class="stat-label">Intelligence</div><div class="stat-bar"><div class="stat-fill" style="width:{{ card.intelligence }}%"></div></div></div>
|
||||
</div>
|
||||
<div class="buttons" style="margin-top:0.6rem">
|
||||
<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-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Preview</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>
|
||||
</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>
|
||||
{% if card.image %}
|
||||
<figure class="image is-96x96" style="position:absolute; right:0.75rem; top:0.75rem; width:96px; height:96px; background:transparent;">
|
||||
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="width:96px; height:96px; object-fit:cover; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.3);">
|
||||
</figure>
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
@@ -37,16 +37,50 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ form.facts.label }}</label>
|
||||
<div class="control">
|
||||
{{ form.facts }}
|
||||
<p class="help">One fact per line — will be shown as bullet points on the card.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ form.image.label }}</label>
|
||||
<div class="control">
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
{{ form.image }}
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">📁</span>
|
||||
<span class="file-label">Choose a file…</span>
|
||||
</span>
|
||||
<span class="file-name" style="margin-left:0.5rem">No file chosen</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
const script = document.currentScript;
|
||||
const formRoot = script && script.parentElement ? script.parentElement : document;
|
||||
const fileInputs = formRoot.querySelectorAll('input[type=file]');
|
||||
fileInputs.forEach(function(fi){
|
||||
fi.addEventListener('change', function(){
|
||||
const wrapper = fi.closest('.file');
|
||||
if(!wrapper) return;
|
||||
const label = wrapper.querySelector('.file-name');
|
||||
if(!label) return;
|
||||
if(fi.files.length === 0) label.textContent = 'No file chosen';
|
||||
else label.textContent = fi.files.length > 1 ? fi.files.length + ' files selected' : fi.files[0].name;
|
||||
});
|
||||
const outerLabel = fi.closest('.file').querySelector('.file-label');
|
||||
if(outerLabel && !outerLabel.contains(fi)){
|
||||
outerLabel.addEventListener('click', function(e){ fi.click(); });
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
|
||||
@@ -31,6 +31,16 @@
|
||||
|
||||
/* Theme toggle */
|
||||
#theme-toggle{margin-left:0.5rem}
|
||||
/* Top Trumps card styles */
|
||||
.toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
|
||||
.toptrump-card .hero-image{height:180px;background-size:cover;background-position:center}
|
||||
.toptrump-card .title-band{background:var(--accent);color:#072027;padding:0.6rem 0.75rem;text-align:center;font-weight:700;font-size:1.05rem}
|
||||
.toptrump-card .card-body{padding:0.75rem}
|
||||
.toptrump-card .stat-row{display:flex;align-items:center;gap:0.75rem;padding:0.25rem 0}
|
||||
.toptrump-card .stat-label{width:90px;font-weight:600}
|
||||
.toptrump-card .stat-bar{flex:1;height:12px;background:rgba(255,255,255,0.06);border-radius:8px;overflow:hidden}
|
||||
.toptrump-card .stat-fill{height:100%;background:linear-gradient(90deg,var(--accent),#ffdd57);}
|
||||
.toptrump-card .fact-list{margin-top:0.5rem;padding-left:1rem}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -48,6 +58,7 @@
|
||||
</div>
|
||||
<div id="messages"></div>
|
||||
{% block content %}{% endblock %}
|
||||
<div id="modal-root"></div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user