eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile view for certified member list

Browse Source
This commit is contained in:
Jannat Patel
2025-04-16 10:59:06 +05:30
parent fdf8b85f88
commit dcacda984f
1 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/pages/CertifiedParticipants.vue
View File

@@ -16,8 +16,8 @@
v-if="participants.data?.length" v-if="participants.data?.length"
class="mx-auto w-full max-w-4xl pt-6 pb-10" class="mx-auto w-full max-w-4xl pt-6 pb-10"
> >
<div class="flex justify-between mb-4"> <div class="flex flex-col md:flex-row justify-between mb-4 px-3">
<div class="text-xl font-semibold text-ink-gray-7"> <div class="text-xl font-semibold text-ink-gray-7 mb-2 md:mb-0">
{{ memberCount }} {{ __('certified members') }} {{ memberCount }} {{ __('certified members') }}
</div> </div>
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
@@ -52,34 +52,39 @@
}" }"
class="flex sm:rounded px-3 py-2 sm:h-15 hover:bg-surface-gray-2" class="flex sm:rounded px-3 py-2 sm:h-15 hover:bg-surface-gray-2"
> >
<div class="flex items-center w-full space-x-3"> <div class="flex md:items-center w-full space-x-3">
<Avatar <Avatar
:image="participant.user_image" :image="participant.user_image"
class="size-8 rounded-full object-contain" class="size-8 rounded-full object-contain"
:label="participant.full_name" :label="participant.full_name"
size="2xl" size="2xl"
/> />
<div class="flex-1"> <div class="flex flex-col md:flex-row">
<div class="text-base font-medium text-ink-gray-8"> <div class="flex-1">
{{ participant.full_name }} <div class="text-base font-medium text-ink-gray-8">
{{ participant.full_name }}
</div>
<div
v-if="participant.headline"
class="my-1.5 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-base text-ink-gray-5"
>
{{ participant.headline }}
</div>
</div> </div>
<div <div
class="mt-1.5 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-base text-ink-gray-5" class="flex items-center space-x-4 md:space-x-20 justify-self-end text-base"
> >
{{ participant.headline }} <div class="text-ink-gray-5">
</div> {{ participant.certificate_count }}
</div> {{
<div class="flex items-center space-x-20 justify-self-end"> participant.certificate_count > 1
<div class="text-ink-gray-5"> ? __('certificates')
{{ participant.certificate_count }} : __('certificate')
{{ }}
participant.certificate_count > 1 </div>
? __('certificates') <div class="text-ink-gray-5">
: __('certificate') {{ dayjs(participant.issue_date).format('DD MMM YYYY') }}
}} </div>
</div>
<div class="text-ink-gray-5">
{{ dayjs(participant.issue_date).format('DD MMM YYYY') }}
</div> </div>
</div> </div>
</div> </div>