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:06:48 +00:00
parent aa4baae500
commit 3e748f6080
5 changed files with 29 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_hero_styles.html
+19 -1
View File
@@ -1,6 +1,24 @@
<style>
/* Canonical card size variables used by preview and printable views so
the card internal layout is identical between screen and print. These
defaults can be overridden by wrappers if needed. Units are in mm to
match print sizing. */
:root{
--card-width: 83mm; /* default card width */
--card-height: 120mm; /* default card height */
}
/* Shared hero image rules used by both preview (base.html) and printable view */
.toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.toptrump-card{
width:var(--card-width);
height:var(--card-height);
box-sizing:border-box;
overflow:hidden;
border-radius:8px;
background-clip:padding-box;
}
.toptrump-card .hero-image{height:calc(var(--card-height) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
/* For most designs center the dino image absolutely and allow an inline
scale transform (the fragments provide `transform: translate(...) scale(...)`). */
cards/templates/cards/_card_inner_design1.html
+1 -1
View File
@@ -1,7 +1,7 @@
{# Shared inner fragment for Design 1 - core card markup only #}
<div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
<div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></div>
<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 %}'); background-size:cover; background-position:center; height:200px; position:relative; overflow:hidden;">
<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 %}'); background-size:cover; background-position:center; position:relative; overflow:hidden;">
{# Print fallback: actual <img> element that is hidden on screen but shown by `printable.html` via its print stylesheet. #}
{% if card.background and card.background.image or background and background.image %}
<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;">
cards/templates/cards/_card_inner_design2.html
+1 -1
View File
@@ -1,6 +1,6 @@
{# Shared inner fragment for Design 2 - core card markup only #}
<div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
<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 %}'); background-size:cover; background-position:center; height:220px; filter:brightness(0.7); position:relative; overflow:hidden;">
<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 %}'); background-size:cover; background-position:center; filter:brightness(0.7); position:relative; overflow:hidden;">
{% if card.background and card.background.image or background and background.image %}
<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;">
{% endif %}
cards/templates/cards/_card_inner_design3.html
+1 -1
View File
@@ -1,6 +1,6 @@
{# Shared inner fragment for Design 3 - core card markup only #}
<div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
<div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; filter:brightness(0.9); position:relative; overflow:hidden;">
<div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; filter:brightness(0.9); position:relative; overflow:hidden;">
{% if card.background and card.background.image or background and background.image %}
<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;">
{% endif %}
cards/templates/cards/printable.html
+7 -24
View File
@@ -10,31 +10,14 @@
html,body{height:100%; margin:0; padding:0;}
body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#111}
.sheet{width:210mm; min-height:297mm; box-sizing:border-box; padding:6mm; display:block}
.cards-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:8mm}
.print-card{break-inside:avoid; page-break-inside:avoid; width:100%;}
.cards-grid{display:grid; gap:8mm; grid-auto-rows: var(--card-height); justify-content:center}
.print-card{break-inside:avoid; page-break-inside:avoid; display:flex; justify-content:center; align-items:center;}
/* Scale the toptrump-card down a bit for printing */
.toptrump-card{box-shadow:none; border:none;}
/* Force designs to sizes that fit two-up per A4 page */
.toptrump-card.design-1,
.toptrump-card.design-2,
.toptrump-card.design-3,
.toptrump-card.design-5 { width: 98%; min-height: 120mm; }
.toptrump-card.design-4 { width: 98%; min-height: 135mm; }
/* Per-page adjustments: if rendering 4-up we reduce min-heights so cards fit */
{% if per_page == 4 %}
.toptrump-card.design-1,
.toptrump-card.design-2,
.toptrump-card.design-3,
.toptrump-card.design-5 { min-height: 62mm; }
.toptrump-card.design-4 { min-height: 70mm; }
{% elif per_page == 1 %}
.toptrump-card.design-1,
.toptrump-card.design-2,
.toptrump-card.design-3,
.toptrump-card.design-5 { min-height: 180mm; }
.toptrump-card.design-4 { min-height: 220mm; }
{% endif %}
/* Card sizes are controlled by the canonical variables in
`_card_hero_styles.html` so preview and printable views keep the
same internal layout. The printable layout uses the same fixed
card dimensions and arranges them per page using the grid. */
/* Ensure hero images scale inside print cards */
.print-card .hero-image{height:auto; min-height:40mm;}
.print-card img.card-hero-img{max-width:100%; height:auto; object-fit:contain}
@@ -104,7 +87,7 @@
{% for page_cards in pages %}
<div class="sheet">
<div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, 1fr); gap:8mm;">
<div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, var(--card-width)); gap:8mm;">
{% for card in page_cards %}
<div class="print-card">
{% if design == 1 %}