refactor(components): swap tailwindcss classes with ones with rtl support

This commit is contained in:
raizasafeel
2026-04-10 15:14:13 +05:30
parent fa94e5f96a
commit c5236b2e50
64 changed files with 170 additions and 177 deletions
+4 -4
View File
@@ -5,7 +5,7 @@
:class="{ 'border rounded-lg overflow-auto': !showTitle }"
>
<div
class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
class="border-e p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
:class="{ 'h-full': !showTitle }"
>
<div v-if="showTitle" class="text-lg font-semibold mb-5 text-ink-gray-9">
@@ -31,7 +31,7 @@
<div class="font-semibold text-ink-gray-9">
{{ __('Submission') }}
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<Badge v-if="isDirty" theme="orange">
{{ __('Not Saved') }}
</Badge>
@@ -106,7 +106,7 @@
class="cursor-pointer !no-underline text-sm leading-5"
>
<div class="flex items-center">
<div class="border rounded-md p-2 mr-2">
<div class="border rounded-md p-2 me-2">
<FileText class="h-5 w-5 stroke-1.5" />
</div>
<span>
@@ -117,7 +117,7 @@
<X
v-if="canModifyAssignment"
@click="removeSubmission()"
class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ms-4"
/>
</div>
</div>
+1 -1
View File
@@ -6,7 +6,7 @@
<audio @ended="handleAudioEnd" controlsList="nodownload" class="mb-4">
<source :src="encodeURI(file)" type="audio/mp3" />
</audio>
<div class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2">
<div class="flex items-center gap-x-2 shadow rounded-lg p-1 w-1/2">
<Button variant="ghost" @click="togglePlay">
<template #icon>
<Play v-if="!isPlaying" class="w-4 h-4 text-ink-gray-9" />
@@ -2,13 +2,13 @@
<Dialog v-model="show" :options="{ size: '2xl' }">
<template #body>
<div class="text-base">
<div class="flex items-center space-x-2 pl-4.5 border-b">
<div class="flex items-center gap-x-2 ps-4.5 border-b">
<Search class="size-4 text-ink-gray-4" />
<input
ref="inputRef"
type="text"
placeholder="Search"
class="w-full border-none bg-transparent py-3 !pl-2 pr-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
class="w-full border-none bg-transparent py-3 !ps-2 pe-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
@input="onInput"
v-model="query"
autocomplete="off"
@@ -32,9 +32,9 @@
</div>
<div
class="flex items-center space-x-5 w-full border-t py-2 text-sm text-ink-gray-7 px-4.5"
class="flex items-center gap-x-5 w-full border-t py-2 text-sm text-ink-gray-7 px-4.5"
>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<MoveUp
class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
/>
@@ -45,7 +45,7 @@
{{ __('to navigate') }}
</span>
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<CornerDownLeft
class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
/>
@@ -53,7 +53,7 @@
{{ __('to select') }}
</span>
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<span class="bg-surface-gray-2 p-1 rounded-sm"> esc </span>
<span>
{{ __('to close') }}
@@ -10,7 +10,7 @@
:class="{ 'bg-surface-gray-2': item.isActive }"
@click="emit('navigateTo', item.route)"
>
<div class="flex items-center space-x-3">
<div class="flex items-center gap-x-3">
<component
v-if="item.icon"
:is="item.icon"
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex items-center text-ink-gray-7">
<Calendar class="h-4 w-4 stroke-1.5 mr-2" />
<Calendar class="h-4 w-4 stroke-1.5 me-2" />
<span>
{{ getFormattedDateRange(props.startDate, props.endDate) }}
</span>
+1 -1
View File
@@ -28,7 +28,7 @@
</div>
</template>
<template #actions="{ close }">
<div class="pb-5 float-right">
<div class="pb-5 float-end">
<Button variant="solid" @click="sendMail(close)">
{{ __('Send') }}
</Button>
@@ -65,7 +65,7 @@
placeholder="Search"
/>
<button
class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
class="absolute end-1.5 inline-flex h-7 w-7 items-center justify-center"
@click="selectedValue = null"
>
<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
@@ -6,7 +6,7 @@
<div class="overflow-visible border border-outline-gray-modals rounded-md">
<div class="overflow-x-auto">
<div
class="grid items-center space-x-4 p-2 border-b border-outline-gray-modals"
class="grid items-center gap-x-4 p-2 border-b border-outline-gray-modals"
:style="{ gridTemplateColumns: getGridTemplateColumns() }"
>
<div
@@ -21,7 +21,7 @@
<div
v-for="(row, rowIndex) in rows"
:key="rowIndex"
class="grid items-center space-x-4 p-2"
class="grid items-center gap-x-4 p-2"
:style="{ gridTemplateColumns: getGridTemplateColumns() }"
>
<template v-for="key in Object.keys(row)" :key="key">
@@ -47,7 +47,7 @@
<div
v-if="menuOpenIndex === rowIndex"
ref="menuRef"
class="absolute right-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
class="absolute end-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
:class="
rowIndex == (rows?.length ?? 0) - 1
? 'bottom-full mb-1'
@@ -56,7 +56,7 @@
>
<button
@click="deleteRow(rowIndex)"
class="flex items-center space-x-2 w-full text-left px-3 py-2 text-sm text-ink-red-3"
class="flex items-center gap-x-2 w-full text-start px-3 py-2 text-sm text-ink-red-3"
>
<Trash2 class="size-4 stroke-1.5" />
<span>
@@ -8,7 +8,7 @@
<template #target="{ togglePopover }">
<button
@click="openPopover(togglePopover)"
class="flex w-full items-center space-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
class="flex w-full items-center gap-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
>
<component
v-if="selectedIcon"
@@ -14,7 +14,7 @@
v-for="value in values"
:key="value"
type="button"
class="inline-flex items-center gap-1 bg-surface-white border border-outline-gray-2 text-ink-gray-7 pl-2 pr-1.5 py-0.5 rounded text-base leading-5"
class="inline-flex items-center gap-1 bg-surface-white border border-outline-gray-2 text-ink-gray-7 ps-2 pe-1.5 py-0.5 rounded text-base leading-5"
@click.stop="removeValue(value)"
>
<span>{{ value }}</span>
+1 -1
View File
@@ -10,7 +10,7 @@
@mouseleave="hoveredRating = 0"
>
<Star
class="fill-gray-400 text-gray-50 stroke-1 mr-1 cursor-pointer"
class="fill-gray-400 text-gray-50 stroke-1 me-1 cursor-pointer"
:class="iconClasses(index)"
@click="markRating(index)"
/>
@@ -19,7 +19,7 @@
class="size-5 stroke-1 text-ink-gray-7"
/>
</div>
<div class="ml-4">
<div class="ms-4">
<Button @click="openFileSelector" :loading="uploading">
{{ uploading ? `${__('Uploading')} ${progress}%` : __('Upload') }}
</Button>
@@ -46,7 +46,7 @@
<source :src="modelValue" />
{{ __('Your browser does not support the video tag.') }}
</video>
<div class="ml-4">
<div class="ms-4">
<Button @click="removeImage()">
{{ __('Remove') }}
</Button>
+7 -7
View File
@@ -18,7 +18,7 @@
<!-- <div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
<div
v-if="course.featured"
class="flex items-center space-x-1 text-xs text-ink-amber-3 bg-surface-white border border-outline-amber-1 px-2 py-0.5 rounded-md mr-1 mb-1"
class="flex items-center gap-x-1 text-xs text-ink-amber-3 bg-surface-white border border-outline-amber-1 px-2 py-0.5 rounded-md me-1 mb-1"
>
<Star class="size-3 stroke-2" />
<span>
@@ -28,7 +28,7 @@
<div
v-if="course.tags"
v-for="tag in course.tags?.split(', ')"
class="text-xs border bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 mr-1"
class="text-xs border bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 me-1"
>
{{ tag }}
</div>
@@ -52,7 +52,7 @@
<div v-if="course.lessons">
<Tooltip :text="__('Lessons')">
<span class="flex items-center">
<BookOpen class="h-4 w-4 stroke-1.5 mr-1" />
<BookOpen class="h-4 w-4 stroke-1.5 me-1" />
{{ course.lessons }}
</span>
</Tooltip>
@@ -61,7 +61,7 @@
<div v-if="course.enrollments">
<Tooltip :text="__('Enrolled Students')">
<span class="flex items-center">
<Users class="h-4 w-4 stroke-1.5 mr-1" />
<Users class="h-4 w-4 stroke-1.5 me-1" />
{{ formatAmount(course.enrollments) }}
</span>
</Tooltip>
@@ -70,7 +70,7 @@
<div v-if="course.rating">
<Tooltip :text="__('Average Rating')">
<span class="flex items-center">
<Star class="h-4 w-4 stroke-1.5 mr-1" />
<Star class="h-4 w-4 stroke-1.5 me-1" />
{{ course.rating }}
</span>
</Tooltip>
@@ -105,7 +105,7 @@
<div class="flex items-center justify-between mt-auto">
<div class="flex avatar-group overlap">
<div
class="h-6 mr-1"
class="h-6 me-1"
:class="{ 'avatar-group overlap': course.instructors.length > 1 }"
>
<UserAvatar
@@ -116,7 +116,7 @@
<CourseInstructors :instructors="course.instructors" />
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<div v-if="course.paid_course" class="font-semibold">
{{ course.price }}
</div>
@@ -96,14 +96,14 @@
</div>
<div class="flex items-center text-ink-gray-9">
<BookOpen class="h-4 w-4 stroke-1.5" />
<span class="ml-2">
<span class="ms-2">
{{ course.data.lessons }}
{{ course.data.lessons > 1 ? __('lessons') : __('lesson') }}
</span>
</div>
<div class="flex items-center text-ink-gray-9">
<Users class="h-4 w-4 stroke-1.5" />
<span class="ml-2">
<span class="ms-2">
{{ formatAmount(course.data.enrollments) }}
{{
course.data.enrollments > 1
@@ -117,7 +117,7 @@
class="flex items-center text-ink-gray-9"
>
<Star class="size-4 stroke-1.5 fill-yellow-500 text-transparent" />
<span class="ml-2">
<span class="ms-2">
{{ course.data.rating }} {{ __('average rating') }}
</span>
</div>
@@ -126,7 +126,7 @@
class="flex items-center font-semibold text-ink-gray-9"
>
<GraduationCap class="h-4 w-4 stroke-2" />
<span class="ml-2">
<span class="ms-2">
{{ __('Certificate of Completion') }}
</span>
</div>
@@ -135,7 +135,7 @@
class="flex items-center font-semibold text-ink-gray-9"
>
<GraduationCap class="h-4 w-4 stroke-2" />
<span class="ml-2">
<span class="ms-2">
{{ __('Paid Certificate after Evaluation') }}
</span>
</div>
+12 -12
View File
@@ -2,7 +2,7 @@
<div class="">
<div
v-if="title && (outline.data?.length || allowEdit)"
class="flex items-center justify-between space-x-2 mb-4 px-2"
class="flex items-center justify-between gap-x-2 mb-4 px-2"
:class="{
'sticky top-0 z-10 bg-surface-white border-b px-3 py-2.5 sm:px-5':
allowEdit,
@@ -54,12 +54,12 @@
class="h-4 w-4 text-ink-gray-9 stroke-1"
/>
<div
class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
class="text-base text-start text-ink-gray-9 font-medium leading-5 ms-2"
@click="redirectToChapter(chapter)"
>
{{ chapter.title }}
</div>
<div class="flex ml-auto space-x-4">
<div class="flex ms-auto gap-x-4">
<Tooltip :text="__('Edit Chapter')" placement="bottom">
<FilePenLine
v-if="allowEdit"
@@ -94,7 +94,7 @@
>
<template #item="{ element: lesson }">
<div
class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
class="outline-lesson ps-8 py-2 pe-4 text-ink-gray-9"
:class="
isActiveLesson(lesson.number) ? 'bg-surface-gray-3' : ''
"
@@ -112,23 +112,23 @@
<div class="flex items-center text-sm leading-5 group">
<MonitorPlay
v-if="lesson.icon === 'icon-youtube'"
class="h-4 w-4 stroke-1 mr-2"
class="h-4 w-4 stroke-1 me-2"
/>
<HelpCircle
v-else-if="lesson.icon === 'icon-quiz'"
class="h-4 w-4 stroke-1 mr-2"
class="h-4 w-4 stroke-1 me-2"
/>
<NotebookPen
v-else-if="lesson.icon === 'icon-assignment'"
class="h-4 w-4 stroke-1 mr-2"
class="h-4 w-4 stroke-1 me-2"
/>
<SquareCode
v-else-if="lesson.icon === 'icon-code'"
class="h-4 w-4 stroke-1 mr-2"
class="h-4 w-4 stroke-1 me-2"
/>
<FileText
v-else-if="lesson.icon === 'icon-list'"
class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
class="h-4 w-4 text-ink-gray-9 stroke-1 me-2"
/>
{{ lesson.title }}
<Trash2
@@ -136,18 +136,18 @@
@click.prevent="
trashLesson(lesson.name, chapter.name)
"
class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
class="h-4 w-4 text-ink-red-3 ms-auto invisible group-hover:visible"
/>
<Check
v-if="lesson.is_complete"
class="h-4 w-4 text-green-700 ml-2"
class="h-4 w-4 text-green-700 ms-2"
/>
</div>
</router-link>
</div>
</template>
</Draggable>
<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
<div v-if="allowEdit" class="flex mt-2 mb-4 ps-8">
<router-link
v-if="!chapter.is_scorm_package"
:to="{
+3 -3
View File
@@ -3,7 +3,7 @@
<Button
v-if="membership && !hasReviewed.data"
@click="openReviewModal()"
class="float-right"
class="float-end"
>
{{ __('Write a Review') }}
</Button>
@@ -28,14 +28,14 @@
params: { username: review.owner_details.username },
}"
>
<span class="text-lg font-medium mr-4 text-ink-gray-7">
<span class="text-lg font-medium me-4 text-ink-gray-7">
{{ review.owner_details.full_name }}
</span>
</router-link>
<span class="text-ink-gray-7">
{{ review.creation }}
</span>
<div class="flex mt-2 space-x-1">
<div class="flex mt-2 gap-x-1">
<Star
v-for="index in 5"
class="size-4 text-transparent rounded-sm"
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex h-screen w-screen">
<div class="h-full border-r bg-surface-menu-bar">
<div class="h-full border-e bg-surface-menu-bar">
<AppSidebar />
</div>
<div class="flex-1 flex flex-col h-full overflow-auto bg-surface-white">
@@ -6,7 +6,7 @@
<ChevronLeft class="w-5 h-5 stroke-1.5 text-ink-gray-7" />
</template>
</Button>
<span class="text-lg font-semibold ml-2 text-ink-gray-9">
<span class="text-lg font-semibold ms-2 text-ink-gray-9">
{{ topic.title }}
</span>
</div>
@@ -18,11 +18,11 @@
>
<div class="flex items-center justify-between mb-2">
<div class="flex items-center text-ink-gray-5">
<UserAvatar :user="reply.user" class="mr-2" />
<UserAvatar :user="reply.user" class="me-2" />
<span>
{{ reply.user.full_name }}
</span>
<span class="text-sm ml-2">
<span class="text-sm ms-2">
{{ timeAgo(reply.creation) }}
</span>
</div>
+4 -4
View File
@@ -2,7 +2,7 @@
<div>
<Button
v-if="!singleThread && !readOnlyMode"
class="float-right"
class="float-end"
@click="openTopicModal()"
>
<template #prefix>
@@ -21,7 +21,7 @@
class="flex items-center cursor-pointer py-5 w-full"
:class="{ 'border-b': index + 1 != topics.data.length }"
>
<UserAvatar :user="topic.user" size="2xl" class="mr-4" />
<UserAvatar :user="topic.user" size="2xl" class="me-4" />
<div>
<div class="text-lg font-semibold mb-1 text-ink-gray-7">
{{ topic.title }}
@@ -30,7 +30,7 @@
<span>
{{ topic.user.full_name }}
</span>
<span class="text-sm ml-3">
<span class="text-sm ms-3">
{{ timeAgo(topic.creation) }}
</span>
</div>
@@ -51,7 +51,7 @@
v-else
class="flex flex-col items-center justify-center border-2 border-dashed mt-5 py-8 rounded-md"
>
<MessageSquareText class="w-7 h-7 text-ink-gray-4 stroke-1.5 mr-2" />
<MessageSquareText class="w-7 h-7 text-ink-gray-4 stroke-1.5 me-2" />
<div class="mt-2">
<div v-if="emptyStateTitle" class="font-medium mb-2">
{{ __(emptyStateTitle) }}
+1 -1
View File
@@ -34,7 +34,7 @@
<span class="inline-flex items-baseline">
<FeatherIcon
name="x"
class="ml-auto h-4 w-4 text-gray-700"
class="ms-auto h-4 w-4 text-gray-700"
@click="iosInstallMessage = false"
/>
</span>
+4 -4
View File
@@ -2,7 +2,7 @@
<div
class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3"
>
<div class="flex space-x-4 mb-4">
<div class="flex gap-x-4 mb-4">
<div class="flex flex-col space-y-2 flex-1 break-all">
<div class="text-lg font-semibold text-ink-gray-9">
{{ job.company_name }}
@@ -10,7 +10,7 @@
<span class="font-medium text-ink-gray-7 leading-5">
{{ job.job_title }}
</span>
<div class="flex items-center space-x-1 text-sm text-ink-gray-7">
<div class="flex items-center gap-x-1 text-sm text-ink-gray-7">
<MapPin class="size-3" />
<span>
{{ job.location }}{{ job.country ? `, ${job.country}` : '' }}
@@ -18,7 +18,7 @@
</div>
<div
v-if="job.applicants"
class="flex items-center space-x-1 text-sm text-ink-gray-7"
class="flex items-center gap-x-1 text-sm text-ink-gray-7"
>
<User class="size-3" />
<span>
@@ -29,7 +29,7 @@
</div>
<!-- <img :src="job.company_logo" alt="Company Logo" class="size-8 rounded-full object-contain bg-white" /> -->
</div>
<div class="space-x-2 mt-auto">
<div class="flex gap-x-2 items-center mt-auto">
<Badge>
{{ job.type }}
</Badge>
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div class="space-y-5 text-ink-gray-9">
<div class="space-y-2">
<div class="flex items-center text-sm font-medium space-x-2">
<div class="flex items-center text-sm font-medium gap-x-2">
<span>
{{ __('What are Instructor Notes?') }}
</span>
@@ -17,7 +17,7 @@
<div class="space-y-2" v-for="(item, key) in contentMap" :key="key">
<div
class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
class="flex items-center text-sm font-medium gap-x-2 cursor-pointer"
@click="openHelpDialog(key)"
>
<span>
+3 -3
View File
@@ -7,14 +7,14 @@
<div class="relative z-20">
<!-- Dropdown menu -->
<div
class="fixed bottom-16 right-2 w-[80%] rounded-md bg-surface-white text-base p-5 space-y-4 shadow-md"
class="fixed bottom-16 end-2 w-[80%] rounded-md bg-surface-white text-base p-5 space-y-4 shadow-md"
v-if="showMenu"
ref="menu"
>
<div
v-for="link in otherLinks"
:key="link.label"
class="flex items-center space-x-2 cursor-pointer"
class="flex items-center gap-x-2 cursor-pointer"
@click="handleClick(link)"
>
<component
@@ -28,7 +28,7 @@
<!-- Fixed menu -->
<div
v-if="sidebarSettings.data"
class="fixed bottom-0 left-0 w-full flex items-center justify-around border-t border-outline-gray-2 bg-surface-white standalone:pb-4 z-10"
class="fixed bottom-0 start-0 w-full flex items-center justify-around border-t border-outline-gray-2 bg-surface-white standalone:pb-4 z-10"
>
<button
v-for="tab in sidebarLinks"
@@ -48,7 +48,7 @@
</div>
</div>
<div class="flex justify-end space-x-2 mt-5">
<div class="flex justify-end gap-x-2 mt-5">
<router-link
:to="{
name: 'AssignmentSubmissionList',
@@ -51,7 +51,7 @@
</FileUploader>
<div v-else class="">
<div class="flex items-center">
<div class="border rounded-md p-2 mr-2">
<div class="border rounded-md p-2 me-2">
<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
</div>
<div class="flex flex-col">
@@ -64,7 +64,7 @@
</div>
<X
@click="() => (chapter.scorm_package = null)"
class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ms-4"
/>
</div>
</div>
@@ -5,12 +5,12 @@
</template>
<template #body>
<div
class="absolute left-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
class="absolute start-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
>
<div
class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
>
<div class="flex items-center justify-center space-x-2">
<div class="flex items-center justify-center gap-x-2">
<TextInput
type="text"
placeholder="search by keyword"
@@ -10,11 +10,11 @@
<div class="text-2xl font-semibold leading-6 text-ink-gray-9">
{{ __('Edit Profile') }}
</div>
<div class="space-x-2">
<div class="flex items-center gap-x-2">
<Badge v-if="isDirty" theme="orange">
{{ __('Not Saved') }}
</Badge>
<div class="pb-5 float-right">
<div class="pb-5 float-end">
<Button variant="solid" @click="saveProfile()">
{{ __('Save') }}
</Button>
@@ -27,7 +27,7 @@
</div>
<div class="space-y-5">
<div v-for="row in slots.data" class="space-y-2">
<div class="flex items-center text-ink-gray-7 space-x-2">
<div class="flex items-center text-ink-gray-7 gap-x-2">
<Calendar class="size-3" />
<div class="text-ink-gray-9">
{{ dayjs(row.date).format('DD MMMM YYYY') }}
+7 -7
View File
@@ -14,7 +14,7 @@
<div class="flex flex-col space-y-4 text-sm text-ink-gray-8">
<Tooltip :text="__('Email ID')">
<div class="flex items-center space-x-2 w-fit">
<div class="flex items-center gap-x-2 w-fit">
<User class="h-4 w-4 stroke-1.5" />
<span>
{{ event.member }}
@@ -23,7 +23,7 @@
</Tooltip>
<Tooltip :text="__('Course')">
<div
class="flex space-x-2 w-fit cursor-pointer"
class="flex gap-x-2 w-fit cursor-pointer"
@click="openLink('course', event.course)"
>
<BookOpen class="h-4 w-4 stroke-1.5" />
@@ -34,7 +34,7 @@
</Tooltip>
<Tooltip v-if="event.batch_title" :text="__('Batch')">
<div
class="flex space-x-2 w-fit cursor-pointer"
class="flex gap-x-2 w-fit cursor-pointer"
@click="openLink('batch', event.batch_name)"
>
<Users class="h-4 w-4 stroke-1.5" />
@@ -44,7 +44,7 @@
</div>
</Tooltip>
<Tooltip :text="__('Date')">
<div class="flex items-center space-x-2 w-fit">
<div class="flex items-center gap-x-2 w-fit">
<Calendar class="h-4 w-4 stroke-1.5" />
<span>
{{ dayjs(event.date).format('DD MMM YYYY') }}
@@ -52,7 +52,7 @@
</div>
</Tooltip>
<Tooltip :text="__('Time')">
<div class="flex items-center space-x-2 w-fit">
<div class="flex items-center gap-x-2 w-fit">
<Clock class="h-4 w-4 stroke-1.5" />
<span>
{{ formatTime(event.start_time) }} -
@@ -61,7 +61,7 @@
</div>
</Tooltip>
</div>
<div class="flex items-center space-x-2 mt-auto">
<div class="flex items-center gap-x-2 mt-auto">
<Button
v-if="certificate.name"
@click="openCertificate(certificate)"
@@ -86,7 +86,7 @@
</Button>
</div>
</div>
<Tabs :tabs="tabs" as="div" v-model="tabIndex" class="border-l w-1/2">
<Tabs :tabs="tabs" as="div" v-model="tabIndex" class="border-s w-1/2">
<template #tab-panel="{ tab }">
<div
v-if="tab.label == 'Evaluation'"
@@ -51,7 +51,7 @@
</FileUploader>
</div>
<div v-else class="flex items-center">
<div class="border rounded-md p-2 mr-2">
<div class="border rounded-md p-2 me-2">
<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
</div>
<div class="flex flex-col">
@@ -31,7 +31,7 @@
@click="redirectToProfile(participant.member_username)"
class="grid grid-cols-2 items-center w-full text-base w-fit py-2"
>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<Avatar
:image="participant.member_image"
:label="participant.member_name"
@@ -47,7 +47,7 @@
</div>
</div>
<div class="grid grid-cols-3 gap-20 text-right">
<div class="grid grid-cols-3 gap-20 text-end">
<div>
{{ dayjs(participant.joined_at).format('HH:mm a') }}
</div>
+1 -1
View File
@@ -105,7 +105,7 @@
type="number"
/>
</div>
<div class="flex items-center justify-end space-x-2 mt-5">
<div class="flex items-center justify-end gap-x-2 mt-5">
<Button variant="solid" @click="submitQuestion()">
{{ __('Save') }}
</Button>
@@ -44,14 +44,14 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns">
<template #prefix="{ item }">
<component
v-if="item.icon"
:is="item.icon"
class="h-4 w-4 stroke-1.5 ml-4"
class="h-4 w-4 stroke-1.5 ms-4"
/>
</template>
</ListHeaderItem>
@@ -18,7 +18,7 @@
<!-- <FormControl
v-model="searchText"
:placeholder="__('Search by Member')"
class="mt-2 mr-5 w-[25%]"
class="mt-2 me-5 w-[25%]"
/> -->
</div>
<div
@@ -50,7 +50,7 @@
}"
>
<div class="grid grid-cols-[70%,30%] items-center">
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<Avatar
:image="row.member_image"
:label="row.member_name"
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="text-base border rounded-md w-1/3 mx-auto my-32">
<div class="border-b px-5 py-3 font-medium text-ink-gray-9">
<span
class="inline-flex items-center before:bg-surface-red-5 before:w-2 before:h-2 before:rounded-md before:mr-2"
class="inline-flex items-center before:bg-surface-red-5 before:w-2 before:h-2 before:rounded-md before:me-2"
></span>
{{ __(title) }}
</div>
@@ -14,7 +14,7 @@
<div class="">
<div
v-for="color in colors"
class="flex items-center space-x-2 px-3 py-2 cursor-pointer hover:bg-surface-gray-2"
class="flex items-center gap-x-2 px-3 py-2 cursor-pointer hover:bg-surface-gray-2"
@click="saveHighLight(color)"
>
<span
@@ -32,7 +32,7 @@
<div class="border-t">
<div
@click="addToNotes()"
class="flex items-center space-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
class="flex items-center gap-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
>
<NotepadText class="size-3 stroke-1.5" />
<span>
@@ -42,7 +42,7 @@
<div
v-if="highlightExists()"
@click="deleteHighlight"
class="flex items-center space-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
class="flex items-center gap-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
>
<Trash2 class="size-3 stroke-1.5" />
<span>
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="text-ink-gray-5">
{{ __(title) }}
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<slot name="prefix" />
<div class="font-semibold text-ink-gray-9 text-2xl">
{{ value }}
+8 -8
View File
@@ -69,7 +69,7 @@
</ol>
</div>
<div v-if="quiz.data.duration" class="flex flex-col space-x-1 my-4">
<div v-if="quiz.data.duration" class="flex flex-col gap-x-1 my-4">
<div class="mb-2">
<span class="text-ink-gray-9"> {{ __('Time') }}: </span>
<span class="font-semibold text-ink-gray-9">
@@ -84,7 +84,7 @@
<div class="font-semibold text-lg text-ink-gray-9">
{{ quiz.data.title }}
</div>
<div class="flex items-center justify-center space-x-2 mt-4">
<div class="flex items-center justify-center gap-x-2 mt-4">
<Button
v-if="
!quiz.data.max_attempts ||
@@ -179,7 +179,7 @@
</div>
</div>
<span
class="ml-2 text-ink-gray-9"
class="ms-2 text-ink-gray-9"
v-html="questionDetails.data[`option_${index}`]"
>
</span>
@@ -202,12 +202,12 @@
<div v-if="showAnswers.length">
<Badge v-if="showAnswers[0]" :label="__('Correct')" theme="green">
<template #prefix>
<CheckCircle class="w-4 h-4 text-ink-green-2 mr-1" />
<CheckCircle class="w-4 h-4 text-ink-green-2 me-1" />
</template>
</Badge>
<Badge v-else theme="red" :label="__('Incorrect')">
<template #prefix>
<XCircle class="w-4 h-4 text-ink-red-3 mr-1" />
<XCircle class="w-4 h-4 text-ink-red-3 me-1" />
</template>
</Badge>
</div>
@@ -230,7 +230,7 @@
/>
<div
v-if="!quiz.data.show_answers"
class="flex items-center space-x-2"
class="flex items-center gap-x-2"
>
<Button
@click="switchQuestion(activeQuestion - 1)"
@@ -306,7 +306,7 @@
<div class="font-semibold">
{{ __('Questions marked for review') }}
</div>
<div class="flex items-center space-x-2 mt-2">
<div class="flex items-center gap-x-2 mt-2">
<div
v-for="index in reviewQuestions"
@click="switchQuestion(index)"
@@ -342,7 +342,7 @@
)
}}
</div>
<div class="space-x-2">
<div class="flex gap-x-2">
<Button
@click="resetQuiz()"
class="mt-2"
@@ -1,7 +1,7 @@
<template>
<div class="text-base">
<div class="flex items-center justify-between space-x-2 mb-5">
<div class="flex items-center space-x-2">
<div class="flex items-center justify-between gap-x-2 mb-5">
<div class="flex items-center gap-x-2">
<ChevronLeft
class="size-5 stroke-1.5 text-ink-gray-5 cursor-pointer"
@click="
@@ -34,7 +34,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns">
<template #prefix="{ item }">
@@ -70,7 +70,7 @@
</div>
</template>
<template #actions="{ close }">
<div class="pb-5 float-right">
<div class="pb-5 float-end">
<Button variant="solid" @click="saveBadge(close)">
{{ __('Save') }}
</Button>
+1 -1
View File
@@ -32,7 +32,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns" :key="item.key">
<template #prefix="{ item }">
@@ -10,7 +10,7 @@
{{ __(description) }}
</div>
</div>
<div class="space-x-2">
<div class="flex items-center gap-x-2">
<Badge
v-if="isDirty"
:label="__('Not Saved')"
@@ -9,9 +9,9 @@
{{ __(description) }}
</div>
</div>
<div class="flex items-center space-x-5">
<div class="flex items-center gap-x-5">
<div
class="flex items-center space-x-1 text-ink-amber-3 border border-outline-amber-1 bg-surface-amber-1 rounded-lg px-2 py-1"
class="flex items-center gap-x-1 text-ink-amber-3 border border-outline-amber-1 bg-surface-amber-1 rounded-lg px-2 py-1"
v-if="saving"
>
<LoadingIndicator class="size-2" />
@@ -29,10 +29,7 @@
</div>
</div>
<div
v-if="showForm"
class="flex items-center justify-between my-4 space-x-2"
>
<div v-if="showForm" class="flex items-center justify-between my-4 gap-x-2">
<FormControl
ref="categoryInput"
v-model="category"
@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col text-base h-full">
<div class="flex items-center space-x-2 mb-8 -ml-1.5">
<div class="flex items-center gap-x-2 mb-8 -ms-1.5">
<ChevronLeft
class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
@click="emit('updateStep', 'list')"
@@ -74,7 +74,7 @@
<CouponItems ref="couponItems" :data="data" :coupons="coupons" />
</div>
</div>
<div class="mt-auto space-x-2 ml-auto">
<div class="mt-auto flex gap-x-2 items-center ms-auto">
<Button variant="solid" @click="saveCoupon()">
{{ __('Save') }}
</Button>
@@ -1,7 +1,7 @@
<template>
<div>
<div class="relative overflow-x-auto border rounded-md">
<table class="w-full text-sm text-left text-ink-gray-5">
<table class="w-full text-sm text-start text-ink-gray-5">
<thead class="text-xs text-ink-gray-7 uppercase bg-surface-gray-2">
<tr>
<td scope="col" class="px-6 py-2">
@@ -31,7 +31,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
</ListHeader>
<ListRows>
@@ -9,7 +9,7 @@
{{ __(description) }}
</div> -->
</div>
<div class="flex items-center space-x-5">
<div class="flex items-center gap-x-5">
<Button @click="openTemplateForm('new')">
<template #prefix>
<Plus class="h-3 w-3 stroke-1.5" />
@@ -31,14 +31,14 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns">
<template #prefix="{ item }">
<component
v-if="item.icon"
:is="item.icon"
class="h-4 w-4 stroke-1.5 ml-4"
class="h-4 w-4 stroke-1.5 ms-4"
/>
</template>
</ListHeaderItem>
@@ -9,7 +9,7 @@
{{ __(description) }}
</div>
</div>
<div class="flex item-center space-x-2">
<div class="flex item-center gap-x-2">
<Dropdown
placement="right"
side="bottom"
@@ -39,7 +39,7 @@
<template #suffix>
<ChevronDown
:class="[
'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
'w-4 h-4 stroke-1.5 ms-1 transform transition-transform',
open ? 'rotate-180' : '',
]"
/>
@@ -72,7 +72,7 @@
>
<div class="flex items-center justify-between group py-3">
<div
class="flex items-center space-x-3"
class="flex items-center gap-x-3"
@click="openProfile(evaluator.username)"
>
<Avatar
@@ -9,7 +9,7 @@
{{ __(description) }}
</div>
</div>
<div class="flex items-center space-x-5">
<div class="flex items-center gap-x-5">
<Button @click="openForm('new')">
<template #prefix>
<Plus class="h-3 w-3 stroke-1.5" />
@@ -31,7 +31,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns">
<template #prefix="{ item }">
+3 -3
View File
@@ -9,7 +9,7 @@
{{ __(description) }}
</div>
</div>
<div class="flex item-center space-x-2">
<div class="flex item-center gap-x-2">
<Button @click="showNewMember = true">
<template #prefix>
<Plus class="size-4 stroke-1.5" />
@@ -39,7 +39,7 @@
>
<div
@click="openProfile(member.username)"
class="flex items-center space-x-3 col-span-2"
class="flex items-center gap-x-3 col-span-2"
>
<Avatar
:image="member.user_image"
@@ -58,7 +58,7 @@
</div>
</div>
<div
class="flex items-center text-ink-gray-9 space-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
class="flex items-center text-ink-gray-9 gap-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
v-if="member.role && member.role !== 'LMS Student'"
>
<Shield class="size-4 stroke-1.5" />
@@ -36,7 +36,7 @@
</div>
</template>
<template #actions="{ close }">
<div class="pb-5 float-right">
<div class="pb-5 float-end">
<Button variant="solid" @click="saveSettings(close)">
{{ __('Save') }}
</Button>
@@ -30,7 +30,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns">
<template #prefix="{ item }">
@@ -10,7 +10,7 @@
{{ __(description) }}
</div>
</div>
<div class="space-x-2">
<div class="gap-x-2">
<Badge
v-if="data.isDirty"
:label="__('Not Saved')"
@@ -6,7 +6,7 @@
</div>
<div
:class="{
'flex justify-between space-x-8 w-full': section.columns.length > 1,
'flex justify-between gap-x-8 w-full': section.columns.length > 1,
}"
>
<div
@@ -64,7 +64,7 @@
</template>
</FileUploader>
<div v-else>
<div class="flex items-center text-sm space-x-2">
<div class="flex items-center text-sm gap-x-2">
<div
class="flex items-center justify-center rounded border border-outline-gray-modals bg-surface-gray-2"
:class="field.size == 'lg' ? 'px-5 py-5' : 'px-20 py-8'"
@@ -91,7 +91,7 @@
</div>
<X
@click="data[field.name] = null"
class="border text-ink-gray-7 border-outline-gray-modals rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
class="border text-ink-gray-7 border-outline-gray-modals rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ms-4"
/>
</div>
</div>
@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col h-full text-base">
<div class="flex items-center justify-between mb-10 -ml-1.5">
<div class="flex items-center space-x-2">
<div class="flex items-center justify-between mb-10 -ms-1.5">
<div class="flex items-center gap-x-2">
<ChevronLeft
class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
@click="emit('updateStep', 'list')"
@@ -10,7 +10,7 @@
{{ __('Transaction Details') }}
</div>
</div>
<div class="space-x-2">
<div class="flex items-center gap-x-2">
<Button
v-if="
transactionData?.payment_for_document_type &&
@@ -17,7 +17,7 @@
</Button>
</div>
<div class="flex items-center space-x-5 mb-4">
<div class="flex items-center gap-x-5 mb-4">
<FormControl
v-model="billingName"
:placeholder="__('Filter by Billing Name')"
@@ -55,7 +55,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns">
<template #prefix="{ item }">
@@ -9,7 +9,7 @@
{{ __(description || '') }}
</div>
</div>
<div class="flex items-center space-x-5">
<div class="flex items-center gap-x-5">
<Button @click="openForm('new')">
<template #prefix>
<Plus class="h-3 w-3 stroke-1.5" />
@@ -31,7 +31,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in columns">
<template #prefix="{ item }">
+6 -10
View File
@@ -1,6 +1,6 @@
<template>
<div
class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out border-r bg-surface-menu-bar"
class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out border-e bg-surface-menu-bar"
:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
>
<div
@@ -31,8 +31,8 @@
class="mt-4"
>
<div
class="flex items-center justify-between pr-2 cursor-pointer"
:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
class="flex items-center justify-between pe-2 cursor-pointer"
:class="sidebarStore.isSidebarCollapsed ? 'ps-3' : 'ps-4'"
@click="toggleWebPages"
>
<div
@@ -45,7 +45,7 @@
:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
/>
</span>
<span class="ml-2">
<span class="ms-2">
{{ __('More') }}
</span>
</div>
@@ -159,12 +159,8 @@
"
>
<div
class="flex items-center flex-1"
:class="
sidebarStore.isSidebarCollapsed
? 'flex-col space-y-3'
: 'flex-row space-x-3'
"
class="flex items-center flex-1 gap-3"
:class="sidebarStore.isSidebarCollapsed ? 'flex-col' : 'flex-row'"
>
<Tooltip v-if="readOnlyMode && sidebarStore.isSidebarCollapsed">
<CircleAlert
@@ -25,18 +25,18 @@
class="flex-shrink-0 text-sm duration-300 ease-in-out"
:class="
isCollapsed
? 'ml-0 w-0 overflow-hidden opacity-0'
: 'ml-2 w-auto opacity-100'
? 'ms-0 w-0 overflow-hidden opacity-0'
: 'ms-2 w-auto opacity-100'
"
>
{{ __(link.label) }}
</span>
<span
v-if="link.count && !isCollapsed"
class="!ml-auto block text-xs text-ink-gray-5"
class="!ms-auto block text-xs text-ink-gray-5"
:class="
isCollapsed && link.count > 9
? 'absolute top-[2px] right-0 bg-surface-white'
? 'absolute top-[2px] end-0 bg-surface-white'
: ''
"
>
@@ -44,7 +44,7 @@
</span>
<div
v-if="showControls && !isCollapsed"
class="flex items-center space-x-2 !ml-auto block text-xs text-ink-gray-5 group-hover:visible invisible"
class="flex items-center gap-x-2 !ms-auto block text-xs text-ink-gray-5 group-hover:visible invisible"
>
<component
:is="icons['Edit']"
@@ -19,11 +19,11 @@
/>
<LMSLogo v-else class="w-8 h-8 rounded flex-shrink-0" />
<div
class="flex flex-1 flex-col text-left duration-300 ease-in-out"
class="flex flex-1 flex-col text-start duration-300 ease-in-out"
:class="
isCollapsed
? 'opacity-0 ml-0 w-0 overflow-hidden'
: 'opacity-100 ml-2 w-auto'
? 'opacity-0 ms-0 w-0 overflow-hidden'
: 'opacity-100 ms-2 w-auto'
"
>
<div class="text-base font-medium text-ink-gray-9 leading-none">
@@ -47,8 +47,8 @@
class="duration-300 ease-in-out"
:class="
isCollapsed
? 'opacity-0 ml-0 w-0 overflow-hidden'
: 'opacity-100 ml-2 w-auto'
? 'opacity-0 ms-0 w-0 overflow-hidden'
: 'opacity-100 ms-2 w-auto'
"
>
<ChevronDown class="h-4 w-4 text-ink-gray-7" />
+2 -2
View File
@@ -7,11 +7,11 @@
{{ tags }}
<div
v-for="tag in tags?.split(', ')"
class="flex items-center bg-surface-gray-2 p-2 rounded-md mr-2"
class="flex items-center bg-surface-gray-2 p-2 rounded-md me-2"
>
{{ tag }}
<X
class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
class="stroke-1.5 w-3 h-3 ms-2 cursor-pointer"
@click="removeTag(tag)"
/>
</div>
@@ -5,12 +5,12 @@
</template>
<template #body>
<div
class="absolute left-1/2 mt-3 max-w-sm -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
class="absolute start-1/2 mt-3 max-w-sm -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
>
<div
class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-x-2">
<div class="flex-1">
<TextInput
type="text"
@@ -66,25 +66,25 @@
</div>
<div class="flex items-center mb-2">
<Calendar class="w-4 h-4 stroke-1.5" />
<span class="ml-2">
<span class="ms-2">
{{ dayjs(evl.date).format('DD MMMM YYYY') }}
</span>
</div>
<div class="flex items-center mb-2">
<Clock class="w-4 h-4 stroke-1.5" />
<span class="ml-2">
<span class="ms-2">
{{ formatTime(evl.start_time) }}
</span>
</div>
<div class="flex items-center">
<GraduationCap class="w-4 h-4 stroke-1.5" />
<span class="ml-2">
<span class="ms-2">
{{ evl.evaluator_name }}
</span>
</div>
<div
v-if="evl.google_meet_link"
class="flex items-center justify-between space-x-2 mt-4"
class="flex items-center justify-between gap-x-2 mt-4"
>
<Button @click="openEvalCall(evl)" class="w-full">
<template #prefix>
+4 -4
View File
@@ -8,7 +8,7 @@
)
}}
<div v-for="(quiz, index) in quizzes" class="pl-3 mt-1">
<div v-for="(quiz, index) in quizzes" class="ps-3 mt-1">
<span>
{{ index + 1 }}. <span class="font-semibold"> {{ quiz.quiz }} </span>
</span>
@@ -36,7 +36,7 @@
@click="playVideo"
>
<div
class="rounded-full p-4 pl-4.5"
class="rounded-full p-4 ps-4.5"
style="
background: radial-gradient(
circle,
@@ -49,7 +49,7 @@
</div>
</div>
<div
class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
class="flex items-center gap-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 start-0 end-0 mx-auto rounded-md"
:class="{
'invisible group-hover:visible': playing,
}"
@@ -76,7 +76,7 @@
class="duration-slider h-1"
/>
<!-- QUIZ MARKERS -->
<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
<div class="absolute top-0 start-0 w-full h-full pointer-events-none">
<div
v-for="(quiz, index) in quizzes"
:key="index"