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"
class="mx-auto w-full max-w-4xl pt-6 pb-10"
>
<div class="flex justify-between mb-4">
<div class="text-xl font-semibold text-ink-gray-7">
<div class="flex flex-col md:flex-row justify-between mb-4 px-3">
<div class="text-xl font-semibold text-ink-gray-7 mb-2 md:mb-0">
{{ memberCount }} {{ __('certified members') }}
</div>
<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"
>
<div class="flex items-center w-full space-x-3">
<div class="flex md:items-center w-full space-x-3">
<Avatar
:image="participant.user_image"
class="size-8 rounded-full object-contain"
:label="participant.full_name"
size="2xl"
/>
<div class="flex-1">
<div class="text-base font-medium text-ink-gray-8">
{{ participant.full_name }}
<div class="flex flex-col md:flex-row">
<div class="flex-1">
<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
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>
</div>
<div class="flex items-center space-x-20 justify-self-end">
<div class="text-ink-gray-5">
{{ participant.certificate_count }}
{{
participant.certificate_count > 1
? __('certificates')
: __('certificate')
}}
</div>
<div class="text-ink-gray-5">
{{ dayjs(participant.issue_date).format('DD MMM YYYY') }}
<div class="text-ink-gray-5">
{{ participant.certificate_count }}
{{
participant.certificate_count > 1
? __('certificates')
: __('certificate')
}}
</div>
<div class="text-ink-gray-5">
{{ dayjs(participant.issue_date).format('DD MMM YYYY') }}
</div>
</div>
</div>
</div>