forked from izu/student-web-if-development-kit
fix layout mobile
This commit is contained in:
cw
+70
-71
@@ -1234,67 +1234,65 @@
|
|||||||
<div
|
<div
|
||||||
style="background:#feb401;border-radius:0.75rem;box-shadow:0 10px 30px -10px rgba(253,184,19,0.4);padding:1.25rem 1.5rem 1.5rem;">
|
style="background:#feb401;border-radius:0.75rem;box-shadow:0 10px 30px -10px rgba(253,184,19,0.4);padding:1.25rem 1.5rem 1.5rem;">
|
||||||
|
|
||||||
<!-- Row 1: Dua chip header navy -->
|
<div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
|
||||||
<div style="display:flex;gap:0.75rem;margin-bottom:1.25rem;">
|
<!-- Prestasi Block -->
|
||||||
<!-- TOTAL PRESTASI chip — lebar 4x -->
|
<div style="flex:4;min-width:240px;">
|
||||||
<div
|
<div style="background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;margin-bottom:1.25rem;">
|
||||||
style="flex:4;background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;">
|
<span style="color:white;font-size:0.875rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
|
||||||
<span
|
data-i18n="grp_acaab_stats_total_ach">Total Prestasi</span>
|
||||||
style="color:white;font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
|
</div>
|
||||||
data-i18n="grp_acaab_stats_total_ach">Total Prestasi</span>
|
<div style="display:flex;gap:0.25rem;">
|
||||||
|
<!-- Prestasi Mahasiswa (total) -->
|
||||||
|
<div style="flex:1;text-align:center;padding:0 0.15rem;">
|
||||||
|
<div id="stat-total-ach"
|
||||||
|
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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
|
||||||
|
Prestasi<br>Mahasiswa</div>
|
||||||
|
</div>
|
||||||
|
<!-- Internasional -->
|
||||||
|
<div style="flex:1;text-align:center;padding:0 0.15rem;">
|
||||||
|
<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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
|
||||||
|
data-i18n="grp_acaab_stats_intl">Internasional</div>
|
||||||
|
</div>
|
||||||
|
<!-- Nasional -->
|
||||||
|
<div style="flex:1;text-align:center;padding:0 0.15rem;">
|
||||||
|
<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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
|
||||||
|
data-i18n="grp_acaab_stats_national">Nasional</div>
|
||||||
|
</div>
|
||||||
|
<!-- Regional -->
|
||||||
|
<div style="flex:1;text-align:center;padding:0 0.15rem;">
|
||||||
|
<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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
|
||||||
|
data-i18n="grp_acaab_stats_regional">Regional</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- TOTAL PORTOFOLIO chip — lebar 1x -->
|
|
||||||
<div
|
|
||||||
style="flex:1;background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;">
|
|
||||||
<span
|
|
||||||
style="color:white;font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
|
|
||||||
data-i18n="grp_acaab_stats_total_proj">Total Portofolio</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Row 2: 5 angka sejajar (4 prestasi + 1 proyek) -->
|
<!-- Proyek Block -->
|
||||||
<div style="display:flex;gap:0.25rem;">
|
<div style="flex:1;min-width:120px;">
|
||||||
<!-- Prestasi Mahasiswa (total) -->
|
<div style="background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;margin-bottom:1.25rem;">
|
||||||
<div style="flex:1;text-align:center;padding:0 0.25rem;">
|
<span style="color:white;font-size:0.875rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
|
||||||
<div id="stat-total-ach"
|
data-i18n="grp_acaab_stats_total_proj">Total Portofolio</span>
|
||||||
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
|
</div>
|
||||||
0</div>
|
<div style="display:flex;justify-content:center;">
|
||||||
<div
|
<!-- Proyek Mahasiswa (total) -->
|
||||||
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;">
|
<div style="text-align:center;padding:0 0.15rem;">
|
||||||
Prestasi<br>Mahasiswa</div>
|
<div id="stat-total-proj"
|
||||||
</div>
|
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
|
||||||
<!-- Internasional -->
|
0</div>
|
||||||
<div style="flex:1;text-align:center;padding:0 0.25rem;">
|
<div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
|
||||||
<div id="stat-intl"
|
Proyek<br>Mahasiswa</div>
|
||||||
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
|
</div>
|
||||||
0</div>
|
</div>
|
||||||
<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 -->
|
|
||||||
<div style="flex:1;text-align:center;padding:0 0.25rem;">
|
|
||||||
<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: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 -->
|
|
||||||
<div style="flex:1;text-align:center;padding:0 0.25rem;">
|
|
||||||
<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: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) -->
|
|
||||||
<div style="flex:1;text-align:center;padding:0 0.25rem;">
|
|
||||||
<div id="stat-total-proj"
|
|
||||||
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: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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1381,17 +1379,6 @@
|
|||||||
<p style="color:#64748b;font-size:1rem;max-width:42rem;margin:0;line-height:1.6;"
|
<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>
|
data-i18n="grp_acaab_proj_desc">Jelajahi inovasi digital dan aplikasi nyata yang dikembangkan oleh mahasiswa Informatika UNTAN.</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- Scroll control buttons (atas, kanan) -->
|
|
||||||
<div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;margin-top:0.25rem;">
|
|
||||||
<button id="acaab-proj-prev" aria-label="Geser kiri"
|
|
||||||
style="width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
|
|
||||||
<i class="fas fa-chevron-left" style="font-size:0.875rem;"></i>
|
|
||||||
</button>
|
|
||||||
<button id="acaab-proj-next" aria-label="Geser kanan"
|
|
||||||
style="width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
|
|
||||||
<i class="fas fa-chevron-right" style="font-size:0.875rem;"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filter panel -->
|
<!-- Filter panel -->
|
||||||
@@ -1433,6 +1420,18 @@
|
|||||||
<div id="acaab-proj-track" class="acaab-carousel-track acaab-hide-scrollbar"
|
<div id="acaab-proj-track" class="acaab-carousel-track acaab-hide-scrollbar"
|
||||||
style="display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:1rem;"></div>
|
style="display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:1rem;"></div>
|
||||||
|
|
||||||
|
<!-- Scroll control buttons (bawah) -->
|
||||||
|
<div style="display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;">
|
||||||
|
<button id="acaab-proj-prev" aria-label="Geser kiri"
|
||||||
|
style="width:3rem;height:3rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
|
||||||
|
<i class="fas fa-chevron-left" style="font-size:1rem;"></i>
|
||||||
|
</button>
|
||||||
|
<button id="acaab-proj-next" aria-label="Geser kanan"
|
||||||
|
style="width:3rem;height:3rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
|
||||||
|
<i class="fas fa-chevron-right" style="font-size:1rem;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Load more -->
|
<!-- Load more -->
|
||||||
<div style="text-align:center;margin-top:1.5rem;">
|
<div style="text-align:center;margin-top:1.5rem;">
|
||||||
<button id="acaab-proj-more"
|
<button id="acaab-proj-more"
|
||||||
@@ -1444,7 +1443,7 @@
|
|||||||
|
|
||||||
<!-- ── CTA ────────────────────────────────────────────────────────────── -->
|
<!-- ── CTA ────────────────────────────────────────────────────────────── -->
|
||||||
<section class="not-prose acaab-full-bleed bg-untan-navy"
|
<section class="not-prose acaab-full-bleed bg-untan-navy"
|
||||||
style="padding:3.5rem 0; margin-bottom:-3rem;">
|
style="padding:3.5rem 0; margin-bottom: 3rem;">
|
||||||
<div class="container mx-auto px-4 lg:px-8">
|
<div class="container mx-auto px-4 lg:px-8">
|
||||||
<!-- Inner card: kuning transparan dengan border, rounded-2xl -->
|
<!-- Inner card: kuning transparan dengan border, rounded-2xl -->
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -570,13 +570,18 @@ function buildProjFilterOptions() {
|
|||||||
|
|
||||||
function filterProjects() {
|
function filterProjects() {
|
||||||
const q = projFilter.search.toLowerCase();
|
const q = projFilter.search.toLowerCase();
|
||||||
return projects.filter(p => {
|
const result = projects.filter(p => {
|
||||||
const matchSearch = !q || [p.title, p.studentName, p.description, ...p.categories]
|
const matchSearch = !q || [p.title, p.studentName, p.description, ...p.categories]
|
||||||
.some(s => (s || '').toLowerCase().includes(q));
|
.some(s => (s || '').toLowerCase().includes(q));
|
||||||
const matchCat = !projFilter.cat || p.categories.includes(projFilter.cat);
|
const matchCat = !projFilter.cat || p.categories.includes(projFilter.cat);
|
||||||
const matchYear = !projFilter.year || String(p.year) === projFilter.year;
|
const matchYear = !projFilter.year || String(p.year) === projFilter.year;
|
||||||
return matchSearch && matchCat && matchYear;
|
return matchSearch && matchCat && matchYear;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Sort descending by year
|
||||||
|
result.sort((a, b) => (b.year || 0) - (a.year || 0));
|
||||||
|
|
||||||
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderProjects() {
|
function renderProjects() {
|
||||||
|
|||||||
+18
-2
@@ -201,6 +201,22 @@ body.acaab-modal-open {
|
|||||||
|
|
||||||
/* --- Reduced motion --- */
|
/* --- Reduced motion --- */
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.acaab-fade-in, .acaab-skeleton, .acaab-card-img,
|
|
||||||
.acaab-ach-card, .acaab-proj-card-wrap { animation: none !important; transition: none !important; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Modal Responsiveness Overrides --- */
|
||||||
|
.acaab-modal-achievement {
|
||||||
|
max-width: 500px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acaab-modal-project {
|
||||||
|
max-width: 700px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 639px) {
|
||||||
|
.acaab-modal-achievement, .acaab-modal-project {
|
||||||
|
max-width: 100% !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
border-radius: 1rem 1rem 0 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user