KoPKB/My-KOPKB
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

DONE: update logo to original official logo, update letterhead and letterfooter layout (#8)
Build Docker Image / build-backend (push) Successful in 52s
Details
Build Docker Image / build-frontend (push) Successful in 32s
Details

Browse Source 
Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Reviewed-on: #8
This commit was merged in pull request #8.
This commit is contained in:
ismailmasseran
2026-07-07 14:45:20 +08:00
parent 1cc3351ca6
commit 18c0d268b1
76 changed files with 547 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
be/resources/views/pdf/layouts/letter.blade.php
+67 -106
View File
@@ -8,6 +8,7 @@
@section('letter-reference') Ruj: APP-2026-00001 @endsection
@section('letter-date') {{ now()->format('d F Y') }} @endsection
@section('letter-recipient') ... @endsection
@section('letter-honorific') Tuan/Puan @endsection
@section('letter-subject') Perkara: ... @endsection
@section('letter-salutation') Assalamualaikum dan Salam Sejahtera, @endsection
@section('letter-body') ... @endsection
@@ -110,74 +111,27 @@
border-collapse: collapse;
}
.letterhead-line {
vertical-align: middle;
padding-right: 16px;
}
.letterhead-rule {
width: 100%;
border-collapse: collapse;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.letterhead-rule-blue {
background-color: var(--letter-color-blue);
font-size: 0;
line-height: 0;
}
.letterhead-rule-orange {
background-color: var(--letter-color-orange);
font-size: 0;
line-height: 0;
}
.letterhead-logo {
vertical-align: middle;
white-space: nowrap;
padding-right: 10px;
.letterhead-center {
text-align: center;
vertical-align: top;
}
.letterhead-logo-img {
height: var(--letter-logo-height);
width: auto;
display: block;
margin: 0 auto 8px;
}
.letterhead-brand {
vertical-align: middle;
white-space: nowrap;
padding-left: 4px;
}
.letterhead-brand-inner {
border-collapse: collapse;
}
.letterhead-name {
vertical-align: middle;
text-align: left;
padding-left: 2px;
}
.letterhead-name-line {
font-size: var(--letter-font-size);
font-weight: bold;
line-height: 1.25;
color: var(--letter-color-black);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.letterhead-registration {
.letterhead-address,
.letterhead-contact {
font-size: var(--letterhead-registration-size);
font-weight: bold;
line-height: 1.3;
line-height: 1.4;
color: var(--letter-color-black);
margin-top: 2px;
letter-spacing: 0.5px;
}
.letterhead-address {
margin-bottom: 4px;
}
.meta-table {
@@ -192,22 +146,25 @@
}
.meta-label {
width: 70px;
font-weight: bold;
white-space: nowrap;
padding-right: 4px;
vertical-align: top;
}
.meta-value {
padding-left: 4px;
}
.meta-date {
margin-top: 4px;
}
.recipient-block {
margin-bottom: var(--letter-recipient-margin-bottom);
}
.letter-honorific {
font-weight: bold;
margin-bottom: 8px;
}
.subject-block {
font-weight: bold;
margin-bottom: var(--letter-subject-margin-bottom);
@@ -223,6 +180,26 @@
margin: 0 0 var(--letter-body-paragraph-margin-bottom);
}
.letter-info-table {
width: 80%;
/* max-width: 50%; */
margin: 0 auto var(--letter-body-paragraph-margin-bottom);
border-collapse: collapse;
line-height: 1;
}
.letter-info-table th,
.letter-info-table td {
border: 1px solid var(--letter-color-black);
padding: 4px 8px;
vertical-align: top;
text-align: left;
}
.letter-info-table th {
font-weight: bold;
}
.signature-block {
padding-left: var(--letter-content-padding-x);
padding-right: var(--letter-content-padding-x);
@@ -267,43 +244,18 @@
table-layout: fixed;
}
.letter-footer-contact-box {
background-color: var(--letter-color-orange);
padding: 8px 12px;
.letter-footer-divider {
border-top: 1px solid var(--letter-color-black);
font-size: 0;
line-height: 0;
padding: 0;
}
.letter-footer-nota {
padding-top: 8px;
font-size: var(--letter-footer-font-size);
line-height: var(--letter-footer-line-height);
color: var(--letter-color-white);
vertical-align: middle;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.letter-footer-address-inner {
background-color: var(--letter-color-blue);
color: var(--letter-color-white);
padding: 8px 12px;
font-size: var(--letter-footer-font-size);
line-height: var(--letter-footer-line-height);
text-align: left;
vertical-align: middle;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.letter-footer-lines {
border-collapse: collapse;
}
.letter-footer-icon {
width: 18px;
padding: 2px 8px 2px 0;
vertical-align: middle;
}
.letter-footer-line-text {
padding: 2px 0;
color: var(--letter-color-white);
vertical-align: middle;
color: var(--letter-body-color);
}
@media print {
@@ -328,17 +280,22 @@
<div class="letter-content">
<div class="meta-table">
@if ($showReference && trim($__env->yieldContent('letter-reference')) !== '')
@if (($showReference && trim($__env->yieldContent('letter-reference')) !== '') || ($showDate && $letterDate !== ''))
<table cellpadding="0" cellspacing="0">
<tr>
<td class="meta-label">Ruj.</td>
<td class="meta-value">: @yield('letter-reference')</td>
</tr>
@if ($showReference && trim($__env->yieldContent('letter-reference')) !== '')
<tr>
<td class="meta-label">RUJ. KAMI</td>
<td class="meta-value">: @yield('letter-reference')</td>
</tr>
@endif
@if ($showDate && $letterDate !== '')
<tr>
<td class="meta-label">TARIKH</td>
<td class="meta-value">: {{ $letterDate }}</td>
</tr>
@endif
</table>
@endif
@if ($showDate && $letterDate !== '')
<div class="meta-date">{{ $letterDate }}</div>
@endif
</div>
@hasSection('letter-recipient')
@@ -347,6 +304,10 @@
</div>
@endif
@hasSection('letter-honorific')
<div class="letter-honorific">@yield('letter-honorific')</div>
@endif
@if ($showSubject && trim($__env->yieldContent('letter-subject')) !== '')
<div class="subject-block">
@yield('letter-subject')