Anggota Tim
--
- ${a.members.map(m => memberItem(m.nama, m.angkatan ? `Angkatan ${m.angkatan}` : '')).join('')}
+
+
` : '';
renderModal(`
-
- Anggota Tim
+-
+ ${a.members.map(m => memberItem(m.nama, m.angkatan ? `(${m.angkatan})` : '')).join('')}
- })
+
+
+
+
+
-
-
+
-
-
-
- ${escHtml(a.rank)}
-
-
- ${escHtml(a.level)}
+
+
-
+
+ ${escHtml(a.rank)}
- ${escHtml(a.category)}
-
${escHtml(a.title)}
- -
- ${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)}
-
- ${membersHtml}
+
+
+
+ ${escHtml(a.title)} +
+ + ++ ${escHtml(String(a.year))} • ${escHtml(a.category)} • ${escHtml(a.level)} +
+ -
-
-
-
+ Deskripsi
-${escHtml(a.description)}
-+ ${escHtml(a.description)} +
+ + ${membersHtml} + + +
+
- `, true);
+ `, false, 'acaab-modal-achievement');
}
// ─── Projects ─────────────────────────────────────────────────────────────────
@@ -608,22 +613,23 @@ function renderProjects() {
function projCardHtml(p, idx) {
const catBadges = p.categories.map(c => `
-
+
${escHtml(c)}
`).join('');
return `
+
+ TIM / PESERTA
+${escHtml(a.team)}
+
+
ANGKATAN
+${escHtml(a.generation)}
+
-
+
})
-
- `;
renderModal(`
-
-
-
@@ -720,15 +726,15 @@ function openProjModal(p) {
${escHtml(p.title)}
-${catBadges}
+
+
+
+
${escHtml(p.title)}
+${catBadges}
+
+
-
-
+
+
- `, 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 = `
${catBadgesImg}
@@ -760,18 +766,18 @@ function openProjModal(p) {
Tutup
-
+
`;
diff --git a/groups/ACAAB/style.css b/groups/ACAAB/style.css
index 4aef586..86c49a2 100644
--- a/groups/ACAAB/style.css
+++ b/groups/ACAAB/style.css
@@ -204,3 +204,147 @@ body.acaab-modal-open {
.acaab-fade-in, .acaab-skeleton, .acaab-card-img,
.acaab-ach-card, .acaab-proj-card-wrap { animation: none !important; transition: none !important; }
}
+
+/* =====================================================
+ RESPONSIVE FIXES — Mobile & Desktop
+ ===================================================== */
+
+/* ── Achievement Grid ── */
+#acaab-ach-grid {
+ display: grid !important;
+ grid-template-columns: 1fr !important;
+ gap: 1rem !important;
+}
+@media (min-width: 480px) {
+ #acaab-ach-grid {
+ grid-template-columns: repeat(2, 1fr) !important;
+ }
+}
+@media (min-width: 900px) {
+ #acaab-ach-grid {
+ grid-template-columns: repeat(3, 1fr) !important;
+ gap: 1.5rem !important;
+ }
+}
+
+/* ── Project carousel card: ukuran responsif ── */
+@media (max-width: 479px) {
+ .acaab-proj-card {
+ width: 85vw !important;
+ }
+}
+@media (min-width: 480px) and (max-width: 767px) {
+ .acaab-proj-card {
+ width: 72vw !important;
+ }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+ .acaab-proj-card {
+ width: 42vw !important;
+ }
+}
+@media (min-width: 1024px) {
+ .acaab-proj-card {
+ width: 28vw !important;
+ max-width: 340px;
+ }
+}
+
+/* ── Hero: sembunyikan gambar di mobile kecil ── */
+@media (max-width: 639px) {
+ #acaab-hero-img-wrap {
+ display: none !important;
+ }
+}
+@media (min-width: 640px) and (max-width: 1023px) {
+ #acaab-hero-img-wrap img {
+ max-width: 220px !important;
+ }
+ #acaab-hero-img-wrap {
+ display: flex !important;
+ }
+ .lg-hero-grid {
+ grid-template-columns: 1fr 1fr !important;
+ }
+}
+
+/* ── Stats: angka lebih kecil di mobile kecil ── */
+@media (max-width: 479px) {
+ #stat-total-ach, #stat-intl, #stat-national, #stat-regional, #stat-total-proj {
+ font-size: 1.65rem !important;
+ }
+}
+
+/* ── Modal: bottom-sheet di mobile ── */
+@media (max-width: 639px) {
+ .acaab-modal-backdrop {
+ padding: 0 !important;
+ align-items: flex-end !important;
+ }
+ .acaab-modal-backdrop > div {
+ max-width: 100% !important;
+ width: 100% !important;
+ max-height: 88vh !important;
+ border-radius: 1rem 1rem 0 0 !important;
+ }
+}
+
+/* ── Project section header: buttons di mobile ── */
+@media (max-width: 479px) {
+ #acaab-proj-prev, #acaab-proj-next {
+ width: 2rem !important;
+ height: 2rem !important;
+ }
+}
+
+/* ── Filter dropdowns: stack secara vertikal di HP kecil ── */
+@media (max-width: 399px) {
+ #acaab-ach-filters > div:last-child,
+ #acaab-proj-filters > div:last-child {
+ flex-direction: column;
+ }
+ #acaab-ach-filters select,
+ #acaab-proj-filters select {
+ min-width: 0 !important;
+ width: 100% !important;
+ }
+}
+
+/* ── Pagination buttons: lebih kecil di mobile ── */
+@media (max-width: 479px) {
+ #acaab-ach-more, #acaab-ach-less, #acaab-proj-more {
+ width: 100% !important;
+ box-sizing: border-box !important;
+ }
+}
+
+/* ── Hero padding responsif ── */
+@media (max-width: 639px) {
+ #acaab-hero {
+ padding-top: 2rem !important;
+ }
+ #acaab-hero > div > div {
+ padding-bottom: 1.5rem !important;
+ }
+}
+
+/* ── Modal Achievement: lebih kecil di desktop sesuai mockup ── */
+@media (min-width: 640px) {
+ .acaab-modal-achievement {
+ max-width: 440px !important;
+ }
+}
+
+/* Tetap centered card di mobile (bukan bottom sheet) untuk prestasi */
+@media (max-width: 639px) {
+ .acaab-modal-backdrop:has(.acaab-modal-achievement) {
+ padding: 1rem !important;
+ align-items: center !important;
+ }
+ .acaab-modal-achievement {
+ max-width: 92% !important;
+ max-height: 90vh !important;
+ border-radius: 0.75rem !important;
+ }
+}
+
${innerHtml}