Araya/student-web-if-development-kit
2
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity

menyesuaikan layout setelah migrasi ke html, terkhusus pada layout card achievement dan portofolio

Browse Source
This commit is contained in:
BobbyAndrean
2026-06-04 20:19:00 +07:00
parent 09498578e9
commit 141eeeb629
3 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/ACAAB/main.js
+29 -19
View File
@@ -181,7 +181,7 @@ document.addEventListener('DOMContentLoaded', async () => {
]);
if (achResult.status === 'fulfilled') {
achievements = achResult.value;
achievements = achResult.value.sort((a, b) => b.year - a.year);
} else {
console.error('[ACAAB] achievements error:', achResult.reason);
showError('acaab-ach-grid', t('grp_acaab_ach_error'));
@@ -359,9 +359,11 @@ function renderAchievements() {
if (moreBtn) moreBtn.style.display = achVisible < filtered.length ? 'inline-block' : 'none';
if (lessBtn) lessBtn.style.display = achVisible > ACH_INIT ? 'inline-block' : 'none';
grid.querySelectorAll('.acaab-ach-readmore').forEach(btn => {
btn.addEventListener('click', () => {
const ach = achievements.find(a => a.id === btn.dataset.id);
grid.querySelectorAll('.acaab-ach-card').forEach(card => {
card.addEventListener('click', (e) => {
// Biarkan tombol yang merupakan link tetap berfungsi
if (e.target.closest('a')) return;
const ach = achievements.find(a => a.id === card.dataset.id);
if (ach) openAchModal(ach);
});
});
@@ -369,7 +371,7 @@ function renderAchievements() {
function achCardHtml(a, idx) {
return `
<article class="acaab-ach-card acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
<article class="acaab-ach-card acaab-fade-in" data-id="${escHtml(a.id)}" style="animation-delay:${idx * 0.05}s;cursor:pointer;">
<div class="acaab-ach-top-bar"></div>
<!-- Image h-56 (224px) -->
<div style="position:relative;height:224px;overflow:hidden;background:#f1f5f9;">
@@ -494,11 +496,11 @@ function openAchModal(a) {
</div>` : '';
renderModal(`
<!-- Image header h-56 -->
<div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
<img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;height:100%;object-fit:cover;"
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
<!-- Image header -->
<div style="position:relative;border-radius:0.75rem 0.75rem 0 0;background:#0f172a;flex-shrink:0;">
<img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;max-height:450px;object-fit:contain;display:block;"
onerror="this.src='https://placehold.co/800x600/0f172a/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 40%,transparent 100%);pointer-events:none;"></div>
<!-- Close button: white rounded-full -->
<button id="acaab-modal-close" aria-label="Tutup"
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
@@ -598,9 +600,17 @@ function renderProjects() {
track.innerHTML = visible.map((p, i) => projCardHtml(p, i)).join('');
if (moreBtn) moreBtn.style.display = projVisible < filtered.length ? 'inline-block' : 'none';
track.querySelectorAll('.acaab-proj-readmore').forEach(btn => {
btn.addEventListener('click', () => {
const proj = projects.find(p => p.id === btn.dataset.id);
// Responsif: Sembunyikan scroll button & center jika cuma 1 data
const prevBtn = document.getElementById('acaab-proj-prev');
const nextBtn = document.getElementById('acaab-proj-next');
if (prevBtn) prevBtn.style.display = filtered.length <= 1 ? 'none' : 'flex';
if (nextBtn) nextBtn.style.display = filtered.length <= 1 ? 'none' : 'flex';
track.style.justifyContent = filtered.length === 1 ? 'center' : 'flex-start';
track.querySelectorAll('.acaab-proj-card-wrap').forEach(card => {
card.addEventListener('click', (e) => {
if (e.target.closest('a') && e.target.closest('a').href) return;
const proj = projects.find(p => p.id === card.dataset.id);
if (proj) openProjModal(proj);
});
});
@@ -613,7 +623,7 @@ function projCardHtml(p, idx) {
</span>`).join('');
return `
<div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
<div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" data-id="${escHtml(p.id)}" style="animation-delay:${idx * 0.05}s;cursor:pointer;">
<div class="acaab-proj-left-bar"></div>
<!-- Image h-52 (208px) dengan title overlay -->
<div style="height:208px;overflow:hidden;position:relative;">
@@ -720,11 +730,11 @@ function openProjModal(p) {
</div>`;
renderModal(`
<!-- Image header h-56 -->
<div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
<img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;height:100%;object-fit:cover;"
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
<!-- Image header -->
<div style="position:relative;border-radius:0.75rem 0.75rem 0 0;background:#0f172a;flex-shrink:0;">
<img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;max-height:450px;object-fit:contain;display:block;"
onerror="this.src='https://placehold.co/800x600/0f172a/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 40%,transparent 100%);pointer-events:none;"></div>
<!-- Close button -->
<button id="acaab-modal-close" aria-label="Tutup"
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">