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

.

Browse Source
This commit is contained in:
Ross
2025-12-05 11:06:21 +00:00
parent 09be93e8b6
commit 4ce91f6390
9 changed files with 118 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_item.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="toptrump-card">
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif 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;">
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
{% endif %}
</div>
<div class="title-band">{{ card.name }}</div>
cards/templates/cards/_card_preview.html
+1 -1
View File
@@ -9,7 +9,7 @@
{# Hero / image banner using background image if available #}
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}');">
{% if card.image %}
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; display:block; margin:18px auto 0; max-width:78%; height:auto; object-fit:contain; box-shadow:0 6px 18px rgba(0,0,0,0.35); border-radius:6px;">
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
{% endif %}
</div>
<div class="title-band">{{ card.name }}</div>
cards/templates/cards/_form.html
+33 -2
View File
@@ -64,10 +64,41 @@
<div class="field">
<label class="label">{{ form.background.label }}</label>
<div class="control">
<div class="select is-fullwidth">{{ form.background }}</div>
<p class="help">Optional: choose a background image to use for this card.</p>
<div style="display:none">{{ form.background }}</div>
<div class="background-picker">
<div class="bg-options">
<div class="bg-option" data-bg-id="" role="button" tabindex="0">Use site default</div>
{% for bg in backgrounds %}
<div class="bg-option{% if form.instance.background and form.instance.background.pk == bg.pk %} selected{% endif %}" data-bg-id="{{ bg.pk }}" title="{{ bg.title|default:'Background' }}">
<img src="{{ bg.image.url }}" alt="{{ bg.title }}">
</div>
{% endfor %}
</div>
<p class="help">Optional: choose a background image to use for this card.</p>
</div>
</div>
</div>
<script>
(function(){
const script = document.currentScript;
const root = script && script.parentElement ? script.parentElement : document;
const picker = root.querySelector('.background-picker');
if(!picker) return;
const select = root.querySelector('select[name="background"]');
const options = picker.querySelectorAll('.bg-option');
function clearSelected(){ options.forEach(o=>o.classList.remove('selected')); }
options.forEach(function(opt){
opt.addEventListener('click', function(){
const id = opt.getAttribute('data-bg-id');
clearSelected();
opt.classList.add('selected');
if(select){ select.value = id || '';
select.dispatchEvent(new Event('change', { bubbles: true }));
}
});
});
})();
</script>
<script>
(function(){
// Attach to file inputs within this form fragment and update the .file-name text
cards/templates/cards/base.html
+24
View File
@@ -34,6 +34,30 @@
/* 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}
/* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
.toptrump-card .hero-image img.card-hero-img{
display:block;
margin:8px auto 0;
width:92%;
height:140px;
object-fit:cover;
border-radius:6px;
box-shadow:none;
}
/* Star rating visuals (app-level) */
.star { font-size:0.95rem; display:inline-block; line-height:1; margin-left:2px; }
.star.full { color:#ffdd57; }
.star.empty { color:rgba(255,255,255,0.25); }
.star.half { color:rgba(255,255,255,0.25); position:relative; display:inline-block; }
.star.half::before { content: '★'; color:#ffdd57; position:absolute; left:0; top:0; width:50%; overflow:hidden; display:inline-block; }
.stat-value { text-align:right; min-width:6.5rem }
/* Background picker thumbnails (app-level) */
.background-picker{margin-top:0.5rem}
.background-picker .bg-options{display:flex;gap:0.5rem;flex-wrap:wrap}
.background-picker .bg-option{width:64px;height:48px;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;color:#222;padding:4px;border-radius:4px}
.background-picker .bg-option img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}
.background-picker .bg-option.selected{outline:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.background-picker .bg-option[role="button"]{font-size:0.8rem;padding:6px 8px}
.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}
cards/views.py
+7 -5
View File
@@ -20,6 +20,7 @@ def card_list(request):
def card_create(request):
background = BackgroundImage.get_active() if BackgroundImage.objects.exists() else None
backgrounds = BackgroundImage.objects.all()
if request.method == 'POST':
form = DinosaurForm(request.POST, request.FILES)
@@ -28,25 +29,26 @@ def card_create(request):
if is_htmx(request):
card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
# Also return an out-of-band fragment to replace/clear the form container
form_html = render_to_string('cards/_form.html', {'form': DinosaurForm()}, request=request)
form_html = render_to_string('cards/_form.html', {'form': DinosaurForm(), 'background': background, 'backgrounds': backgrounds}, request=request)
oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
return HttpResponse(card_html + oob)
return redirect('cards:list')
else:
if is_htmx(request):
# Return the form as an out-of-band fragment so it updates the form container
form_html = render_to_string('cards/_form.html', {'form': form}, request=request)
form_html = render_to_string('cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds}, request=request)
oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
return HttpResponse(oob)
else:
form = DinosaurForm()
return render(request, 'cards/_form.html', {'form': form, 'background': background})
return render(request, 'cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds})
def card_edit(request, pk):
card = get_object_or_404(Dinosaur, pk=pk)
background = BackgroundImage.get_active() if BackgroundImage.objects.exists() else None
backgrounds = BackgroundImage.objects.all()
if request.method == 'POST':
form = DinosaurForm(request.POST, request.FILES, instance=card)
if form.is_valid():
@@ -59,13 +61,13 @@ def card_edit(request, pk):
return redirect('cards:list')
else:
if is_htmx(request):
form_html = render_to_string('cards/_form.html', {'form': form, 'card': card}, request=request)
form_html = render_to_string('cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds}, request=request)
oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
return HttpResponse(oob)
else:
form = DinosaurForm(instance=card)
return render(request, 'cards/_form.html', {'form': form, 'card': card, 'background': background})
return render(request, 'cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds})
def card_delete(request, pk):
db.sqlite3
BIN
View File
Binary file not shown.
templates/cards/_card_item.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="toptrump-card">
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif 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;">
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
{% endif %}
</div>
<div class="title-band">{{ card.name }}</div>
templates/cards/_form.html
+34 -2
View File
@@ -63,10 +63,42 @@
<div class="field">
<label class="label">{{ form.background.label }}</label>
<div class="control">
<div class="select is-fullwidth">{{ form.background }}</div>
<p class="help">Optional: choose a background image to use for this card.</p>
<div style="display:none">{{ form.background }}</div>
<div class="background-picker">
<div class="bg-options">
<div class="bg-option" data-bg-id="" role="button" tabindex="0">Use site default</div>
{% for bg in backgrounds %}
<div class="bg-option{% if form.instance.background and form.instance.background.pk == bg.pk %} selected{% endif %}" data-bg-id="{{ bg.pk }}" title="{{ bg.title|default:'Background' }}">
<img src="{{ bg.image.url }}" alt="{{ bg.title }}">
</div>
{% endfor %}
</div>
<p class="help">Optional: choose a background image to use for this card.</p>
</div>
</div>
</div>
<script>
(function(){
const script = document.currentScript;
const root = script && script.parentElement ? script.parentElement : document;
const picker = root.querySelector('.background-picker');
if(!picker) return;
const select = root.querySelector('select[name="background"]');
const options = picker.querySelectorAll('.bg-option');
function clearSelected(){ options.forEach(o=>o.classList.remove('selected')); }
options.forEach(function(opt){
opt.addEventListener('click', function(){
const id = opt.getAttribute('data-bg-id');
clearSelected();
opt.classList.add('selected');
if(select){ select.value = id || '';
// dispatch change for any listeners
select.dispatchEvent(new Event('change', { bubbles: true }));
}
});
});
})();
</script>
<script>
(function(){
const script = document.currentScript;
templates/cards/base.html
+17
View File
@@ -34,6 +34,23 @@
/* 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}
/* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
.toptrump-card .hero-image img.card-hero-img{
display:block;
margin:8px auto 0;
width:92%;
height:140px;
object-fit:cover;
border-radius:6px;
box-shadow:none;
}
/* Background picker thumbnails */
.background-picker{margin-top:0.5rem}
.background-picker .bg-options{display:flex;gap:0.5rem;flex-wrap:wrap}
.background-picker .bg-option{width:64px;height:48px;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;color:#222;padding:4px;border-radius:4px}
.background-picker .bg-option img{max-width:100%;max-height:100%;display:block;border-radius:2px}
.background-picker .bg-option.selected{outline:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.background-picker .bg-option[role="button"]{font-size:0.8rem;padding:6px 8px}
.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}