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