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

2026-06-04 20:19:00 +07:00
parent 09498578e9
commit 141eeeb629
3 changed files with 44 additions and 34 deletions
@@ -1205,7 +1205,7 @@ const translations = {
        grp_acaab_ach_empty: "No achievements match the current filter.",
        grp_acaab_ach_loading: "Loading achievements...",
        grp_acaab_ach_error: "Failed to load achievements.",
-        grp_acaab_proj_title: "Top Projects &amp; Portfolios",
+        grp_acaab_proj_title: "Top Projects & Portfolios",
        grp_acaab_proj_desc: "Explore digital innovations and real-world applications developed by Informatics UNTAN students.",
        grp_acaab_proj_scroll_hint: "← Scroll to see more →",
        grp_acaab_proj_search: "Search projects...",
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">

 <head>
@@ -1177,7 +1177,7 @@
                        style="background:rgba(254,180,1,0.08);filter:blur(80px);margin-right:-5rem;margin-top:-5rem;">
                    </div>

-                    <div class="container mx-auto px-4" style="max-width:1100px;">
+                    <div class="container mx-auto px-4 lg:px-8">
                        <div style="display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;"
                            class="lg-hero-grid">
                            <!-- Left: text -->
@@ -1260,7 +1260,7 @@
                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                    0</div>
                                <div
-                                    style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
+                                    style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
                                    Prestasi<br>Mahasiswa</div>
                            </div>
                            <!-- Internasional -->
@@ -1268,7 +1268,7 @@
                                <div id="stat-intl"
                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                    0</div>
-                                <div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
+                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
                                    data-i18n="grp_acaab_stats_intl">Internasional</div>
                            </div>
                            <!-- Nasional -->
@@ -1276,7 +1276,7 @@
                                <div id="stat-national"
                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                    0</div>
-                                <div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
+                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
                                    data-i18n="grp_acaab_stats_national">Nasional</div>
                            </div>
                            <!-- Regional -->
@@ -1284,7 +1284,7 @@
                                <div id="stat-regional"
                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                    0</div>
-                                <div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
+                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
                                    data-i18n="grp_acaab_stats_regional">Regional</div>
                            </div>
                            <!-- Proyek Mahasiswa (total) -->
@@ -1293,7 +1293,7 @@
                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                    0</div>
                                <div
-                                    style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
+                                    style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
                                    Proyek<br>Mahasiswa</div>
                            </div>
                        </div>
@@ -1355,7 +1355,7 @@

                    <!-- Cards grid -->
                    <div id="acaab-ach-grid"
-                        style="display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem;">
+                        style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;justify-content:center;">
                    </div>

                    <!-- Pagination buttons -->
@@ -1371,13 +1371,13 @@

                <!-- ── PROJECT CAROUSEL ───────────────────────────────────────────────── -->
                <section id="acaab-proj-section" class="not-prose acaab-full-bleed" style="padding:2.5rem 0 3rem;background:#f8fafc;">
-                    <div class="container mx-auto px-4" style="max-width:1100px;">
+                    <div class="container mx-auto px-4 lg:px-8">
                    <!-- Section header row: title + scroll buttons (seperti di React source) -->
                    <div
-                        style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;">
-                        <div>
+                        style="display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;">
+                        <div style="flex:1;min-width:250px;">
                            <h2 style="font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;color:#003150;margin:0 0 0.5rem;font-family:'Roboto Condensed',sans-serif;"
-                                data-i18n="grp_acaab_proj_title">Top Projects &amp; Portofolio</h2>
+                                data-i18n="grp_acaab_proj_title">Top Projects Portofolio</h2>
                            <p style="color:#64748b;font-size:1rem;max-width:42rem;margin:0;line-height:1.6;"
                                data-i18n="grp_acaab_proj_desc">Jelajahi inovasi digital dan aplikasi nyata yang dikembangkan oleh mahasiswa Informatika UNTAN.</p>
                        </div>
@@ -1444,8 +1444,8 @@

                <!-- ── CTA ────────────────────────────────────────────────────────────── -->
                <section class="not-prose acaab-full-bleed bg-untan-navy"
-                    style="padding:3.5rem 0;">
-                    <div class="container mx-auto px-4" style="max-width:1100px;">
+                    style="padding:3.5rem 0; margin-bottom:-3rem;">
+                    <div class="container mx-auto px-4 lg:px-8">
                        <!-- Inner card: kuning transparan dengan border, rounded-2xl -->
                        <div
                            style="background:rgba(254,180,1,0.08);border:1px solid rgba(254,180,1,0.2);border-radius:1rem;padding:2.5rem 2rem;">
@@ -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);">