truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: optimize internship transcript layout and typography for A4 print consistency

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-08 18:32:07 +03:00
parent af82f47ea0
commit 554f22695d
1 changed files with 71 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/front/career/verify.blade.php
+71 -44
View File
@@ -116,39 +116,39 @@
</div> </div>
<!-- ================= PAGE 2: TRANSCRIPT (PORTRAIT A4) ================= --> <!-- ================= PAGE 2: TRANSCRIPT (PORTRAIT A4) ================= -->
<div id="transcript-node" class="transcript-page bg-white rounded-[2rem] shadow-2xl p-8 md:p-10 relative overflow-hidden mx-auto"> <div id="transcript-node" class="transcript-page bg-white rounded-[2rem] shadow-2xl p-6 md:p-8 relative overflow-hidden mx-auto">
<!-- Thin border decor for transcript --> <!-- Thin border decor for transcript -->
<div class="absolute inset-5 border border-slate-100 rounded-[1.5rem] pointer-events-none"></div> <div class="absolute inset-4 border border-slate-100 rounded-[1.5rem] pointer-events-none"></div>
<div class="relative z-10 flex flex-col justify-between h-full min-h-[800px] text-slate-700"> <div class="relative z-10 flex flex-col justify-between h-full text-slate-700">
<div> <div>
<!-- Header --> <!-- Header -->
<div class="flex justify-between items-center pb-4 border-b border-slate-100 mb-6"> <div class="flex justify-between items-center pb-2 border-b border-slate-100 mb-3">
<div> <div>
<h2 class="font-serif text-lg font-bold text-slate-900 uppercase">Staj Akademik Transkripti</h2> <h2 class="font-serif text-sm font-bold text-slate-900 uppercase">Staj Akademik Transkripti</h2>
<p class="text-[9px] text-slate-400 tracking-wider uppercase mt-0.5">Ve Performans Değerlendirme Raporu</p> <p class="text-[7px] text-slate-400 tracking-wider uppercase mt-0.5">Ve Performans Değerlendirme Raporu</p>
</div> </div>
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Logo" class="h-8 object-contain"> <img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Logo" class="h-6 object-contain">
</div> </div>
<!-- Student Info block --> <!-- Student Info block -->
<div class="bg-slate-50 rounded-xl p-4 border border-slate-100 mb-6"> <div class="bg-slate-50 rounded-xl p-2.5 border border-slate-100 mb-3">
<h3 class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-3">Öğrenci / Stajyer Bilgileri</h3> <h3 class="text-[7.5px] font-bold text-slate-400 uppercase tracking-widest mb-1.5">Öğrenci / Stajyer Bilgileri</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-2.5 gap-x-8 text-xs"> <div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-8 text-[8.5px]">
<div class="flex justify-between border-b border-slate-200/50 pb-1.5"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Adı Soyadı:</span> <span class="text-slate-500">Adı Soyadı:</span>
<strong class="text-slate-800">{{ $application->name }}</strong> <strong class="text-slate-800">{{ $application->name }}</strong>
</div> </div>
<div class="flex justify-between border-b border-slate-200/50 pb-1.5"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">E-Posta Adresi:</span> <span class="text-slate-500">E-Posta Adresi:</span>
<strong class="text-slate-800">{{ $application->email }}</strong> <strong class="text-slate-800">{{ $application->email }}</strong>
</div> </div>
<div class="flex justify-between border-b border-slate-200/50 pb-1.5"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Staj Dönemi:</span> <span class="text-slate-500">Staj Dönemi:</span>
<strong class="text-slate-800">{{ \Carbon\Carbon::parse($application->internship_start_date)->format('d.m.Y') }} - {{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</strong> <strong class="text-slate-800">{{ \Carbon\Carbon::parse($application->internship_start_date)->format('d.m.Y') }} - {{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</strong>
</div> </div>
<div class="flex justify-between border-b border-slate-200/50 pb-1.5"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Toplam Staj Süresi:</span> <span class="text-slate-500">Toplam Staj Süresi:</span>
<strong class="text-slate-800">{{ $application->internship_total_days }} İş Günü</strong> <strong class="text-slate-800">{{ $application->internship_total_days }} İş Günü</strong>
</div> </div>
@@ -156,21 +156,21 @@
</div> </div>
<!-- Dynamic Markdown Content (Transcript and marks) --> <!-- Dynamic Markdown Content (Transcript and marks) -->
<div class="prose max-w-none text-slate-700 leading-relaxed mb-6"> <div class="prose max-w-none text-slate-700 leading-relaxed mb-3">
{!! new \Illuminate\Support\HtmlString(\Illuminate\Support\Str::markdown($application->transcript_markdown ?? '')) !!} {!! new \Illuminate\Support\HtmlString(\Illuminate\Support\Str::markdown($application->transcript_markdown ?? '')) !!}
</div> </div>
</div> </div>
<!-- Footer with verification details --> <!-- Footer with verification details -->
<div class="w-full flex justify-between items-center pt-4 border-t border-slate-100 gap-6 mt-auto"> <div class="w-full flex justify-between items-center pt-2 border-t border-slate-100 gap-4 mt-auto">
<div class="flex items-center gap-4"> <div class="flex items-center gap-3">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-20 h-20 border border-slate-200 p-0.5 rounded-lg bg-white"> <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-14 h-14 border border-slate-200 p-0.5 rounded-lg bg-white">
<div> <div>
<span class="text-[8px] font-bold text-slate-400 uppercase tracking-wider block">Güvenli Doğrulama Kodu</span> <span class="text-[6.5px] font-bold text-slate-400 uppercase tracking-wider block">Güvenli Doğrulama Kodu</span>
<span class="text-xs font-mono font-bold text-slate-800 block">{{ $application->certificate_code }}</span> <span class="text-[9px] font-mono font-bold text-slate-800 block">{{ $application->certificate_code }}</span>
</div> </div>
</div> </div>
<div class="text-right text-[9px] text-slate-400"> <div class="text-right text-[7.5px] text-slate-400">
Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br> Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br>
Gaziantep Üniversitesi Teknopark No: 4A Gaziantep Üniversitesi Teknopark No: 4A
</div> </div>
@@ -208,33 +208,34 @@
.transcript-page { .transcript-page {
width: 100%; width: 100%;
max-width: 210mm; max-width: 210mm;
min-height: 297mm; height: 297mm;
box-sizing: border-box; box-sizing: border-box;
} }
/* Elegant Markdown Table Styling inside prose (Reduced font sizes & paddings) */ /* Elegant Markdown Table Styling inside prose (Reduced font sizes & paddings) */
.prose table { .prose table {
width: 100%; width: 100%;
margin-top: 1em; margin-top: 0.35rem !important;
margin-bottom: 1em; margin-bottom: 0.35rem !important;
border-collapse: collapse; border-collapse: collapse;
text-align: left; text-align: left;
} }
.prose th { .prose th {
font-weight: 700; font-weight: 700;
padding: 0.4rem 0.6rem; padding: 0.2rem 0.35rem !important;
background-color: #f8fafc; background-color: #f8fafc;
border-bottom: 2px solid #e2e8f0; border-bottom: 2px solid #e2e8f0;
color: #1e293b; color: #1e293b;
font-size: 0.7rem; font-size: 0.45rem !important;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.prose td { .prose td {
padding: 0.4rem 0.6rem; padding: 0.2rem 0.35rem !important;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
color: #334155; color: #334155;
font-size: 0.75rem; font-size: 0.45rem !important;
line-height: 1.2 !important;
} }
.prose tr:hover { .prose tr:hover {
background-color: #f8fafc; background-color: #f8fafc;
@@ -242,32 +243,57 @@
.prose h3 { .prose h3 {
font-family: 'Cinzel', serif; font-family: 'Cinzel', serif;
color: #0f172a; color: #0f172a;
margin-top: 1.25rem; margin-top: 0.5rem !important;
margin-bottom: 0.5rem; margin-bottom: 0.25rem !important;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.3rem; padding-bottom: 0.15rem;
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.6rem !important;
} }
.prose h4 { .prose h4 {
color: #1e293b; color: #1e293b;
margin-top: 1rem; margin-top: 0.4rem !important;
margin-bottom: 0.4rem; margin-bottom: 0.2rem !important;
font-weight: 600; font-weight: 600;
font-size: 0.85rem; font-size: 0.52rem !important;
} }
.prose p, .prose li { .prose p {
font-size: 0.75rem; font-size: 0.45rem !important;
line-height: 1.5; line-height: 1.3 !important;
margin-bottom: 0.5rem; margin-top: 0.15rem !important;
margin-bottom: 0.2rem !important;
}
.prose ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.1rem 0.75rem;
padding-left: 0 !important;
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
list-style-type: none !important;
}
.prose ul li {
font-size: 0.45rem !important;
line-height: 1.3 !important;
margin: 0 !important;
position: relative;
padding-left: 0.5rem !important;
}
.prose ul li::before {
content: "•";
color: #f97316;
position: absolute;
left: 0;
top: 0;
font-weight: bold;
} }
.prose blockquote { .prose blockquote {
border-left: 3px solid #f97316; border-left: 2px solid #f97316;
padding-left: 0.75rem; padding-left: 0.4rem !important;
font-style: italic; font-style: italic;
color: #475569; color: #475569;
margin: 1rem 0; margin: 0.4rem 0 !important;
font-size: 0.75rem; font-size: 0.45rem !important;
} }
/* Print media config for mixed Landscape & Portrait */ /* Print media config for mixed Landscape & Portrait */
@@ -330,10 +356,11 @@
height: 297mm !important; height: 297mm !important;
min-height: 297mm !important; min-height: 297mm !important;
margin: 0 !important; margin: 0 !important;
padding: 12mm !important; padding: 10mm !important;
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
box-sizing: border-box !important; box-sizing: border-box !important;
overflow: hidden !important;
} }
} }
</style> </style>