fix: improve RODA dosen cards on mobile

This commit is contained in:
Raditya_Indra_Putranto
2026-06-04 18:19:11 +07:00
parent 48ff6250ab
commit 6f1e7d744b
3 changed files with 36 additions and 4 deletions
+3 -3
View File
@@ -955,7 +955,7 @@
ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.</p>
</div>
<div id="dosen-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
<div id="dosen-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
<!-- Cards generated by JS -->
</div>
</div>
@@ -1785,7 +1785,7 @@
<span class="inline-flex flex-col gap-0.5 text-[8px] sm:text-[8px] md:text-[9px] font-bold uppercase tracking-[0.2em] text-slate-400">
${rank.split(' ').join('<br>')}
</span>
<span class="inline-flex items-center gap-2 text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors whitespace-nowrap">
<span class="inline-flex items-center justify-end gap-2 text-right text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors">
${translations[currentLang].viewMembers}
<i class="fa-solid fa-arrow-right transition-transform group-hover:translate-x-1"></i>
</span>
@@ -2135,4 +2135,4 @@
</script>
</body>
</html>
</html>
+2 -1
View File
@@ -7,7 +7,8 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test:netlify-build": "node scripts/verify-netlify-build.mjs"
"test:netlify-build": "node scripts/verify-netlify-build.mjs",
"test:mobile-layout": "node scripts/verify-mobile-layout.mjs"
},
"devDependencies": {
"vite": "^7.1.0"
+31
View File
@@ -0,0 +1,31 @@
import { readFileSync } from 'node:fs';
const rodaPage = readFileSync('groups/RODA/index.html', 'utf8');
const gridMatch = rodaPage.match(/<div id="dosen-grid" class="([^"]+)"/);
if (!gridMatch) {
throw new Error('Missing dosen-grid container.');
}
const gridClasses = gridMatch[1].split(/\s+/);
if (gridClasses.includes('sm:grid-cols-2')) {
throw new Error('Dosen cards must stay single-column at the 390px mobile breakpoint.');
}
if (!gridClasses.includes('grid-cols-1') || !gridClasses.includes('md:grid-cols-2')) {
throw new Error('Dosen cards must use one mobile column and switch to two columns at md.');
}
const viewMembersMatch = rodaPage.match(/<span class="([^"]+)"[^>]*>\s*\$\{translations\[currentLang\]\.viewMembers\}/);
if (!viewMembersMatch) {
throw new Error('Missing view members link in dosen card template.');
}
if (viewMembersMatch[1].split(/\s+/).includes('whitespace-nowrap')) {
throw new Error('View members link must be allowed to wrap instead of clipping on narrow cards.');
}
console.log('Mobile layout classes keep dosen cards readable on phone viewports.');