Fix PDF taking 50%: set body width to 210mm, use percentage column widths
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
@@ -8,159 +8,183 @@
|
||||
{% set inv_color = design ? design.invitationColor : '#d4a017' %}
|
||||
{% set inv_title = design ? design.invitationTitle : 'Invitation' %}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
@page { size: A4; margin: 0; }
|
||||
body {
|
||||
width: 595px;
|
||||
height: 842px;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #fff;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #111;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
.main-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ====== TOP ROW: two columns via table ====== */
|
||||
.top-row {
|
||||
width: 100%;
|
||||
height: 702px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.top-row td {
|
||||
.main-table td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* ====== HG : infos evenement + billet ====== */
|
||||
.zone-hg {
|
||||
width: 375px;
|
||||
padding: 28px 20px 20px 32px;
|
||||
border-right: 3px solid {{ ac }};
|
||||
border-bottom: 3px solid {{ ac }};
|
||||
/* ====== HEADER ====== */
|
||||
.header {
|
||||
background: {{ ac }};
|
||||
color: #fff;
|
||||
padding: 18px 30px;
|
||||
}
|
||||
.event-title {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 3px;
|
||||
.header-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.event-badge {
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
color: {{ ac }};
|
||||
.header-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.header-org {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.header-badge {
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ====== CONTENT ====== */
|
||||
.content-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.content-left {
|
||||
width: 62%;
|
||||
padding: 24px 20px 24px 30px;
|
||||
border-right: 3px solid {{ ac }};
|
||||
}
|
||||
.content-right {
|
||||
width: 38%;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
}
|
||||
.content-right img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* ====== EVENT INFO ====== */
|
||||
.event-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 12px 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.info-table td {
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #11111110;
|
||||
padding: 3px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.info-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.info-label {
|
||||
width: 65px;
|
||||
.lbl {
|
||||
width: 60px;
|
||||
font-size: 7px;
|
||||
font-weight: 900;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #666;
|
||||
letter-spacing: 1px;
|
||||
color: #999;
|
||||
}
|
||||
.info-value {
|
||||
.val {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.separator {
|
||||
/* ====== SEPARATOR ====== */
|
||||
.sep {
|
||||
height: 3px;
|
||||
background: {{ ac }};
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* ====== BILLET INFO ====== */
|
||||
.billet-name {
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
.billet-price {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
font-weight: bold;
|
||||
color: {{ ac }};
|
||||
margin-bottom: 10px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.meta-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.meta-table td {
|
||||
padding: 2px 8px 2px 0;
|
||||
padding: 2px 6px 2px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.meta-label {
|
||||
.meta-lbl {
|
||||
font-size: 7px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #666;
|
||||
}
|
||||
.meta-value {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.badges {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.exit-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
font-size: 8px;
|
||||
font-weight: 900;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
border: 2px solid;
|
||||
color: #999;
|
||||
}
|
||||
.exit-definitive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border-color: #991b1b;
|
||||
}
|
||||
.exit-libre {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border-color: #166534;
|
||||
}
|
||||
.invitation-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
font-size: 8px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #fff;
|
||||
.meta-val {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* QR + ref */
|
||||
/* ====== BADGES ====== */
|
||||
.badge-exit-def {
|
||||
display: inline-block;
|
||||
padding: 3px 6px;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #991b1b;
|
||||
}
|
||||
.badge-exit-libre {
|
||||
display: inline-block;
|
||||
padding: 3px 6px;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border: 1px solid #166534;
|
||||
}
|
||||
.badge-invitation {
|
||||
display: inline-block;
|
||||
padding: 3px 6px;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ====== QR ====== */
|
||||
.qr-section {
|
||||
margin-top: 16px;
|
||||
margin-top: 14px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #11111112;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.qr-table {
|
||||
width: 100%;
|
||||
@@ -169,72 +193,55 @@
|
||||
.qr-table td {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.qr-box img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
.qr-img {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
.ref-block {
|
||||
text-align: right;
|
||||
}
|
||||
.ref-label {
|
||||
.ref-lbl {
|
||||
font-size: 7px;
|
||||
font-weight: 900;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
color: #bbb;
|
||||
}
|
||||
.ref-value {
|
||||
.ref-val {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* ====== HD : affiche ====== */
|
||||
.zone-hd {
|
||||
width: 220px;
|
||||
border-bottom: 3px solid {{ ac }};
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
}
|
||||
.zone-hd img {
|
||||
max-width: 200px;
|
||||
max-height: 680px;
|
||||
}
|
||||
|
||||
/* ====== BOTTOM : infos association ====== */
|
||||
.zone-bottom {
|
||||
width: 100%;
|
||||
padding: 16px 32px;
|
||||
/* ====== FOOTER ====== */
|
||||
.footer {
|
||||
background: {{ ac }};
|
||||
color: #fff;
|
||||
padding: 14px 30px;
|
||||
}
|
||||
.zone-bottom table {
|
||||
.footer-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.zone-bottom td {
|
||||
.footer-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.org-logo img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
.footer-logo img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.org-name {
|
||||
.footer-org {
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.org-details {
|
||||
.footer-details {
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.powered {
|
||||
.footer-powered {
|
||||
font-size: 6px;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.4;
|
||||
@@ -243,115 +250,104 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ticket">
|
||||
<table class="top-row">
|
||||
<!-- HEADER -->
|
||||
<div class="header">
|
||||
<table class="header-table">
|
||||
<tr>
|
||||
<td class="zone-hg">
|
||||
<div class="event-title">{{ event.title }}</div>
|
||||
<div class="event-badge">Billet d'entree</div>
|
||||
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="info-label">Date</td>
|
||||
<td class="info-value">{{ event.startAt|date('d/m/Y') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Horaires</td>
|
||||
<td class="info-value">{{ event.startAt|date('H:i') }} — {{ event.endAt|date('H:i') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Lieu</td>
|
||||
<td class="info-value">{{ event.address }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Ville</td>
|
||||
<td class="info-value">{{ event.zipcode }} {{ event.city }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="billet-name">{{ ticket.billetName }}</div>
|
||||
<div class="billet-price">{{ ticket.unitPriceHTDecimal|number_format(2, ',', ' ') }} € HT</div>
|
||||
|
||||
<table class="meta-table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="meta-label">Categorie</div>
|
||||
<div class="meta-value">{{ ticket.billet.category.name }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="meta-label">Date d'achat</div>
|
||||
<div class="meta-value">{{ order.paidAt ? order.paidAt|date('d/m/Y H:i') : order.createdAt|date('d/m/Y H:i') }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="meta-label">Acheteur</div>
|
||||
<div class="meta-value">{{ order.firstName }} {{ order.lastName }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="meta-label">E-mail</div>
|
||||
<div class="meta-value">{{ order.email }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="badges">
|
||||
{% if ticket.billet.definedExit %}
|
||||
<span class="exit-badge exit-definitive">Sortie definitive</span>
|
||||
{% else %}
|
||||
<span class="exit-badge exit-libre">Sortie libre</span>
|
||||
{% endif %}
|
||||
{% if design %}
|
||||
<span class="invitation-badge" style="background: {{ inv_color }};">{{ inv_title }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="qr-section">
|
||||
<table class="qr-table">
|
||||
<tr>
|
||||
<td class="qr-box">
|
||||
<img src="{{ qrBase64 }}" alt="QR Code">
|
||||
</td>
|
||||
<td class="ref-block">
|
||||
<div class="ref-label">Reference billet</div>
|
||||
<div class="ref-value">{{ ticket.reference }}</div>
|
||||
<div class="ref-label" style="margin-top: 6px;">Commande</div>
|
||||
<div class="ref-value">{{ order.orderNumber }}</div>
|
||||
<div class="ref-label" style="margin-top: 6px;">Ref commande</div>
|
||||
<div class="ref-value">{{ order.reference }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td class="zone-hd">
|
||||
{% if posterBase64 %}
|
||||
<img src="{{ posterBase64 }}" alt="{{ event.title }}">
|
||||
<td>
|
||||
{% if logoBase64 %}
|
||||
<img src="{{ logoBase64 }}" alt="Logo" style="width: 36px; height: 36px; vertical-align: middle; margin-right: 10px;">
|
||||
{% endif %}
|
||||
<span class="header-org">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</span>
|
||||
</td>
|
||||
<td class="header-badge">Billet d'entree</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="zone-bottom">
|
||||
<table>
|
||||
<tr>
|
||||
{% if logoBase64 %}
|
||||
<td class="org-logo" style="width: 60px; padding-right: 14px;">
|
||||
<img src="{{ logoBase64 }}" alt="Logo">
|
||||
</td>
|
||||
<!-- CONTENT -->
|
||||
<table class="content-table">
|
||||
<tr>
|
||||
<td class="content-left">
|
||||
<div class="event-title">{{ event.title }}</div>
|
||||
|
||||
<table class="info-table">
|
||||
<tr><td class="lbl">Date</td><td class="val">{{ event.startAt|date('d/m/Y') }}</td></tr>
|
||||
<tr><td class="lbl">Horaires</td><td class="val">{{ event.startAt|date('H:i') }} — {{ event.endAt|date('H:i') }}</td></tr>
|
||||
<tr><td class="lbl">Lieu</td><td class="val">{{ event.address }}</td></tr>
|
||||
<tr><td class="lbl">Ville</td><td class="val">{{ event.zipcode }} {{ event.city }}</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="sep"></div>
|
||||
|
||||
<div class="billet-name">{{ ticket.billetName }}</div>
|
||||
<div class="billet-price">{{ ticket.unitPriceHTDecimal|number_format(2, ',', ' ') }} € HT</div>
|
||||
|
||||
<table class="meta-table">
|
||||
<tr>
|
||||
<td><div class="meta-lbl">Categorie</div><div class="meta-val">{{ ticket.billet.category.name }}</div></td>
|
||||
<td><div class="meta-lbl">Date d'achat</div><div class="meta-val">{{ order.paidAt ? order.paidAt|date('d/m/Y H:i') : order.createdAt|date('d/m/Y H:i') }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="meta-lbl">Acheteur</div><div class="meta-val">{{ order.firstName }} {{ order.lastName }}</div></td>
|
||||
<td><div class="meta-lbl">E-mail</div><div class="meta-val">{{ order.email }}</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="margin-top: 8px;">
|
||||
{% if ticket.billet.definedExit %}
|
||||
<span class="badge-exit-def">Sortie definitive</span>
|
||||
{% else %}
|
||||
<span class="badge-exit-libre">Sortie libre</span>
|
||||
{% endif %}
|
||||
<td>
|
||||
<div class="org-name">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</div>
|
||||
{% if organizer.address %}
|
||||
<div class="org-details">{{ organizer.address }}{% if organizer.postalCode %}, {{ organizer.postalCode }}{% endif %}{% if organizer.city %} {{ organizer.city }}{% endif %}</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="powered">E-Ticket<br>by E-Cosplay</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
{% if design %}
|
||||
<span class="badge-invitation" style="background: {{ inv_color }};">{{ inv_title }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="qr-section">
|
||||
<table class="qr-table">
|
||||
<tr>
|
||||
<td style="width: 140px;">
|
||||
<img src="{{ qrBase64 }}" alt="QR" class="qr-img">
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<div class="ref-lbl">Reference billet</div>
|
||||
<div class="ref-val">{{ ticket.reference }}</div>
|
||||
<br>
|
||||
<div class="ref-lbl">Commande</div>
|
||||
<div class="ref-val">{{ order.orderNumber }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td class="content-right">
|
||||
{% if posterBase64 %}
|
||||
<img src="{{ posterBase64 }}" alt="{{ event.title }}">
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div class="footer">
|
||||
<table class="footer-table">
|
||||
<tr>
|
||||
{% if logoBase64 %}
|
||||
<td class="footer-logo" style="width: 54px; padding-right: 12px;">
|
||||
<img src="{{ logoBase64 }}" alt="Logo">
|
||||
</td>
|
||||
{% endif %}
|
||||
<td>
|
||||
<div class="footer-org">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</div>
|
||||
{% if organizer.address %}
|
||||
<div class="footer-details">{{ organizer.address }}{% if organizer.postalCode %}, {{ organizer.postalCode }}{% endif %}{% if organizer.city %} {{ organizer.city }}{% endif %}</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="footer-powered">E-Ticket<br>by E-Cosplay</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user