Skip to content

Commit fb39b6f

Browse files
daveearleydaveearley
authored
Fix: Ticket styling tweaks (#852)
1 parent 20af61f commit fb39b6f

File tree

5 files changed

+98
-54
lines changed

5 files changed

+98
-54
lines changed

‎frontend/src/components/common/AttendeeTicket/AttendeeTicket.module.scss‎

Lines changed: 70 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,18 @@
55
size: A4;
66
margin: 0.5in;
77
}
8-
8+
99
body {
10-
font-size: 12pt;
11-
line-height: 1.4;
10+
font-size: 11pt;
11+
line-height: 1.3;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
html, body {
17+
height: auto;
18+
margin: 0;
19+
padding: 0;
1220
}
1321
}
1422

@@ -27,15 +35,14 @@
2735
border: none;
2836
border-radius: 0;
2937
max-width: 100%;
30-
width: 100%;
38+
width: auto;
3139
height: auto;
32-
margin: 0;
40+
min-height: 0;
41+
margin: 20px;
3342
padding: 0;
34-
display: flex;
35-
flex-direction: column;
36-
justify-content: flex-start;
37-
page-break-after: avoid;
43+
display: block;
3844
page-break-inside: avoid;
45+
break-inside: avoid;
3946
}
4047
}
4148

@@ -52,10 +59,12 @@
5259
@media print {
5360
background: #ffffff;
5461
border-bottom: 2px solid #e0e0e0;
55-
padding: 15px 0;
56-
margin-bottom: 20px;
62+
padding: 8px 0;
63+
margin-bottom: 30px;
5764
display: flex;
5865
justify-content: center;
66+
page-break-inside: avoid;
67+
break-inside: avoid;
5968
}
6069
}
6170

@@ -80,14 +89,18 @@
8089
margin: 0;
8190
line-height: 1.3;
8291
letter-spacing: -0.01em;
92+
word-wrap: break-word;
93+
word-break: break-word;
94+
overflow-wrap: break-word;
8395

8496
@include mixins.respond-below(sm) {
8597
font-size: 20px;
8698
}
8799

88100
@media print {
89-
font-size: 32px;
90-
margin-bottom: 10px;
101+
font-size: 24px;
102+
margin-bottom: 5px;
103+
line-height: 1.2;
91104
}
92105
}
93106

@@ -102,7 +115,7 @@
102115
}
103116

104117
@media print {
105-
font-size: 24px;
118+
font-size: 20px;
106119
font-weight: 700;
107120
}
108121
}
@@ -125,9 +138,10 @@
125138
@media print {
126139
grid-template-columns: 2fr 1fr;
127140
padding: 0;
128-
gap: 50px;
129-
flex: 1;
130-
align-items: center;
141+
gap: 30px;
142+
align-items: start;
143+
page-break-inside: avoid;
144+
break-inside: avoid;
131145
}
132146
}
133147

@@ -141,7 +155,7 @@
141155
}
142156

143157
@media print {
144-
gap: 40px;
158+
gap: 20px;
145159
justify-content: center;
146160
}
147161
}
@@ -157,7 +171,7 @@
157171
}
158172

159173
@media print {
160-
gap: 30px;
174+
gap: 15px;
161175
}
162176
}
163177

@@ -175,7 +189,7 @@
175189
color: #64748b;
176190

177191
@media print {
178-
font-size: 14px;
192+
font-size: 11px;
179193
color: #666666;
180194
font-weight: 600;
181195
}
@@ -192,7 +206,7 @@
192206
}
193207

194208
@media print {
195-
font-size: 20px;
209+
font-size: 16px;
196210
font-weight: 600;
197211
}
198212
}
@@ -210,7 +224,7 @@
210224

211225
@media print {
212226
background: #ffffff;
213-
padding: 35px;
227+
padding: 20px;
214228
border-radius: 8px;
215229
border: 1px solid #d0d0d0;
216230
}
@@ -227,8 +241,8 @@
227241
}
228242

229243
@media print {
230-
font-size: 24px;
231-
margin: 12px 0 8px;
244+
font-size: 18px;
245+
margin: 8px 0 4px;
232246
font-weight: 700;
233247
}
234248
}
@@ -238,7 +252,7 @@
238252
color: #64748b;
239253

240254
@media print {
241-
font-size: 18px;
255+
font-size: 14px;
242256
color: #666666;
243257
}
244258
}
@@ -256,8 +270,8 @@
256270

257271
@media print {
258272
color: #555555;
259-
font-size: 16px;
260-
line-height: 1.6;
273+
font-size: 13px;
274+
line-height: 1.5;
261275
}
262276
}
263277

@@ -282,7 +296,7 @@
282296
justify-content: center;
283297

284298
@media print {
285-
gap: 30px;
299+
gap: 15px;
286300
justify-content: flex-start;
287301
}
288302
}
@@ -318,15 +332,19 @@
318332
display: flex;
319333
align-items: center;
320334
justify-content: center;
335+
min-width: 160px;
336+
min-height: 160px;
337+
max-width: 220px;
338+
max-height: 220px;
321339

322340
@include mixins.respond-below(sm) {
323341
padding: 14px;
324342
}
325343

326344
@media print {
327345
border-color: var(--accent);
328-
padding: 25px;
329-
border-width: 4px;
346+
padding: 15px;
347+
border-width: 3px;
330348
}
331349
}
332350

@@ -382,8 +400,8 @@
382400
@media print {
383401
color: var(--accent);
384402
background: #f0f0f0;
385-
font-size: 18px;
386-
padding: 12px 20px;
403+
font-size: 14px;
404+
padding: 8px 16px;
387405
font-weight: 700;
388406
}
389407
}
@@ -401,8 +419,10 @@
401419
@media print {
402420
background: #ffffff;
403421
border-top: 2px solid #e0e0e0;
404-
padding: 30px 0 0 0;
405-
margin-top: 30px;
422+
padding: 12px 0;
423+
margin-top: 12px;
424+
page-break-inside: avoid;
425+
break-inside: avoid;
406426
}
407427
}
408428

@@ -417,6 +437,10 @@
417437
gap: 16px;
418438
text-align: center;
419439
}
440+
441+
@media print {
442+
justify-content: center;
443+
}
420444
}
421445

422446

@@ -443,3 +467,15 @@
443467
display: none;
444468
}
445469
}
470+
471+
.poweredByInTicket {
472+
display: none;
473+
474+
@media print {
475+
display: block;
476+
margin-top: 20px;
477+
text-align: center;
478+
page-break-inside: avoid;
479+
break-inside: avoid;
480+
}
481+
}

‎frontend/src/components/common/AttendeeTicket/index.tsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,26 @@ import {t} from "@lingui/macro";
55
import {prettyDate} from "../../../utilites/dates.ts";
66
import QRCode from "react-qr-code";
77
import {IconCopy, IconPrinter} from "@tabler/icons-react";
8-
import {Attendee, Event, Product} from "../../../types.ts";
8+
import {Address, Attendee, Event, Product} from "../../../types.ts";
99
import classes from './AttendeeTicket.module.scss';
1010
import {imageUrl} from "../../../utilites/urlHelper.ts";
11+
import {formatAddress} from "../../../utilites/addressUtilities.ts";
12+
import {PoweredByFooter} from "../PoweredByFooter";
1113

1214
interface AttendeeTicketProps {
1315
event: Event;
1416
attendee: Attendee;
1517
product: Product;
1618
hideButtons?: boolean;
19+
showPoweredBy?: boolean;
1720
}
1821

1922
export const AttendeeTicket = ({
2023
attendee,
2124
product,
2225
event,
2326
hideButtons = false,
27+
showPoweredBy = false,
2428
}: AttendeeTicketProps) => {
2529
const productPrice = getAttendeeProductPrice(attendee, product);
2630
const hasVenue = event?.settings?.location_details?.venue_name || event?.settings?.location_details?.address_line_1;
@@ -71,12 +75,9 @@ export const AttendeeTicket = ({
7175

7276
{hasVenue && (
7377
<div className={classes.detailRow}>
74-
<div className={classes.detailLabel}>{t`Venue`}</div>
78+
<div className={classes.detailLabel}>{t`Location`}</div>
7579
<div className={classes.detailValue}>
76-
{event?.settings?.location_details?.venue_name}
77-
{event?.settings?.location_details?.address_line_1 && (
78-
<>, {event?.settings?.location_details?.address_line_1}</>
79-
)}
80+
{formatAddress(event?.settings?.location_details as Address)}
8081
</div>
8182
</div>
8283
)}
@@ -109,7 +110,10 @@ export const AttendeeTicket = ({
109110
</div>
110111
)}
111112

112-
<div className={classes.qrContainer}>
113+
<div
114+
className={classes.qrContainer}
115+
style={{borderColor: accentColor}}
116+
>
113117
{(isCancelled || isAwaitingPayment) ? (
114118
<div className={classes.statusOverlay}>
115119
<span className={isCancelled ? classes.cancelled : classes.pending}>
@@ -128,7 +132,10 @@ export const AttendeeTicket = ({
128132

129133
<div className={classes.ticketId}>
130134
<div className={classes.detailLabel}>{t`Ticket ID`}</div>
131-
<div className={classes.ticketIdValue}>{attendee.public_id}</div>
135+
<div
136+
className={classes.ticketIdValue}
137+
style={{color: accentColor}}
138+
>{attendee.public_id}</div>
132139
</div>
133140
</div>
134141
</div>
@@ -173,6 +180,13 @@ export const AttendeeTicket = ({
173180
</div>
174181
</div>
175182
)}
183+
184+
{/* Powered By - Only shown in print mode */}
185+
{showPoweredBy && (
186+
<div className={classes.poweredByInTicket}>
187+
<PoweredByFooter/>
188+
</div>
189+
)}
176190
</div>
177191
);
178192
}

‎frontend/src/components/routes/product-widget/AttendeeProductAndInformation/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const AttendeeProductAndInformation = () => {
3939
attendee={attendee as Attendee}
4040
product={attendee.product as Product}
4141
event={event}
42+
showPoweredBy
4243
/>
4344

4445
{(event?.settings?.is_online_event && <OnlineEventDetails eventSettings={event.settings}/>)}

‎frontend/src/components/routes/product-widget/PrintOrder/PrintOrder.module.scss‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,17 @@
2525

2626
.ticketPage {
2727
margin-bottom: 30px;
28-
28+
2929
@media print {
3030
margin-bottom: 0;
3131
page-break-after: always;
3232
page-break-inside: avoid;
33-
padding: 20px;
34-
min-height: 100vh;
35-
display: flex;
36-
flex-direction: column;
37-
justify-content: space-between;
38-
39-
&:last-child {
33+
34+
&:last-of-type {
4035
page-break-after: auto;
4136
}
4237
}
43-
38+
4439
@media screen {
4540
&:last-child {
4641
margin-bottom: 0;

‎frontend/src/components/routes/product-widget/PrintOrder/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,8 @@ export const PrintOrder = () => {
4646
product={attendee.product as Product}
4747
event={event}
4848
hideButtons
49+
showPoweredBy
4950
/>
50-
<div className={classes.poweredBy}>
51-
<PoweredByFooter/>
52-
</div>
5351
</div>
5452
);
5553
})}

0 commit comments

Comments
 (0)