fix: job page layout

frontend/src/pages/JobDetail.vue

@@ -50,8 +50,8 @@
 				</Button>
 			</div>
 		</header>
-		<div v-if="job.data">
-			<div class="p-5 sm:p-5">
+		<div v-if="job.data" class="w-3/4 mx-auto">
+			<div class="p-4">
 				<div class="flex mb-4">
 					<img
 						:src="job.data.company_logo"
@@ -114,8 +114,10 @@
 	</div>
 </template>
 <script setup>
-import { Badge, Button, Breadcrumbs, createResource } from 'frappe-ui'
-import { inject, ref, onMounted } from 'vue'
+import { Button, Breadcrumbs, createResource } from 'frappe-ui'
+import { inject, ref, computed } from 'vue'
+import { updateDocumentTitle } from '@/utils'
+import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
 import {
 	MapPin,
 	SendHorizonal,
@@ -125,7 +127,6 @@ import {
 	ClipboardType,
 	SquareUserRound,
 } from 'lucide-vue-next'
-import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -185,4 +186,13 @@ const openApplicationModal = () => {
 const redirectToLogin = (job) => {
 	window.location.href = `/login?redirect-to=/job-openings/${job}`
 }
+
+const pageMeta = computed(() => {
+	return {
+		title: job.data?.job_title,
+		description: job.data?.description,
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Jobs.vue

@@ -26,9 +26,9 @@
 				</router-link>
 			</div>
 		</header>
-		<div v-if="jobs.data">
-			<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 p-5">
-				<div v-if="jobs.data.length" v-for="job in jobs.data">
+		<div v-if="jobs.data?.length">
+			<div class="divide-y w-3/4 mx-auto p-5">
+				<div v-for="job in jobs.data">
 					<router-link
 						:to="{
 							name: 'JobDetail',
@@ -41,13 +41,17 @@
 				</div>
 			</div>
 		</div>
+		<div v-else class="text-gray-700 italic p-5 w-fit mx-auto">
+			{{ __('No jobs posted') }}
+		</div>
 	</div>
 </template>
 <script setup>
 import { Button, Breadcrumbs, createResource } from 'frappe-ui'
 import { Plus } from 'lucide-vue-next'
-import { inject } from 'vue'
+import { inject, computed } from 'vue'
 import JobCard from '@/components/JobCard.vue'
+import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
 
@@ -56,4 +60,13 @@ const jobs = createResource({
 	cache: ['jobs'],
 	auto: true,
 })
+
+const pageMeta = computed(() => {
+	return {
+		title: 'Jobs',
+		description: 'An open job board for the community',
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Statistics.vue

@@ -16,7 +16,7 @@
 							{{ formatNumber(chartDetails.data.courses) }}
 						</div>
 						<div class="text-gray-700">
-							{{ __('Published Courses') }}
+							{{ __('Courses') }}
 						</div>
 					</div>
 				</div>
@@ -29,7 +29,7 @@
 							{{ formatNumber(chartDetails.data.users) }}
 						</div>
 						<div class="text-gray-700">
-							{{ __('Total Signups') }}
+							{{ __('Signups') }}
 						</div>
 					</div>
 				</div>
@@ -42,7 +42,7 @@
 							{{ formatNumber(chartDetails.data.enrollments) }}
 						</div>
 						<div class="text-gray-700">
-							{{ __('Enrolled Users') }}
+							{{ __('Enrollments') }}
 						</div>
 					</div>
 				</div>
@@ -55,7 +55,7 @@
 							{{ formatNumber(chartDetails.data.completions) }}
 						</div>
 						<div class="text-gray-700">
-							{{ __('Courses Completed') }}
+							{{ __('Completions') }}
 						</div>
 					</div>
 				</div>
@@ -68,7 +68,7 @@
 							{{ formatNumber(chartDetails.data.lesson_completions) }}
 						</div>
 						<div class="text-gray-700">
-							{{ __('Lessons Completed') }}
+							{{ __('Milestones') }}
 						</div>
 					</div>
 				</div>
@@ -109,6 +109,7 @@
 <script setup>
 import { createResource, Breadcrumbs } from 'frappe-ui'
 import { computed, inject } from 'vue'
+import { updateDocumentTitle } from '@/utils'
 import { formatNumber } from '@/utils'
 import { Line, Pie } from 'vue-chartjs'
 import {
@@ -197,7 +198,7 @@ const courseCompletion = createResource({
 
 const signupChartOptions = () => {
 	let options = chartOptions(false)
-	options.plugins.title.text = 'New Signups'
+	options.plugins.title.text = 'Signups'
 	options.borderColor = '#4563f0'
 	options.backgroundColor = (ctx) => {
 		const canvas = ctx.chart.ctx
@@ -213,7 +214,7 @@ const signupChartOptions = () => {
 
 const enrollmentChartOptions = () => {
 	let options = chartOptions(false)
-	options.plugins.title.text = 'Course Enrollments'
+	options.plugins.title.text = 'Enrollments'
 	options.borderColor = '#4563f0'
 	options.backgroundColor = (ctx) => {
 		const canvas = ctx.chart.ctx
@@ -229,7 +230,7 @@ const enrollmentChartOptions = () => {
 
 const lessonChartOptions = () => {
 	let options = chartOptions(false)
-	options.plugins.title.text = 'Lesson Completion'
+	options.plugins.title.text = 'Milestones'
 	options.borderColor = '#4563f0'
 	options.backgroundColor = (ctx) => {
 		const canvas = ctx.chart.ctx
@@ -245,7 +246,7 @@ const lessonChartOptions = () => {
 
 const courseChartOptions = () => {
 	let options = chartOptions(true)
-	options.plugins.title.text = 'Course Completion'
+	options.plugins.title.text = 'Completions'
 	options.backgroundColor = ['#4563f0', '#f683ae']
 	return options
 }
@@ -305,4 +306,13 @@ const chartOptions = (isPie) => {
 		},
 	}
 }
+
+const pageMeta = computed(() => {
+	return {
+		title: 'Statistics',
+		description: 'Statistics of the platform',
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>