Skip to content

Commit b3e654c

Browse files
lexCoder2lexCoder2
committed
fix qr size
1 parent 1e555e0 commit b3e654c

1 file changed

Lines changed: 41 additions & 36 deletions

File tree

‎src/app/components/settings/settings.component.ts‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,8 @@ export class SettingsComponent implements OnInit {
200200

201201
// Generate QR code with user ID in POSDIC format
202202
const qrData = `POSDIC:${user.id}`;
203-
// Use QR Server API to generate QR code
204-
this.qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
203+
// Use QR Server API to generate QR code (optimized for display)
204+
this.qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
205205
qrData
206206
)}`;
207207
}
@@ -226,7 +226,8 @@ export class SettingsComponent implements OnInit {
226226
`USERS.ROLES.${user.role?.toUpperCase()}`
227227
) || user.role;
228228
const qrData = `POSDIC:${user.id}`;
229-
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(
229+
// Optimized QR size for thermal printers (58mm/80mm)
230+
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${encodeURIComponent(
230231
qrData
231232
)}`;
232233

@@ -235,61 +236,65 @@ export class SettingsComponent implements OnInit {
235236
<html>
236237
<head>
237238
<title>Employee Badge - ${userName}</title>
239+
<meta charset="UTF-8">
238240
<style>
239241
* { margin: 0; padding: 0; box-sizing: border-box; }
240242
body {
241-
font-family: 'Segoe UI', Arial, sans-serif;
242-
display: flex;
243-
justify-content: center;
244-
align-items: center;
245-
min-height: 100vh;
246-
background: #f5f5f5;
243+
font-family: 'Courier New', Courier, monospace;
244+
background: white;
245+
margin: 0;
246+
padding: 4px;
247247
}
248248
.badge {
249-
width: 3.5in;
250-
padding: 0.5in 0.4in;
249+
max-width: 58mm;
250+
margin: 0 auto;
251251
background: white;
252-
border-radius: 16px;
253-
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
254252
text-align: center;
253+
padding: 8px 4px;
255254
}
256255
.company-name {
257-
font-size: 24px;
256+
font-size: 14px;
258257
font-weight: bold;
259-
color: #4f46e5;
260-
margin-bottom: 16px;
258+
margin-bottom: 6px;
259+
text-transform: uppercase;
261260
}
262261
.qr-code {
263-
margin: 16px auto;
262+
margin: 6px auto;
264263
}
265264
.qr-code img {
266-
width: 200px;
267-
height: 200px;
268-
border: 3px solid #e5e7eb;
269-
border-radius: 12px;
265+
width: 120px;
266+
height: 120px;
267+
display: block;
268+
margin: 0 auto;
270269
}
271270
.user-name {
272-
font-size: 20px;
273-
font-weight: 600;
274-
color: #1f2937;
275-
margin-top: 16px;
271+
font-size: 12px;
272+
font-weight: bold;
273+
margin-top: 6px;
274+
word-wrap: break-word;
276275
}
277276
.user-role {
278-
font-size: 14px;
279-
color: #6b7280;
280-
margin-top: 4px;
281-
text-transform: capitalize;
277+
font-size: 10px;
278+
margin-top: 2px;
279+
text-transform: uppercase;
282280
}
283281
.instructions {
284-
font-size: 11px;
285-
color: #9ca3af;
286-
margin-top: 16px;
287-
padding-top: 12px;
288-
border-top: 1px dashed #e5e7eb;
282+
font-size: 8px;
283+
margin-top: 8px;
284+
padding-top: 4px;
285+
border-top: 1px dashed #000;
289286
}
290287
@media print {
291-
body { background: white; }
292-
.badge { box-shadow: none; border: 1px solid #e5e7eb; }
288+
body {
289+
background: white;
290+
margin: 0;
291+
padding: 0;
292+
}
293+
.badge {
294+
box-shadow: none;
295+
border: none;
296+
padding: 4px 2px;
297+
}
293298
}
294299
</style>
295300
</head>

0 commit comments

Comments
 (0)