Merge pull request 'fix(m4n1fest): perbaikan jumlah alumni di hero dan swap table-chart layout' (#3) from fix/m4n1fest-stats-layout into development

Reviewed-on: Mhanif26/student-web-if-development-kit#3
This commit is contained in:
2026-06-05 01:25:17 +00:00
3 changed files with 27 additions and 20 deletions
+2
View File
@@ -578,6 +578,7 @@ const translations = {
grp_m4n1fest_hero_btn_stats: "Lihat Statistik Alumni", grp_m4n1fest_hero_btn_stats: "Lihat Statistik Alumni",
grp_m4n1fest_hero_btn_join: "Gabung Grup IKA", grp_m4n1fest_hero_btn_join: "Gabung Grup IKA",
grp_m4n1fest_hero_stat_alumni: "TOTAL ALUMNI", grp_m4n1fest_hero_stat_alumni: "TOTAL ALUMNI",
grp_m4n1fest_hero_stat_alumni_desc: "data diperoleh dari alumni terdata di tracer study",
grp_m4n1fest_hero_stat_batch: "ANGKATAN", grp_m4n1fest_hero_stat_batch: "ANGKATAN",
grp_m4n1fest_hero_stat_company: "PERUSAHAAN", grp_m4n1fest_hero_stat_company: "PERUSAHAAN",
grp_m4n1fest_eyebrow_achievers: "High Achievers", grp_m4n1fest_eyebrow_achievers: "High Achievers",
@@ -1285,6 +1286,7 @@ const translations = {
grp_m4n1fest_hero_btn_stats: "View Alumni Statistics", grp_m4n1fest_hero_btn_stats: "View Alumni Statistics",
grp_m4n1fest_hero_btn_join: "Join Alumni Group", grp_m4n1fest_hero_btn_join: "Join Alumni Group",
grp_m4n1fest_hero_stat_alumni: "TOTAL ALUMNI", grp_m4n1fest_hero_stat_alumni: "TOTAL ALUMNI",
grp_m4n1fest_hero_stat_alumni_desc: "data obtained from alumni recorded in tracer study",
grp_m4n1fest_hero_stat_batch: "CLASSES", grp_m4n1fest_hero_stat_batch: "CLASSES",
grp_m4n1fest_hero_stat_company: "COMPANIES", grp_m4n1fest_hero_stat_company: "COMPANIES",
grp_m4n1fest_eyebrow_achievers: "High Achievers", grp_m4n1fest_eyebrow_achievers: "High Achievers",
+20 -19
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id" class="scroll-smooth"> <html lang="id" class="scroll-smooth">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -1188,15 +1188,16 @@
<div class="custom-stats"> <div class="custom-stats">
<div class="custom-stat-box"> <div class="custom-stat-box">
<div class="custom-stat-num custom-serif">850<span class="custom-stat-plus">+</span></div> <div class="custom-stat-num custom-serif">212<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_alumni">TOTAL ALUMNI</div> <div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_alumni">TOTAL ALUMNI</div>
<div class="custom-stat-desc" style="font-size: 0.65rem; color: #a1a1aa; margin-top: 4px; line-height: 1.35; font-weight: normal; font-family: sans-serif;" data-i18n="grp_m4n1fest_hero_stat_alumni_desc">data diperoleh dari alumni terdata di tracer study</div>
</div> </div>
<div class="custom-stat-box"> <div class="custom-stat-box">
<div class="custom-stat-num custom-serif">18<span class="custom-stat-plus">+</span></div> <div class="custom-stat-num custom-serif">22</div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_batch">ANGKATAN</div> <div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_batch">ANGKATAN</div>
</div> </div>
<div class="custom-stat-box" style="border-right: none;"> <div class="custom-stat-box" style="border-right: none;">
<div class="custom-stat-num custom-serif">150<span class="custom-stat-plus">+</span></div> <div class="custom-stat-num custom-serif">202<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_company">PERUSAHAAN</div> <div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_company">PERUSAHAAN</div>
</div> </div>
</div> </div>
@@ -1568,12 +1569,24 @@
</p> </p>
</div> </div>
<div class="two-col" style="align-items: flex-start;"> <div class="two-col stat-cols" style="align-items: flex-start;">
<!-- left: Table --> <!-- left: Chart -->
<div class="chart-box rv d2" style="margin-top: 0;">
<div class="chart-header">
<div class="chart-title" data-i18n="grp_m4n1fest_chart_title">
Grafik Jumlah Lulusan
</div>
</div>
<div style="position: relative; height: 280px; width: 100%;">
<canvas id="kelulusanChart"></canvas>
</div>
</div>
<!-- right: Table -->
<div class="rv d1" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; padding: 0;"> <div class="rv d1" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; padding: 0;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;"> <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;">
<thead> <thead>
<tr style="background: #374151; color: #fff;"> <tr style="background: #1a3a6b; color: #fff;">
<th style="padding: 14px 20px; font-weight: 600;" data-i18n="grp_m4n1fest_table_head_period">Periode</th> <th style="padding: 14px 20px; font-weight: 600;" data-i18n="grp_m4n1fest_table_head_period">Periode</th>
<th style="padding: 14px 20px; font-weight: 600; text-align: right;" data-i18n="grp_m4n1fest_table_head_amount">Jumlah</th> <th style="padding: 14px 20px; font-weight: 600; text-align: right;" data-i18n="grp_m4n1fest_table_head_amount">Jumlah</th>
</tr> </tr>
@@ -1605,18 +1618,6 @@
Sumber : BAK UNTAN Sumber : BAK UNTAN
</div> </div>
</div> </div>
<!-- right: Chart -->
<div class="chart-box rv d2" style="margin-top: 0;">
<div class="chart-header">
<div class="chart-title" data-i18n="grp_m4n1fest_chart_title">
Grafik Jumlah Lulusan
</div>
</div>
<div style="position: relative; height: 280px; width: 100%;">
<canvas id="kelulusanChart"></canvas>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
+5 -1
View File
@@ -666,11 +666,15 @@ ul.achiever-achievements li::before {
gap: 52px; gap: 52px;
align-items: start; align-items: start;
} }
.stat-cols {
grid-template-columns: 1.3fr 0.7fr;
}
.two-col > * { .two-col > * {
min-width: 0; min-width: 0;
} }
@media (max-width: 760px) { @media (max-width: 760px) {
.two-col { .two-col,
.stat-cols {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }