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

fix: ui of job details

Browse Source
This commit is contained in:
Jannat Patel
2025-05-08 14:53:34 +05:30
parent d54ac37403
commit 67fc37c76c
1 changed files with 54 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
frontend/src/pages/JobDetail.vue
View File

@@ -67,86 +67,61 @@
</header> </header>
<div v-if="job.data" class="max-w-3xl mx-auto pt-5"> <div v-if="job.data" class="max-w-3xl mx-auto pt-5">
<div class="p-4"> <div class="p-4">
<div class="space-y-5 mb-10"> <div class="space-y-5 mb-12">
<div class="flex items-center"> <div class="flex">
<img <img
:src="job.data.company_logo" :src="job.data.company_logo"
class="size-10 rounded-lg object-contain cursor-pointer mr-4" class="size-10 rounded-lg object-contain cursor-pointer mr-4"
:alt="job.data.company_name" :alt="job.data.company_name"
@click="redirectToWebsite(job.data.company_website)" @click="redirectToWebsite(job.data.company_website)"
/> />
<div class="text-2xl text-ink-gray-9 font-semibold"> <div class="">
<div class="text-2xl text-ink-gray-9 font-semibold mb-1">
{{ job.data.job_title }} {{ job.data.job_title }}
</div> </div>
</div> <div class="text-sm text-ink-gray-5 font-semibold">
<div> {{ job.data.company_name }} - {{ job.data.location }},
<div {{ job.data.country }}
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-5 md:gap-y-5"
>
<div class="flex items-center space-x-4">
<Building2 class="size-4 stroke-1.5 text-ink-gray-7" />
<div class="flex flex-col space-y-1 text-ink-gray-7">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Organisation') }}
</span>
<span class="text-sm font-semibold">
{{ job.data.company_name }}
</span>
</div> </div>
</div> </div>
<div class="flex items-center space-x-4">
<MapPin class="size-4 stroke-1.5 text-ink-gray-7" />
<div class="flex flex-col space-y-1 text-ink-gray-7">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Location') }}
</span>
<span class="text-sm font-semibold">
{{ job.data.location }}, {{ job.data.country }}
</span>
</div> </div>
</div>
<div class="flex items-center space-x-4"> <div class="space-x-5">
<ClipboardType class="size-4 stroke-1.5 text-ink-gray-7" /> <Badge size="lg">
<div class="flex flex-col space-y-1 text-ink-gray-7"> <template #prefix>
<span class="text-xs text-ink-gray-5 font-medium uppercase"> <CalendarDays class="size-3 stroke-2 text-ink-gray-7" />
{{ __('Category') }} </template>
</span> {{ dayjs(job.data.creation).fromNow() }}
<span class="text-sm font-semibold"> </Badge>
{{ job.data.type }} <Badge size="lg">
</span> <template #prefix>
</div> <SquareUserRound class="size-3 stroke-2 text-ink-gray-7" />
</div> </template>
<div class="flex items-center space-x-4">
<CalendarDays class="size-4 stroke-1.5 text-ink-gray-7" />
<div class="flex flex-col space-y-1 text-ink-gray-7">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Posted on') }}
</span>
<span class="text-sm font-semibold">
{{ dayjs(job.data.creation).format('DD MMM YYYY') }}
</span>
</div>
</div>
<div
v-if="applicationCount.data"
class="flex items-center space-x-4"
>
<SquareUserRound class="size-4 stroke-1.5 text-ink-gray-7" />
<div class="flex flex-col space-y-1 text-ink-gray-7">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Applications Received') }}
</span>
<span class="text-sm font-semibold">
{{ applicationCount.data }} {{ applicationCount.data }}
</span> {{
</div> applicationCount.data == 1 ? __('applicant') : __('applicants')
}}
</Badge>
<Badge size="lg">
<template #prefix>
<ClipboardType class="size-3 stroke-2 text-ink-gray-7" />
</template>
{{ job.data.type }}
</Badge>
</div> </div>
</div> </div>
<div class="flex items-center justify-between">
<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
<div>
<FileText class="size-3 stroke-1 text-ink-gray-5" />
</div> </div>
<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
</div> </div>
<p <p
v-html="job.data.description" v-html="job.data.description"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6" class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-12"
></p> ></p>
</div> </div>
<JobApplicationModal <JobApplicationModal
@@ -169,15 +144,14 @@ import { inject, ref } from 'vue'
import { sessionStore } from '../stores/session' import { sessionStore } from '../stores/session'
import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue' import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
import { import {
MapPin,
Check, Check,
SendHorizonal, SendHorizonal,
Pencil, Pencil,
Building2,
CalendarDays, CalendarDays,
ClipboardType,
SquareUserRound, SquareUserRound,
SquareArrowOutUpRight, SquareArrowOutUpRight,
FileText,
ClipboardType,
} from 'lucide-vue-next' } from 'lucide-vue-next'
const user = inject('$user') const user = inject('$user')
@@ -252,3 +226,12 @@ usePageMeta(() => {
} }
}) })
</script> </script>
<style>
p {
margin-bottom: 0.5rem !important;
line-height: 1.5;
}
p span {
line-height: 1.5;
}
</style>