mobile layout
This commit is contained in:
cw
+67
-61
@@ -475,70 +475,75 @@ function infoRow(icon, label, value) {
|
||||
|
||||
function memberItem(nama, sub) {
|
||||
const initial = (nama || '?').charAt(0).toUpperCase();
|
||||
return `<li style="display:flex;align-items:center;gap:0.5rem;background:#f8fafc;padding:0.5rem 0.75rem;border-radius:0.375rem;">
|
||||
<span style="width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(254,180,1,0.2);color:#b45309;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0;">${initial}</span>
|
||||
<div style="display:flex;flex-direction:column;">
|
||||
<span style="font-size:0.875rem;font-weight:600;color:#334155;line-height:1.2;">${escHtml(nama)}</span>
|
||||
${sub ? `<span style="font-size:0.65rem;color:#94a3b8;margin-top:0.125rem;">${escHtml(sub)}</span>` : ''}
|
||||
</div>
|
||||
return `<li style="display:flex;align-items:center;gap:0.375rem;background:#f8fafc;padding:0.35rem 0.5rem;border-radius:0.25rem;">
|
||||
<span style="width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(254,180,1,0.2);color:#b45309;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0;">${initial}</span>
|
||||
<span style="font-size:0.75rem;font-weight:600;color:#334155;line-height:1.2;white-space:nowrap;">
|
||||
${escHtml(nama)}${sub ? `<span style="font-weight:400;color:#64748b;margin-left:0.25rem;">${escHtml(sub)}</span>` : ''}
|
||||
</span>
|
||||
</li>`;
|
||||
}
|
||||
|
||||
function openAchModal(a) {
|
||||
const membersHtml = a.members && a.members.length > 0 ? `
|
||||
<div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1rem;">
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Anggota Tim</p>
|
||||
<ul style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
|
||||
${a.members.map(m => memberItem(m.nama, m.angkatan ? `Angkatan ${m.angkatan}` : '')).join('')}
|
||||
<div style="border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;margin-bottom:0.25rem;">
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.375rem;">Anggota Tim</p>
|
||||
<ul style="list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem;">
|
||||
${a.members.map(m => memberItem(m.nama, m.angkatan ? `(${m.angkatan})` : '')).join('')}
|
||||
</ul>
|
||||
</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;"
|
||||
<!-- Image header: blurred background + contain foreground to show full image in compact height -->
|
||||
<div style="position:relative;height:180px;width:100%;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#003150;flex-shrink:0;">
|
||||
<!-- Blurred background -->
|
||||
<img src="${escHtml(a.image)}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(12px) brightness(0.65);transform:scale(1.1);pointer-events:none;"
|
||||
onerror="this.style.display='none'">
|
||||
<!-- Sharp contain foreground -->
|
||||
<img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="position:relative;width:100%;height:100%;object-fit:contain;z-index:10;"
|
||||
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>
|
||||
<!-- Close button: white rounded-full -->
|
||||
<!-- Close button: dark round top-right -->
|
||||
<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);">
|
||||
<i class="fas fa-times" style="color:#334155;font-size:0.875rem;"></i>
|
||||
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);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);z-index:20;">
|
||||
<i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
|
||||
</button>
|
||||
<!-- Two badges bottom-left -->
|
||||
<div style="position:absolute;bottom:1rem;left:1rem;display:flex;gap:0.5rem;flex-wrap:wrap;">
|
||||
<span style="background:#feb401;color:#0f172a;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:0.25rem;display:flex;align-items:center;gap:0.375rem;">
|
||||
<i class="fas fa-trophy" style="font-size:0.65rem;"></i>${escHtml(a.rank)}
|
||||
</span>
|
||||
<span style="background:rgba(255,255,255,0.2);backdrop-filter:blur(4px);color:white;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:0.25rem;text-transform:uppercase;letter-spacing:0.05em;">
|
||||
${escHtml(a.level)}
|
||||
<!-- Badge bottom-left: Rank -->
|
||||
<div style="position:absolute;bottom:0.75rem;left:0.75rem;z-index:20;">
|
||||
<span style="background:#feb401;color:#0f172a;font-size:0.7rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:0.25rem;display:inline-block;">
|
||||
${escHtml(a.rank)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div style="padding:1.5rem;">
|
||||
<span style="color:#1e40af;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;">${escHtml(a.category)}</span>
|
||||
<h2 style="font-size:1.125rem;font-weight:700;color:#003150;line-height:1.3;margin:0.25rem 0 1.25rem;font-family:'Roboto Condensed',sans-serif;">${escHtml(a.title)}</h2>
|
||||
<!-- Info grid: slate-50 bg -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:#f8fafc;border-radius:0.5rem;margin-bottom:1.25rem;">
|
||||
${infoRow('users', t('grp_acaab_modal_team'), a.team)}
|
||||
${a.nim ? infoRow('id-card', 'NIM', a.nim) : ''}
|
||||
${infoRow('user-graduate', t('grp_acaab_modal_generation'), a.generation)}
|
||||
${infoRow('calendar-alt', 'Tahun', String(a.year))}
|
||||
${infoRow('award', 'Kompetisi', a.competition)}
|
||||
${infoRow('tag', 'Bidang', a.category)}
|
||||
</div>
|
||||
${membersHtml}
|
||||
<div style="padding:1rem 1.25rem 1.25rem 1.25rem;">
|
||||
<!-- Title -->
|
||||
<h2 style="font-size:1.2rem;font-weight:700;color:#003150;line-height:1.3;margin:0 0 0.25rem;font-family:'Roboto', sans-serif;">
|
||||
${escHtml(a.title)}
|
||||
</h2>
|
||||
|
||||
<!-- Subtitle (Year • Category • Level) -->
|
||||
<p style="color:#94a3b8;font-size:0.75rem;font-weight:500;margin:0 0 0.75rem;line-height:1.4;">
|
||||
${escHtml(String(a.year))} • ${escHtml(a.category)} • ${escHtml(a.level)}
|
||||
</p>
|
||||
|
||||
<!-- Description -->
|
||||
<div style="border-top:1px solid #f1f5f9;padding-top:1rem;">
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Deskripsi</p>
|
||||
<p style="color:#475569;font-size:0.875rem;line-height:1.65;margin:0;">${escHtml(a.description)}</p>
|
||||
</div>
|
||||
<!-- Close button full-width -->
|
||||
<button id="acaab-modal-close-btn" style="margin-top:1.5rem;width:100%;padding:0.75rem;background:#003150;color:white;font-weight:700;border:none;border-radius:0.5rem;cursor:pointer;font-size:0.875rem;">
|
||||
Tutup
|
||||
</button>
|
||||
<p style="color:#475569;font-size:0.85rem;line-height:1.5;margin:0 0 1rem;">
|
||||
${escHtml(a.description)}
|
||||
</p>
|
||||
|
||||
${membersHtml}
|
||||
|
||||
<!-- Footer Info Row (Tim & Angkatan) -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;">
|
||||
<div>
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">TIM / PESERTA</p>
|
||||
<p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.team)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">ANGKATAN</p>
|
||||
<p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.generation)}</p>
|
||||
</div>
|
||||
</div>
|
||||
`, true);
|
||||
`, false, 'acaab-modal-achievement');
|
||||
}
|
||||
|
||||
// ─── Projects ─────────────────────────────────────────────────────────────────
|
||||
@@ -608,22 +613,23 @@ function renderProjects() {
|
||||
|
||||
function projCardHtml(p, idx) {
|
||||
const catBadges = p.categories.map(c => `
|
||||
<span style="display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;font-weight:700;color:#feb401;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.3);padding:0.2rem 0.45rem;border-radius:0.2rem;backdrop-filter:blur(4px);">
|
||||
<span style="display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;font-weight:700;color:#feb401;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.45);padding:0.2rem 0.45rem;border-radius:0.2rem;backdrop-filter:blur(4px);">
|
||||
<i class="fas fa-tag" style="font-size:0.5rem;"></i>${escHtml(c)}
|
||||
</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-left-bar"></div>
|
||||
<!-- Image h-52 (208px) dengan title overlay -->
|
||||
<!-- Image h-52 (208px) dengan title overlay mengikuti lebar teks -->
|
||||
<div style="height:208px;overflow:hidden;position:relative;">
|
||||
<img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" loading="lazy" class="acaab-card-img"
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
|
||||
<!-- Gradient overlay: title + categories di dalam gambar -->
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,49,80,0.85),transparent);padding:1.25rem;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;">
|
||||
<h4 style="font-size:1rem;font-weight:700;color:white;line-height:1.25;margin:0 0 0.375rem;font-family:'Roboto Condensed',sans-serif;">${escHtml(p.title)}</h4>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:0.3rem;">${catBadges}</div>
|
||||
<!-- Overlay hanya di bawah untuk visibility, title pake background inline -->
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 60%);pointer-events:none;"></div>
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;padding:0.875rem 1rem;">
|
||||
<h4 style="font-size:0.9375rem;font-weight:700;color:white;line-height:1.3;margin:0 0 0.375rem;font-family:'Roboto Condensed',sans-serif;display:inline;background:rgba(0,49,80,0.75);padding:0.15rem 0.35rem;border-radius:0.2rem;box-decoration-break:clone;-webkit-box-decoration-break:clone;backdrop-filter:blur(2px);">${escHtml(p.title)}</h4>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.4rem;">${catBadges}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Body p-5 -->
|
||||
@@ -720,15 +726,15 @@ 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;">
|
||||
<!-- Image header h-70 (280px) -->
|
||||
<div style="position:relative;height:280px;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>
|
||||
<!-- Close button -->
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 55%,transparent 100%);pointer-events:none;"></div>
|
||||
<!-- Close button: dark round top-right -->
|
||||
<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);">
|
||||
<i class="fas fa-times" style="color:#334155;font-size:0.875rem;"></i>
|
||||
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);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);z-index:20;">
|
||||
<i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
|
||||
</button>
|
||||
<!-- Category badges bottom-left -->
|
||||
<div style="position:absolute;bottom:1rem;left:1rem;display:flex;flex-wrap:wrap;gap:0.375rem;">${catBadgesImg}</div>
|
||||
@@ -760,18 +766,18 @@ function openProjModal(p) {
|
||||
Tutup
|
||||
</button>
|
||||
</div>
|
||||
`, true);
|
||||
`, true, 'acaab-modal-project');
|
||||
}
|
||||
|
||||
// ─── Modal shared ─────────────────────────────────────────────────────────────
|
||||
|
||||
function renderModal(innerHtml, hasCloseBtn = false) {
|
||||
function renderModal(innerHtml, hasCloseBtn = false, customClass = '') {
|
||||
const container = document.getElementById('acaab-modal');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="acaab-modal-backdrop" id="acaab-modal-bd">
|
||||
<div style="background:white;border-radius:0.75rem;max-width:672px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.35);">
|
||||
<div class="${customClass}" style="background:white;border-radius:0.75rem;max-width:672px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.35);">
|
||||
${innerHtml}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
Reference in New Issue
Block a user