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-06 22:41:44 +00:00
parent e5d1f1e83f
commit b1364a6eea
3 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_hero_styles.html
+2 -2
View File
@@ -10,10 +10,10 @@
.card-canonical .toptrump-card { .card-canonical .toptrump-card {
width: var(--card-width, 83mm); width: var(--card-width, 83mm);
height: var(--card-height, 120mm); height: var(--card-height, 130mm);
} }
.toptrump-card .hero-image{height:calc(var(--card-height, 120mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden} .toptrump-card .hero-image{height:calc(var(--card-height, 130mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
/* For most designs center the dino image absolutely and allow an inline /* For most designs center the dino image absolutely and allow an inline
scale transform (the fragments provide `transform: translate(...) scale(...)`). */ scale transform (the fragments provide `transform: translate(...) scale(...)`). */
cards/templates/cards/_card_inner_design3.html
+7 -7
View File
@@ -6,7 +6,7 @@
{% if card.image %} {% if card.image %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;"> <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); border-radius:8px; z-index:1;">
{% endif %} {% endif %}
</div> </div>
<div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div> <div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
@@ -37,16 +37,16 @@
</div> </div>
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div> <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
{% if card.facts_list %} {% if card.facts_list %}
<div style="margin-top:0.5rem;"> <div style="margin-top:0.25rem;">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"> <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
<span style="background:#ffd54f;color:#222;padding:4px;border-radius:6px;font-weight:800;font-size:0.9rem;">✨</span> <span style="background:#ffd54f;color:#222;padding:2px;border-radius:4px;font-weight:700;font-size:0.8rem;line-height:1;">✨</span>
<strong style="font-size:0.95rem;">Fun facts</strong> <strong style="font-size:0.9rem;line-height:1;">Fun facts</strong>
</div> </div>
<div style="background:#fbfcfd;border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:8px;"> <div style="background:#fbfcfd;border:1px solid rgba(0,0,0,0.04);padding:6px;border-radius:8px;">
<ul style="margin:0;padding:0 0 0 0.85rem;list-style:none;display:flex;flex-direction:column;gap:6px;"> <ul style="margin:0;padding:0 0 0 0.85rem;list-style:none;display:flex;flex-direction:column;gap:6px;">
{% for fact in card.facts_list %} {% for fact in card.facts_list %}
<li style="display:flex;gap:8px;align-items:flex-start;"> <li style="display:flex;gap:8px;align-items:flex-start;">
<span style="color:#ffb74d;font-size:1.05rem;line-height:1;margin-top:2px;">•</span> <span style="color:#ffb74d;font-size:0.95rem;line-height:1;margin-top:1px;">•</span>
<span style="flex:1;color:#333;">{{ fact }}</span> <span style="flex:1;color:#333;">{{ fact }}</span>
</li> </li>
{% endfor %} {% endfor %}
cards/templates/cards/printable.html
+37 -31
View File
@@ -6,7 +6,7 @@
<title>Printable cards</title> <title>Printable cards</title>
<style> <style>
/* Canonical card size for printable view */ /* Canonical card size for printable view */
:root{ --card-width: 83mm; --card-height: 120mm; } :root{ --card-width: 83mm; --card-height: 130mm; }
/* A4 portrait: 210mm x 297mm. Use mm units to better match print sizing. */ /* A4 portrait: 210mm x 297mm. Use mm units to better match print sizing. */
@page { size: A4 portrait; margin: 12mm; } @page { size: A4 portrait; margin: 12mm; }
html,body{height:100%; margin:0; padding:0;} html,body{height:100%; margin:0; padding:0;}
@@ -44,8 +44,12 @@
left:50%; left:50%;
top:50%; top:50%;
transform-origin:center; transform-origin:center;
min-width:110%; /* Reduce the minimum size used for print so the image doesn't
min-height:110%; intrude into neighbouring cards when printing multiple cards
per sheet. 100% keeps the image filling the hero area but
avoids the slight overlap caused by 110%. */
min-width:100%;
min-height:100%;
width:auto; width:auto;
height:auto; height:auto;
object-fit:cover; object-fit:cover;
@@ -116,35 +120,37 @@
<div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, var(--card-width)); gap:8mm;"> <div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, var(--card-width)); gap:8mm;">
{% for card in page_cards %} {% for card in page_cards %}
<div class="print-card"> <div class="print-card">
{% if design == 1 %} <div class="card-canonical">
{% include 'cards/_card_inner_design1.html' %} {% if design == 1 %}
{% elif design == 2 %} {% include 'cards/_card_inner_design1.html' %}
{% include 'cards/_card_inner_design2.html' %} {% elif design == 2 %}
{% elif design == 3 %} {% include 'cards/_card_inner_design2.html' %}
{% include 'cards/_card_inner_design3.html' %} {% elif design == 3 %}
{% elif design == 4 %} {% include 'cards/_card_inner_design3.html' %}
{% include 'cards/_card_inner_design4.html' %} {% elif design == 4 %}
{% elif design == 5 %} {% include 'cards/_card_inner_design4.html' %}
{% include 'cards/_card_inner_design5.html' %} {% elif design == 5 %}
{% else %} {% include 'cards/_card_inner_design5.html' %}
<div class="toptrump-card design-{{ design }}"> {% else %}
<div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% elif background and background.image %}url('{{ background.image.url }}'){% endif %}; background-size:cover; background-position:center"> <div class="toptrump-card design-{{ design }}">
{% if card.background and card.background.image or background and background.image %} <div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% elif background and background.image %}url('{{ background.image.url }}'){% endif %}; background-size:cover; background-position:center">
<img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;"> {% if card.background and card.background.image or background and background.image %}
{% endif %} <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
{% if card.image %} {% endif %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}"> {% if card.image %}
{% endif %} <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
{% endif %}
</div>
<div style="padding:6px">
<div style="font-weight:800; font-size:14pt">{{ card.name }}</div>
<div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
{% if card.facts_list %}
<div class="caption">{{ card.facts_list|join:', ' }}</div>
{% endif %}
</div>
</div> </div>
<div style="padding:6px"> {% endif %}
<div style="font-weight:800; font-size:14pt">{{ card.name }}</div> </div>
<div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
{% if card.facts_list %}
<div class="caption">{{ card.facts_list|join:', ' }}</div>
{% endif %}
</div>
</div>
{% endif %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>