ikan Uploader :
Directory : /var/www/new-ppid-app/partials/
Upload File : |
| Current File : /var/www/new-ppid-app/partials/dokumen-koleksi.php |
<?php
/**
* Partial: koleksi dokumen dengan pilihan tampilan Grid / List.
*
* Variabel sebelum include:
* $dokumen array Baris dokumen (wajib ada: id, judul, deskripsi, tahun,
* downloads, kategori_nama, warna, icon; opsional upd_singkatan/upd_nama).
* $accent string 'green' (default) atau 'blue' untuk warna tombol aktif.
* $resultText string Teks ringkasan di kiri toolbar (sudah aman/escaped). Opsional.
*/
$accent = $accent ?? 'green';
$resultText = $resultText ?? '';
?>
<style>
/* ===== Pilihan tampilan dokumen (grid / list) ===== */
#docContainer .doc-link { display:flex; flex-direction:column; gap:.85rem; padding:1.25rem 1.5rem; height:100%; }
#docContainer .doc-icon { flex-shrink:0; }
#docContainer .doc-main { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
#docContainer .doc-desc { flex:1 1 auto; }
#docContainer .doc-meta { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; border-top:1px solid #f1f5f9; padding-top:.85rem; }
#docContainer .doc-open { display:none; }
#docContainer:not(.view-list) .doc-card { transition: transform .25s, box-shadow .25s; }
#docContainer:not(.view-list) .doc-card:hover { transform: translateY(-4px); }
/* List mode */
#docContainer.view-list { display:flex; flex-direction:column; gap:.6rem; }
#docContainer.view-list .doc-link { flex-direction:row; align-items:center; gap:1rem; padding:.85rem 1.25rem; }
#docContainer.view-list .doc-desc { display:none; }
#docContainer.view-list .doc-meta { border-top:0; padding-top:0; margin-left:auto; flex-shrink:0; }
#docContainer.view-list .doc-open { display:inline-flex; }
#docContainer.view-list .doc-title { font-size:.95rem; }
</style>
<div class="flex items-center justify-between gap-3 mb-5">
<p class="text-sm text-slate-500"><?= $resultText ?></p>
<div class="inline-flex items-center bg-white border border-slate-200 rounded-lg p-1 shadow-sm shrink-0">
<button type="button" data-view="grid" class="view-btn px-3 py-1.5 rounded-md text-sm transition-colors" title="Tampilan grid" aria-label="Tampilan grid"><i class="fas fa-grip"></i></button>
<button type="button" data-view="list" class="view-btn px-3 py-1.5 rounded-md text-sm transition-colors" title="Tampilan daftar" aria-label="Tampilan daftar"><i class="fas fa-list-ul"></i></button>
</div>
</div>
<div id="docContainer" data-accent="<?= e($accent) ?>" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach ($dokumen as $d):
$c = kategori_warna($d['warna']); ?>
<article class="doc-card bg-white border border-slate-100 rounded-2xl shadow-sm hover:shadow-md transition-all overflow-hidden">
<a href="<?= e(url('dokumen.php?id=' . $d['id'])) ?>" class="doc-link group">
<div class="doc-icon w-11 h-11 <?= $c['icon_bg'] ?> <?= $c['icon_text'] ?> rounded-lg flex items-center justify-center text-lg"><i class="fas <?= e($d['icon']) ?>"></i></div>
<div class="doc-main">
<div class="flex items-center gap-2 mb-1 flex-wrap">
<span class="text-xs font-semibold text-slate-500 uppercase tracking-wide"><?= e($d['kategori_nama']) ?></span>
<?php if (!empty($d['upd_singkatan']) || !empty($d['upd_nama'])): ?>
<span class="text-[10px] font-bold text-mateng-blue bg-blue-50 px-2 py-0.5 rounded-full" title="<?= e($d['upd_nama'] ?? '') ?>"><?= e($d['upd_singkatan'] ?: $d['upd_nama']) ?></span>
<?php endif; ?>
</div>
<h3 class="doc-title font-bold text-slate-800 leading-snug group-hover:text-mateng-green transition-colors"><?= e($d['judul']) ?></h3>
<p class="doc-desc text-sm text-slate-500 mt-2"><?= e(excerpt($d['deskripsi'], 110)) ?></p>
</div>
<div class="doc-meta text-xs text-slate-400">
<?php if (!empty($d['tahun'])): ?><span><i class="far fa-calendar mr-1"></i><?= e($d['tahun']) ?></span><?php endif; ?>
<?php if (!empty($d['unit_kerja'])): ?><span class="hidden sm:inline"><i class="far fa-building mr-1"></i><?= e(excerpt($d['unit_kerja'], 24)) ?></span><?php endif; ?>
<span><i class="fas fa-download mr-1"></i><?= (int) $d['downloads'] ?></span>
<span class="doc-open items-center gap-1 text-mateng-green font-semibold ml-1">Buka <i class="fas fa-arrow-right text-[10px]"></i></span>
</div>
</a>
</article>
<?php endforeach; ?>
</div>
<script>
(function () {
var cont = document.getElementById('docContainer');
var btns = document.querySelectorAll('.view-btn');
if (!cont || !btns.length) return;
var activeCls = cont.getAttribute('data-accent') === 'blue' ? 'bg-mateng-blue text-white' : 'bg-mateng-green text-white';
function apply(view) {
cont.classList.toggle('view-list', view === 'list');
btns.forEach(function (b) {
var on = b.getAttribute('data-view') === view;
b.className = 'view-btn px-3 py-1.5 rounded-md text-sm transition-colors ' + (on ? activeCls : 'text-slate-500 hover:text-slate-800');
});
try { localStorage.setItem('ppidDocView', view); } catch (e) {}
}
var saved = 'grid';
try { saved = localStorage.getItem('ppidDocView') || 'grid'; } catch (e) {}
apply(saved === 'list' ? 'list' : 'grid');
btns.forEach(function (b) { b.addEventListener('click', function () { apply(b.getAttribute('data-view')); }); });
})();
</script>
Kontol Shell Bypass