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

Add BackgroundImage model and enhance card templates with dynamic backgrounds

Browse Source
This commit is contained in:
Ross
2025-12-04 22:16:33 +00:00
parent 33fbae9426
commit d299f7ffd3
12 changed files with 253 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/cards/_card_item.html
+7 -1
View File
@@ -1,4 +1,5 @@
<article class="box card-item" id="card-{{ card.pk }}">
<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>
@@ -20,4 +21,9 @@
<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>
templates/cards/_cards_list.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="columns is-multiline">
{% 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 background=background %}
</div>
{% empty %}
<div class="notification is-warning">No dinosaurs yet — add one!</div>
templates/cards/base.html
+54 -2
View File
@@ -7,19 +7,71 @@
<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>
/* Theme variables */
:root{
--bg:#ffffff;
--text:#0a0a0a;
--muted:#4a4a4a;
--card-bg:#ffffff;
--accent:#00d1b2;
}
[data-theme="dark"]{
--bg:#0b0f13;
--text:#e6eef3;
--muted:#9aa8b0;
--card-bg:#0f1620;
--accent:#79ffd4;
}
body{background:var(--bg); color:var(--text)}
.app-container{padding:1.5rem}
.card-item{min-height:140px}
.card-item{min-height:140px; background:var(--card-bg); color:var(--text)}
.highlight-new{animation: highlight 1.6s ease}
@keyframes highlight{0%{background:lavenderblush}100%{background:transparent}}
/* Theme toggle */
#theme-toggle{margin-left:0.5rem}
</style>
</head>
<body>
<section class="section">
<div class="container app-container">
<h1 class="title">TopTrumps — Dinosaurs</h1>
<div class="level">
<div class="level-left">
<h1 class="title">TopTrumps — Dinosaurs</h1>
</div>
<div class="level-right">
<div class="level-item">
<button id="theme-toggle" class="button is-small" aria-pressed="false">Toggle theme</button>
</div>
</div>
</div>
<div id="messages"></div>
{% block content %}{% endblock %}
</div>
</section>
</body>
<script>
(function(){
const root = document.documentElement;
const toggle = document.getElementById('theme-toggle');
function applyTheme(t){
if(t==='dark') root.setAttribute('data-theme','dark');
else root.removeAttribute('data-theme');
if(toggle) toggle.setAttribute('aria-pressed', t==='dark');
}
// initial: localStorage -> prefers-color-scheme -> light
const stored = localStorage.getItem('toptrumps-theme');
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(stored || (prefersDark ? 'dark' : 'light'));
if(toggle){
toggle.addEventListener('click', ()=>{
const current = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
const next = current === 'dark' ? 'light' : 'dark';
applyTheme(next);
localStorage.setItem('toptrumps-theme', next);
});
}
})();
</script>
</html>