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

Enhance design-4 layout: adjust hero image size and card dimensions for improved visual consistency

Browse Source
This commit is contained in:
Ross
2025-12-06 20:11:25 +00:00
parent a4de9ff745
commit 78c7c1d502
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_preview_design4.html
+2 -2
View File
@@ -53,9 +53,9 @@
</div> </div>
</div> </div>
</div> </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; flex:1; display:flex; align-items:center; justify-content:center; padding:8px;"> <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 %} {% if card.image %}
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:360px; transform:scale({{ card.image_scale }}); 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: translate(-50%,-50%) scale({{ card.image_scale }}); transform-origin:center; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
{% endif %} {% endif %}
</div> </div>
<div style="padding:8px 10px; border-top:1px solid rgba(0,0,0,0.04); background:#fafafa;"> <div style="padding:8px 10px; border-top:1px solid rgba(0,0,0,0.04); background:#fafafa;">
cards/templates/cards/base.html
+3 -1
View File
@@ -45,9 +45,11 @@
} }
.toptrump-card.design-4 { .toptrump-card.design-4 {
width: 680px; width: 680px;
min-height: 460px; min-height: 680px;
display: flex; display: flex;
} }
/* Larger hero image for design-4 to match list view scale behavior */
.toptrump-card.design-4 .hero-image { height: 560px; }
.toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden} .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 */ /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
.toptrump-card .hero-image img.card-hero-img{ .toptrump-card .hero-image img.card-hero-img{