mobile layout

2026-06-04 20:24:16 +07:00
parent 5e59063642
commit 3a6763cd43
3 changed files with 304 additions and 65 deletions
@@ -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;
+    }
+}
+