style(tatib): PDF kartu pelanggaran siswa (/students) — margin atas 8mm→6mm, font isi diseragamkan 12pt (identitas, rekap, tabel riwayat, ttd, footer), judul 14pt, tetap A4 portrait

This commit is contained in:
Novy San87
2026-08-26 10:53:01 +07:00
parent b72c105247
commit bc4b481631
2 changed files with 20 additions and 20 deletions
+4 -4
View File
@@ -6,8 +6,8 @@
<thead> <thead>
<tr> <tr>
<th style="width:5%;">No</th> <th style="width:5%;">No</th>
<th style="width:15%;">Tanggal</th> <th style="width:16%;">Tanggal</th>
<th style="width:48%;">Jenis Pelanggaran</th> <th style="width:47%;">Jenis Pelanggaran</th>
<th style="width:8%;">Poin</th> <th style="width:8%;">Poin</th>
<th style="width:24%;">Sanksi</th> <th style="width:24%;">Sanksi</th>
</tr> </tr>
@@ -16,11 +16,11 @@
@foreach($items as $i => $v) @foreach($items as $i => $v)
<tr> <tr>
<td style="text-align:center;">{{ $i + 1 }}</td> <td style="text-align:center;">{{ $i + 1 }}</td>
<td>{{ \Carbon\Carbon::parse($v->violation_date)->locale('id')->translatedFormat('l, d/m/Y') }}</td> <td>{{ \Carbon\Carbon::parse($v->violation_date)->format('d/m/Y') }}</td>
<td> <td>
<b>{{ $v->violationType?->name ?? '—' }}</b> <b>{{ $v->violationType?->name ?? '—' }}</b>
@if($v->description) @if($v->description)
<div style="color:#475569;font-size:9px;">{{ $v->description }}</div> <div style="color:#475569;">{{ $v->description }}</div>
@endif @endif
</td> </td>
<td style="text-align:center;font-weight:bold;color:#dc2626;">+{{ $v->points }}</td> <td style="text-align:center;font-weight:bold;color:#dc2626;">+{{ $v->points }}</td>
+16 -16
View File
@@ -7,7 +7,7 @@
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { body {
font-family: 'DejaVu Sans', sans-serif; font-family: 'DejaVu Sans', sans-serif;
font-size: 11px; font-size: 12pt;
color: #1e293b; color: #1e293b;
line-height: 1.5; line-height: 1.5;
} }
@@ -31,7 +31,7 @@
text-align: center; text-align: center;
background: #0f766e; background: #0f766e;
color: #ffffff; color: #ffffff;
font-size: 13px; font-size: 14pt;
font-weight: bold; font-weight: bold;
padding: 7px 0; padding: 7px 0;
border-radius: 5px; border-radius: 5px;
@@ -39,7 +39,7 @@
margin-bottom: 14px; margin-bottom: 14px;
} }
.section-title { .section-title {
font-size: 10px; font-size: 12pt;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
@@ -49,7 +49,7 @@
margin: 14px 0 7px 0; margin: 14px 0 7px 0;
} }
.sub-title { .sub-title {
font-size: 9.5px; font-size: 12pt;
font-weight: bold; font-weight: bold;
color: #0f766e; color: #0f766e;
margin: 8px 0 4px 0; margin: 8px 0 4px 0;
@@ -60,7 +60,7 @@
} }
table.identitas td { table.identitas td {
padding: 4px 6px; padding: 4px 6px;
font-size: 11px; font-size: 12pt;
} }
table.identitas td.label { table.identitas td.label {
width: 28%; width: 28%;
@@ -85,12 +85,12 @@
width: 33.33%; width: 33.33%;
} }
.kartu-poin .angka { .kartu-poin .angka {
font-size: 15px; font-size: 12pt;
font-weight: bold; font-weight: bold;
color: #0f766e; color: #0f766e;
} }
.kartu-poin .kecil { .kartu-poin .kecil {
font-size: 8.5px; font-size: 12pt;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
color: #64748b; color: #64748b;
@@ -103,7 +103,7 @@
table.riwayat th { table.riwayat th {
background: #0f766e; background: #0f766e;
color: #fff; color: #fff;
font-size: 8.5px; font-size: 12pt;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
padding: 4px 4px; padding: 4px 4px;
@@ -114,7 +114,7 @@
table.riwayat td { table.riwayat td {
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
padding: 3px 5px; padding: 3px 5px;
font-size: 9px; font-size: 12pt;
vertical-align: top; vertical-align: top;
} }
table.riwayat tr:nth-child(even) td { table.riwayat tr:nth-child(even) td {
@@ -124,14 +124,14 @@
display: inline-block; display: inline-block;
padding: 2px 9px; padding: 2px 9px;
border-radius: 8px; border-radius: 8px;
font-size: 9.5px; font-size: 12pt;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
background: #dc2626; background: #dc2626;
} }
.ttd { .ttd {
margin-top: 14px; margin-top: 14px;
font-size: 11px; font-size: 12pt;
color: #1e293b; color: #1e293b;
text-align: left; text-align: left;
padding-left: 118mm; padding-left: 118mm;
@@ -145,17 +145,17 @@
.ttd-nama { .ttd-nama {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
font-size: 12px; font-size: 12pt;
margin-top: 4px; margin-top: 4px;
} }
.ttd-nip { .ttd-nip {
font-size: 10px; font-size: 12pt;
color: #475569; color: #475569;
margin-top: 2px; margin-top: 2px;
} }
.footer-note { .footer-note {
margin-top: 16px; margin-top: 16px;
font-size: 8.5px; font-size: 12pt;
color: #94a3b8; color: #94a3b8;
border-top: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0;
padding-top: 6px; padding-top: 6px;
@@ -170,7 +170,7 @@
</style> </style>
</head> </head>
<body> <body>
<div style="padding: 8mm 14mm 15mm 14mm;"> <div style="padding: 6mm 14mm 15mm 14mm;">
<div class="kop"> <div class="kop">
<div class="nama-sekolah">{{ strtoupper($school['name']) }}</div> <div class="nama-sekolah">{{ strtoupper($school['name']) }}</div>
@@ -241,7 +241,7 @@
@endif @endif
@if($nextSpThreshold) @if($nextSpThreshold)
<div style="margin-top:10px;font-size:9px;color:#475569;"> <div style="margin-top:10px;font-size:12pt;color:#475569;">
* Poin menuju SP berikutnya ({{ $nextSpThreshold->name }}) : {{ $nextSpThreshold->min_points - $totalPoints }} poin lagi. * Poin menuju SP berikutnya ({{ $nextSpThreshold->name }}) : {{ $nextSpThreshold->min_points - $totalPoints }} poin lagi.
</div> </div>
@endif @endif