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 20:26:46 +00:00
parent 78c7c1d502
commit 9dd761aa41
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_preview_design4.html
+1 -1
View File
@@ -55,7 +55,7 @@
</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: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px;">
{% if card.image %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform: translate(-50%,-50%) scale({{ card.image_scale }}); transform-origin:center; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform: scale({{ card.image_scale }}); transform-origin:center; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
{% endif %}
</div>
<div style="padding:8px 10px; border-top:1px solid rgba(0,0,0,0.04); background:#fafafa;">
cards/templates/cards/base.html
+22 -2
View File
@@ -50,9 +50,29 @@
}
/* Larger hero image for design-4 to match list view scale behavior */
.toptrump-card.design-4 .hero-image { height: 560px; }
/* For design-4 use a non-cropping image layout so wide dinos aren't clipped */
.toptrump-card.design-4 .hero-image{ overflow:hidden; display:flex; align-items:center; justify-content:center }
.toptrump-card.design-4 .card-hero-img{
position:static !important;
left:auto !important;
top:auto !important;
transform:none !important;
display:block;
margin:0 auto;
/* Allow a modest overflow so the image is cropped by the hero's
`overflow:hidden` — this intentionally crops ~20% horizontally */
width:120% !important;
max-width:none !important;
max-height:120% !important;
object-position:center center !important;
height:auto;
object-fit:contain;
}
.toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
/* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
.toptrump-card .hero-image img.card-hero-img{
/* Hero image: make the dinosaur image larger, cover the banner and remove shadow
Exclude design-4 here so that design-4 can use `object-fit: contain` and
avoid horizontal cropping (design-4 has its own layout rules above). */
.toptrump-card:not(.design-4) .hero-image img.card-hero-img{
position:absolute;
left:50%;
top:50%;