daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(print-out): perbaikan foto

Browse Source
This commit is contained in:
majid
2025-02-04 13:33:16 +07:00
parent 075567f84c
commit 165042db38
5 changed files with 143 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
resources/views/penilai/components/foto-jaminan.blade.php
View File

@@ -9,7 +9,7 @@
'foto_rute_lainnya' => [
'key' => 'name_rute_lainnya',
'name_prefix' => '',
'nested' => false,
'nested' => true,
],
'foto_lingkungan' => [
'key' => 'foto_lingkungan',
@@ -36,33 +36,91 @@
$hasPhotos = false;
@endphp
<style>
.photo-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.photo-item {
width: 100%; /* Adjust to fit two photos per row */
margin-bottom: 10px;
}
.photo-item img {
width: 80%;
height: auto;
border-radius: 5px;
}
</style>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.photo-container {
width: 100%;
margin-bottom: 10px;
clear: both;
page-break-inside: avoid;
}
.photo-row {
width: 100%;
clear: both;
page-break-inside: avoid;
}
.photo-item {
width: 48%;
margin-right: 2%;
float: left;
padding: 5px;
box-sizing: border-box;
page-break-inside: avoid;
}
.photo-item:nth-child(2n) {
margin-right: 0;
}
/* Image Styling */
.photo-item img {
max-width: 100%;
height: auto;
object-fit: cover;
}
/* Clearfix */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Media Print */
@media print {
.photo-item {
width: 48%;
margin-right: 2%;
float: left;
padding: 5px;
box-sizing: border-box;
page-break-inside: avoid;
}
.photo-item img {
max-width: 100%;
height: auto;
object-fit: contain;
}
h2 {
font-size: 14px;
margin-bottom: 5px;
}
}
</style>
@foreach ($photoSections as $sectionKey => $sectionConfig)
@if ($sectionKey === 'single_photos')
<div class="photo-container">
@php $counter = 0; @endphp
@foreach ($sectionConfig as $photoKey => $photoName)
@if (isset($formFoto[$photoKey]) && !empty($formFoto[$photoKey]))
@php
$imagePath = storage_path('app/public/' . $formFoto[$photoKey]);
$hasPhotos = true;
@endphp
@if ($counter % 2 == 0)
<div class="photo-row clearfix">
@endif
<div class="photo-item border">
<h2 class="text-gray-600 font-semibold text-xl">
{{ $photoName }}
@@ -71,6 +129,10 @@
<img src="{{ $imagePath }}" alt="{{ $photoName }}" class="photo-image">
@endif
</div>
@if ($counter % 2 == 1 || $loop->last)
</div> <!-- Tutup baris setelah 2 item atau di akhir loop -->
@endif
@php $counter++; @endphp
@endif
@endforeach
</div>
@@ -83,11 +145,15 @@
@if ($sectionConfig['nested'])
@if (isset($sectionData[$sectionConfig['key']][0]))
<div class="photo-container">
@php $counter = 0; @endphp
@foreach ($sectionData[$sectionConfig['key']][0] as $index => $item)
@php
$imagePath = storage_path('app/public/' . $item['path']);
$hasPhotos = true;
@endphp
@if ($counter % 2 == 0)
<div class="photo-row clearfix">
@endif
<div class="photo-item border">
<h2 class="text-gray-600 font-semibold text-xl">
{{ $sectionConfig['name_prefix']
@@ -98,11 +164,16 @@
<img src="{{ $imagePath }}" alt="{{ $item['path'] }}" class="photo-image">
@endif
</div>
@if ($counter % 2 == 1 || $loop->last)
</div> <!-- Tutup baris setelah 2 item atau di akhir loop -->
@endif
@php $counter++; @endphp
@endforeach
</div>
@endif
@else
<div class="photo-container">
@php $counter = 0; @endphp
@foreach ($sectionData as $index => $item)
@php
$name = $item[$sectionConfig['key']] ?? '';
@@ -116,6 +187,9 @@
@if (!empty($name) || !empty($photoPath))
@php $hasPhotos = true; @endphp
@if ($counter % 2 == 0)
<div class="photo-row clearfix">
@endif
<div class="photo-item border">
@if (!empty($name))
<h2 class="text-gray-600 font-semibold text-xl">
@@ -126,6 +200,10 @@
<img src="{{ $imagePath }}" alt="{{ $name ?: 'Foto' }}" class="photo-image">
@endif
</div>
@if ($counter % 2 == 1 || $loop->last)
</div> <!-- Tutup baris setelah 2 item atau di akhir loop -->
@endif
@php $counter++; @endphp
@endif
@endforeach
</div>