fix: job page layout

frontend/src/components/AudioBlock.vue

@@ -6,9 +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 mx-auto"
-		>
+		<div class="flex items-center space-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-gray-900" />

frontend/src/components/JobCard.vue

@@ -1,35 +1,29 @@
 <template>
-	<div class="flex shadow rounded-md p-4 h-full">
-		<img
-			:src="job.company_logo"
-			class="w-12 h-12 rounded-lg object-contain mr-4"
-			:alt="job.company_name"
-		/>
-		<div>
-			<div class="text-xl font-semibold mb-2">
-				{{ job.job_title }}
-			</div>
+	<div class="flex rounded px-2 py-2.5 hover:bg-gray-100">
+		<div class="flex w-2/5">
+			<img
+				:src="job.company_logo"
+				class="w-12 h-12 rounded-lg object-contain mr-4"
+				:alt="job.company_name"
+			/>
 			<div>
-				{{ __('posted by') }}
-				<span class="font-medium">
+				<div class="font-medium mb-1">
+					{{ job.job_title }}
+				</div>
+				<div class="text-gray-700">
 					{{ job.company_name }}
-				</span>
-			</div>
-			<div class="flex items-center my-4">
-				<Badge :label="job.type" theme="green" size="lg" class="mr-4" />
-				<Badge :label="job.location.split(' ')[0]" theme="gray" size="lg">
-					<template #prefix>
-						<MapPin class="h-4 w-4 stroke-1.5" />
-					</template>
-				</Badge>
-			</div>
-			<div>
-				{{ __('posted on') }}
-				<span class="font-medium">
-					{{ dayjs(job.creation).format('DD MMM YYYY') }}
-				</span>
+				</div>
 			</div>
 		</div>
+		<div class="flex justify-end w-1/5 text-gray-700">
+			{{ job.location.replace(',', '').split(' ')[0] }}
+		</div>
+		<div class="flex justify-end w-1/5 text-gray-700">
+			{{ job.type }}
+		</div>
+		<div class="flex justify-end w-1/5 text-sm text-gray-700 text-right">
+			{{ dayjs(job.creation).format('DD MMM YYYY') }}
+		</div>
 	</div>
 	<!-- <div class="flex flex-col shadow rounded-md p-4 h-full">
 		<div class="flex justify-between">

frontend/src/components/LessonPlugins.vue

@@ -129,7 +129,7 @@ const addFile = (data) => {
 
 const validateFile = (file) => {
 	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3'].includes(extension)) {
+	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3', 'pdf'].includes(extension)) {
 		return 'Only image and video files are allowed.'
 	}
 }

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>

frontend/src/utils/index.js

@@ -172,7 +172,7 @@ export function getEditorTools() {
 						regex: /https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
 						embedUrl:
 							'https://docs.google.com/presentation/d/e/<%= remote_id %>/embed',
-						html: "<iframe width='100%' height='300' frameborder='0' allowfullscreen='true'></iframe>",
+						html: "<iframe style='width: 100%; height: 28rem;' frameborder='0' allowfullscreen='true'></iframe>",
 					},
 				},
 			},

frontend/src/utils/upload.js

@@ -13,12 +13,14 @@ export class Upload {
 	}
 
 	render() {
+		console.log('render')
 		this.wrapper = document.createElement('div')
 		this.renderUpload(this.data)
 		return this.wrapper
 	}
 
 	renderUpload(file) {
+		console.log(file.file_type)
 		if (this.isVideo(file.file_type)) {
 			const app = createApp(VideoBlock, {
 				file: file.file_url,
@@ -31,14 +33,17 @@ export class Upload {
 			})
 			app.mount(this.wrapper)
 			return
-		} else if (file.file_type == 'pdf') {
-			return `<iframe src="${encodeURI(
+		} else if (file.file_type == 'PDF') {
+			this.wrapper.innerHTML = `<iframe src="${encodeURI(
 				file.file_url
 			)}#toolbar=0" width='100%' height='700px' class="mb-4"></iframe>`
+			return
 		} else {
-			return `<img class="mb-4" src=${encodeURI(
+			console.log('in else')
+			this.wrapper.innerHTML = `<img class="mb-4" src=${encodeURI(
 				file.file_url
 			)} width='100%'>`
+			return
 		}
 	}