Added conditions for UI in profil page

This commit is contained in:
2026-04-15 12:36:35 +01:00
parent d9af61889a
commit 169abddce7
@@ -1,11 +1,11 @@
<div class="rounded-lg px-2 m-3 bg-white border border-gray-200 items-center h-full max-h-48 overflow-scroll"> <div class="rounded-lg m-3 bg-white border border-gray-200 items-center h-full max-h-48 overflow-scroll">
<ion-list lines="none" class="flex flex-col gap-3 pt-1 pb-1"> @if (userChallenges().length > 0) {
@for (challenge of userChallenges(); track challenge.challengeTitle) { @for (challenge of userChallenges(); track challenge.challengeTitle) {
<ion-item class="border border-gray-200 rounded-xl" style="--inner-padding-end: 0; --padding-start: 0;"> <ion-item lines="none" class="border border-gray-300 rounded-xl m-2">
<div class="grid grid-cols-[1fr_auto] gap-2 items-start w-full px-3 py-2"> <div class="grid grid-cols-[1fr_auto] gap-2 items-start w-full px-3 py-2">
<div> <div>
<p class="m-0 text-sm font-medium text-gray-900">{{ challenge.challengeTitle }}</p> <p class="m-0 text-sm text-gray-500">{{ challenge.challengeTitle }}</p>
<p class="m-0 mt-1 text-xs text-gray-500 leading-relaxed">{{ challenge.challengeDescription }}</p> <p class="m-0 mt-1 text-xs text-gray-500">{{ challenge.challengeDescription }}</p>
</div> </div>
<div class="text-right shrink-0"> <div class="text-right shrink-0">
<p class="m-0 text-xs text-gray-500">{{ converterHours(challenge.challengeDuration) }}</p> <p class="m-0 text-xs text-gray-500">{{ converterHours(challenge.challengeDuration) }}</p>
@@ -14,5 +14,17 @@
</div> </div>
</ion-item> </ion-item>
} }
</ion-list> } @else {
<ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
<div class="flex flex-col items-center w-full px-5 py-8 gap-3">
<div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
<ion-icon name="trophy" style="color:#a8a090; font-size:20px;"></ion-icon>
</div>
<div class="text-center">
<p class="m-0 text-sm font-medium text-stone-400">Aucun défi réalisé</p>
<p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos premiers défis apparaîtront ici</p>
</div>
</div>
</ion-item>
}
</div> </div>