foxerBN/crm-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Correct positioning of elements in certificate templates

Browse Source 
- Position course title below header, not overlapping
- Center participant name above the horizontal line
- Position issue date above "Dátum" text at bottom left
- Use Bahnschrift font for course titles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
richardtekula
2026-01-29 14:35:50 +01:00
parent f2af7ffe22
commit 68905787ce
3 changed files with 57 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/templates/certificates/ITIL.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Osvedčenie - {{participantName}}</title> <title>Osvedčenie - {{participantName}}</title>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bahnschrift:wght@400;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');
* { * {
margin: 0; margin: 0;
@@ -39,25 +39,27 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.content { /* Course info section - positioned below "o absolvovaní kurzu" */
.course-section {
position: absolute; position: absolute;
top: 42mm; top: 32mm;
left: 15mm; left: 18mm;
right: 15mm; right: 18mm;
} }
.course-title { .course-title {
font-size: 28pt; font-family: 'Bahnschrift', 'Open Sans', Arial, sans-serif;
font-size: 32pt;
font-weight: 700; font-weight: 700;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 8mm; margin-bottom: 5mm;
} }
.course-dates { .course-dates {
font-size: 14pt; font-size: 14pt;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 3mm; margin-bottom: 2mm;
} }
.course-hours { .course-hours {
@@ -66,9 +68,10 @@
color: #1a1a1a; color: #1a1a1a;
} }
/* Participant name - centered above the horizontal line */
.participant-section { .participant-section {
position: absolute; position: absolute;
top: 58%; top: 92mm;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
@@ -80,18 +83,19 @@
color: #1a1a1a; color: #1a1a1a;
} }
/* Issue date - above "Dátum" at bottom left */
.issue-date { .issue-date {
position: absolute; position: absolute;
bottom: 32mm; bottom: 42mm;
left: 20mm; left: 28mm;
font-size: 11pt; font-size: 12pt;
color: #333; color: #333;
} }
.certificate-id { .certificate-id {
position: absolute; position: absolute;
bottom: 8mm; bottom: 10mm;
right: 15mm; right: 18mm;
font-size: 7pt; font-size: 7pt;
color: #666; color: #666;
} }
@@ -99,7 +103,7 @@
</head> </head>
<body> <body>
<div class="certificate"> <div class="certificate">
<div class="content"> <div class="course-section">
<h2 class="course-title">{{courseTitle}}</h2> <h2 class="course-title">{{courseTitle}}</h2>
{{#if dateRange}} {{#if dateRange}}
<p class="course-dates">{{dateRange}}</p> <p class="course-dates">{{dateRange}}</p>

34
src/templates/certificates/PRINCE2.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Osvedčenie - {{participantName}}</title> <title>Osvedčenie - {{participantName}}</title>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bahnschrift:wght@400;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');
* { * {
margin: 0; margin: 0;
@@ -39,25 +39,27 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.content { /* Course info section - positioned below "o absolvovaní kurzu" */
.course-section {
position: absolute; position: absolute;
top: 42mm; top: 32mm;
left: 15mm; left: 18mm;
right: 15mm; right: 18mm;
} }
.course-title { .course-title {
font-size: 28pt; font-family: 'Bahnschrift', 'Open Sans', Arial, sans-serif;
font-size: 32pt;
font-weight: 700; font-weight: 700;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 8mm; margin-bottom: 5mm;
} }
.course-dates { .course-dates {
font-size: 14pt; font-size: 14pt;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 3mm; margin-bottom: 2mm;
} }
.course-hours { .course-hours {
@@ -66,9 +68,10 @@
color: #1a1a1a; color: #1a1a1a;
} }
/* Participant name - centered above the horizontal line */
.participant-section { .participant-section {
position: absolute; position: absolute;
top: 58%; top: 92mm;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
@@ -80,18 +83,19 @@
color: #1a1a1a; color: #1a1a1a;
} }
/* Issue date - above "Dátum" at bottom left */
.issue-date { .issue-date {
position: absolute; position: absolute;
bottom: 32mm; bottom: 42mm;
left: 20mm; left: 28mm;
font-size: 11pt; font-size: 12pt;
color: #333; color: #333;
} }
.certificate-id { .certificate-id {
position: absolute; position: absolute;
bottom: 8mm; bottom: 10mm;
right: 15mm; right: 18mm;
font-size: 7pt; font-size: 7pt;
color: #666; color: #666;
} }
@@ -99,7 +103,7 @@
</head> </head>
<body> <body>
<div class="certificate"> <div class="certificate">
<div class="content"> <div class="course-section">
<h2 class="course-title">{{courseTitle}}</h2> <h2 class="course-title">{{courseTitle}}</h2>
{{#if dateRange}} {{#if dateRange}}
<p class="course-dates">{{dateRange}}</p> <p class="course-dates">{{dateRange}}</p>

40
src/templates/certificates/ScrumGeneric.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Osvedčenie - {{participantName}}</title> <title>Osvedčenie - {{participantName}}</title>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bahnschrift:wght@400;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');
* { * {
margin: 0; margin: 0;
@@ -39,25 +39,27 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.content { /* Course info section - positioned below "o absolvovaní kurzu" */
.course-section {
position: absolute; position: absolute;
top: 42mm; top: 32mm;
left: 15mm; left: 18mm;
right: 15mm; right: 18mm;
} }
.course-title { .course-title {
font-size: 28pt; font-family: 'Bahnschrift', 'Open Sans', Arial, sans-serif;
font-size: 32pt;
font-weight: 700; font-weight: 700;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 8mm; margin-bottom: 5mm;
} }
.course-dates { .course-dates {
font-size: 14pt; font-size: 14pt;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 3mm; margin-bottom: 2mm;
} }
.course-hours { .course-hours {
@@ -66,9 +68,10 @@
color: #1a1a1a; color: #1a1a1a;
} }
/* Participant name - centered above the horizontal line */
.participant-section { .participant-section {
position: absolute; position: absolute;
top: 58%; top: 92mm;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
@@ -80,24 +83,19 @@
color: #1a1a1a; color: #1a1a1a;
} }
.participant-birthdate { /* Issue date - above "Dátum" at bottom left */
font-size: 12pt;
color: #333;
margin-top: 2mm;
}
.issue-date { .issue-date {
position: absolute; position: absolute;
bottom: 32mm; bottom: 42mm;
left: 20mm; left: 28mm;
font-size: 11pt; font-size: 12pt;
color: #333; color: #333;
} }
.certificate-id { .certificate-id {
position: absolute; position: absolute;
bottom: 8mm; bottom: 10mm;
right: 15mm; right: 18mm;
font-size: 7pt; font-size: 7pt;
color: #666; color: #666;
} }
@@ -105,7 +103,7 @@
</head> </head>
<body> <body>
<div class="certificate"> <div class="certificate">
<div class="content"> <div class="course-section">
<h2 class="course-title">{{courseTitle}}</h2> <h2 class="course-title">{{courseTitle}}</h2>
{{#if dateRange}} {{#if dateRange}}
<p class="course-dates">{{dateRange}}</p> <p class="course-dates">{{dateRange}}</p>