feat: mobile responsive

frontend/src/components/Annoucements.vue

@@ -55,7 +55,7 @@ const communications = createListResource({
 	cache: ['batch', props.batch],
 })
 </script>
-<style>
+<style scoped>
 .prose-sm p {
 	margin: 0 0 0.5rem;
 }

frontend/src/components/AppSidebar.vue

@@ -11,10 +11,7 @@
 			<div class="flex flex-col overflow-y-auto">
 				<SidebarLink
 					v-for="link in links"
-					:icon="link.icon"
+					:link="link"
-					:label="link.label"
-					:to="link.to"
-					:activeFor="link.activeFor"
 					:isCollapsed="isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>

frontend/src/components/BatchCard.vue

@@ -61,7 +61,7 @@ const props = defineProps({
 	},
 })
 </script>
-<style>
+<style scoped>
 .short-introduction {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;

frontend/src/components/CourseCard.vue

@@ -9,8 +9,8 @@
 			:class="{ 'default-image': !course.image }"
 			:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
 		>
-			<div class="flex relative top-4 left-4 w-fit">
+			<div class="flex relative top-4 left-4 w-fit flex-wrap">
-				<Badge theme="gray" size="lg" class="mr-2" v-for="tag in course.tags">
+				<Badge theme="gray" size="md" class="mr-2" v-for="tag in course.tags">
 					{{ tag }}
 				</Badge>
 			</div>
@@ -127,7 +127,7 @@ const props = defineProps({
 	},
 })
 </script>
-<style>
+<style scoped>
 .course-image {
 	height: 168px;
 	width: 100%;

frontend/src/components/CourseOutline.vue

@@ -158,7 +158,7 @@ const getCurrentChapter = () => {
 	return currentChapter.value
 }
 </script>
-<style>
+<style scoped>
 .outline-lesson:has(.router-link-active) {
 	background-color: theme('colors.gray.100');
 }

frontend/src/components/DesktopLayout.vue

@@ -1,8 +1,10 @@
 <template>
 	<div class="relative flex h-full flex-col">
 		<div class="h-full flex-1">
-            <div class="flex h-full">
+			<div class="flex h-screen text-base">
-                <div class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto">
+				<div
+					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
+				>
 					<slot name="sidebar" />
 					<AppSidebar />
 				</div>

frontend/src/components/JobCard.vue

@@ -16,7 +16,7 @@
 			</div>
 			<div class="flex items-center my-4">
 				<Badge :label="job.type" theme="green" size="lg" class="mr-4" />
-				<Badge :label="job.location" theme="gray" size="lg">
+				<Badge :label="job.location.split(' ')[0]" theme="gray" size="lg">
 					<template #prefix>
 						<MapPin class="h-4 w-4 stroke-1.5" />
 					</template>

frontend/src/components/MobileLayout.vue

@@ -1,20 +1,27 @@
 <template>
 	<div class="flex h-full flex-col">
-		<div class="h-full overflow-auto" id="scrollContainer">
+		<div class="h-full" id="scrollContainer">
 			<slot />
 		</div>
 		<div
 			v-if="tabs"
-			class="grid grid-cols-5 border-t border-gray-300 standalone:pb-4"
+			class="grid grid-cols-5 border-t border-gray-300 sticky bottom-0 z-10 bg-white standalone:pb-4"
-			:style="{ gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))` }"
+			:style="{
+				gridTemplateColumns: `repeat(${tabs.length - 1}, minmax(0, 1fr))`,
+			}"
 		>
 			<button
 				v-for="tab in tabs"
 				:key="tab.label"
+				:class="isVisible(tab) ? 'block' : 'hidden'"
 				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
 				@click="handleClick(tab)"
 			>
-				<component :is="tab.icon" class="h-6 w-6 stroke-1.5 text-gray-700" />
+				<component
+					:is="tab.icon"
+					class="h-7 w-7 stroke-1.5"
+					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
+				/>
 			</button>
 		</div>
 	</div>
@@ -22,19 +29,33 @@
 <script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+import { sessionStore } from '@/stores/session'
+
+const { logout, user } = sessionStore()
+let { isLoggedIn } = sessionStore()
 
 const router = useRouter()
 const tabs = computed(() => {
 	return getSidebarLinks()
 })
 
-/* let isActive = computed((tab) => {
+let isActive = (tab) => {
-	console.log(tab);
+	return tab.activeFor?.includes(router.currentRoute.value.name)
-	return router.currentRoute.value.name === tab.to
+}
-}) */
 
 const handleClick = (tab) => {
-	router.push({ name: tab.to })
+	if (tab.label == 'Log in') window.location.href = '/login'
+	else if (tab.label == 'Log out')
+		logout.submit().then(() => {
+			isLoggedIn = false
+		})
+	else router.push({ name: tab.to })
+}
+
+const isVisible = (tab) => {
+	if (tab.label == 'Log in') return !isLoggedIn
+	else if (tab.label == 'Log out') return isLoggedIn
+	else return true
 }
 </script>

frontend/src/components/SidebarLink.vue

@@ -1,5 +1,6 @@
 <template>
 	<button
+		v-if="link && !link.onlyMobile"
 		class="flex h-7 cursor-pointer items-center rounded text-gray-800 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
 		:class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
 		@click="handleClick"
@@ -8,10 +9,13 @@
 			class="flex items-center duration-300 ease-in-out"
 			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
 		>
-			<Tooltip :text="label" placement="right">
+			<Tooltip :text="link.label" placement="right">
 				<slot name="icon">
 					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-						<component :is="icon" class="h-5 w-5 stroke-1.5 text-gray-800" />
+						<component
+							:is="link.icon"
+							class="h-5 w-5 stroke-1.5 text-gray-800"
+						/>
 					</span>
 				</slot>
 			</Tooltip>
@@ -23,7 +27,7 @@
 						: 'ml-2 w-auto opacity-100'
 				"
 			>
-				{{ label }}
+				{{ link.label }}
 			</span>
 		</div>
 	</button>
@@ -37,20 +41,9 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const props = defineProps({
-	icon: {
+	link: {
-		type: Function,
+		type: Object,
-	},
+		required: true,
-	label: {
-		type: String,
-		default: '',
-	},
-	to: {
-		type: String,
-		default: '',
-	},
-	activeFor: {
-		type: Array,
-		default: [],
 	},
 	isCollapsed: {
 		type: Boolean,
@@ -59,10 +52,10 @@ const props = defineProps({
 })
 
 function handleClick() {
-	router.push({ name: props.to })
+	router.push({ name: props.link.to })
 }
 
 let isActive = computed(() => {
-	return props.activeFor.includes(router.currentRoute.value.name)
+	return props.link?.activeFor?.includes(router.currentRoute.value.name)
 })
 </script>

frontend/src/pages/Batch.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="user.data?.is_moderator || isStudent" class="h-screen text-base">
+	<div v-if="user.data?.is_moderator || isStudent" class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -102,7 +102,7 @@
 			/>
 		</div>
 	</div>
-	<div v-else-if="!user.data?.name" class="h-screen">
+	<div v-else-if="!user.data?.name" class="">
 		<div class="text-base border rounded-md w-1/3 mx-auto my-32">
 			<div class="border-b px-5 py-3 font-medium">
 				<span

frontend/src/pages/BatchCreation.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>

frontend/src/pages/BatchDetail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="batch.data" class="h-screen text-base">
+	<div v-if="batch.data" class="">
 		<header class="sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5">
 			<Breadcrumbs :items="breadcrumbs" />
 		</header>
@@ -136,7 +136,7 @@ const breadcrumbs = computed(() => {
 	return items
 })
 </script>
-<style>
+<style scoped>
 .batch-description p {
 	margin-bottom: 1rem;
 	line-height: 1.7;

frontend/src/pages/Batches.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -58,7 +58,7 @@
 				<template #default="{ tab }">
 					<div
 						v-if="tab.batches && tab.batches.value.length"
-						class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-5 mt-5 mx-5"
+						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-5 mx-5"
 					>
 						<router-link
 							v-for="batch in tab.batches.value"

frontend/src/pages/Billing.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="text-base h-screen">
+	<div class="">
 		<div
 			v-if="access.data?.access && orderSummary.data"
 			class="mt-10 w-1/2 mx-auto"

frontend/src/pages/CourseDetail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="course.data" class="h-screen text-base">
+	<div v-if="course.data">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -7,7 +7,7 @@
 		</header>
 		<div class="m-5">
 			<div class="flex justify-between w-full">
-				<div class="w-2/3">
+				<div class="md:w-2/3">
 					<div class="text-3xl font-semibold">
 						{{ course.data.title }}
 					</div>
@@ -74,6 +74,7 @@
 							{{ tag }}
 						</Badge>
 					</div>
+					<CourseCardOverlay :course="course" class="md:hidden mb-4" />
 					<div
 						v-html="course.data.description"
 						class="course-description"
@@ -92,7 +93,7 @@
 						:membership="course.data.membership"
 					/>
 				</div>
-				<div class="">
+				<div class="hidden md:block">
 					<CourseCardOverlay :course="course" />
 				</div>
 			</div>
@@ -143,7 +144,7 @@ const pageMeta = computed(() => {
 
 updateDocumentTitle(pageMeta)
 </script>
-<style>
+<style scoped>
 .course-description p {
 	margin-bottom: 1rem;
 	line-height: 1.7;

frontend/src/pages/Courses.vue

@@ -1,5 +1,4 @@
 <template>
-	<div class="h-screen">
 	<div v-if="courses.data">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
@@ -36,8 +35,8 @@
 			<Tabs
 				v-else
 				v-model="tabIndex"
+				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
 				:tabs="tabs"
-					tablistClass="overflow-x-visible"
 			>
 				<template #tab="{ tab, selected }">
 					<div>
@@ -56,7 +55,7 @@
 				<template #default="{ tab }">
 					<div
 						v-if="tab.courses && tab.courses.value.length"
-							class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 my-5 mx-5"
+						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-5 mx-5"
 					>
 						<router-link
 							v-for="course in tab.courses.value"
@@ -94,9 +93,7 @@
 					>
 						<div class="flex flex-col items-center justify-center mt-4">
 							<div>
-									{{
+								{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}
-										__('No {0} courses found').format(tab.label.toLowerCase())
-									}}
 							</div>
 						</div>
 					</div>
@@ -104,7 +101,6 @@
 			</Tabs>
 		</div>
 	</div>
-	</div>
 </template>
 
 <script setup>

frontend/src/pages/CreateCourse.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
-		<div class="grid grid-cols-[70%,30%] h-full">
+		<div class="grid md:grid-cols-[70%,30%] h-full">
 			<div>
 				<header
 					class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"

frontend/src/pages/CreateLesson.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<div class="grid grid-cols-[75%,25%] h-full">
 			<div class="border-r">
 				<header
@@ -411,7 +411,7 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })
 </script>
-<style>
+<style scoped>
 .embed-tool__caption {
 	display: none;
 }

frontend/src/pages/JobCreation.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>

frontend/src/pages/JobDetail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="text-base h-screen">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>

frontend/src/pages/Jobs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -27,7 +27,7 @@
 			</div>
 		</header>
 		<div v-if="jobs.data">
-			<div class="grid grid-cols-2 gap-5 p-5">
+			<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">
 					<router-link
 						:to="{

frontend/src/pages/Lesson.vue

@@ -1,12 +1,15 @@
 <template>
-	<div v-if="lesson.data" class="h-screen text-base">
+	<div v-if="lesson.data" class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
-		<div class="grid grid-cols-[70%,30%] h-full">
+		<div class="grid md:grid-cols-[70%,30%] h-full">
-			<div v-if="lesson.data.no_preview" class="border-r-1 text-center pt-10">
+			<div
+				v-if="lesson.data.no_preview"
+				class="border-r-2 text-center pt-10 px-5 md:px-0 pb-10"
+			>
 				<p class="mb-4">
 					{{
 						__(
@@ -22,12 +25,12 @@
 					</Button>
 				</router-link>
 			</div>
-			<div v-else class="border-r-2 container pt-5 pb-10">
+			<div v-else class="border-r-2 container pt-5 pb-10 px-5">
-				<div class="flex items-center justify-between">
+				<div class="flex flex-col md:flex-row md:items-center justify-between">
 					<div class="text-3xl font-semibold">
 						{{ lesson.data.title }}
 					</div>
-					<div class="flex items-center">
+					<div class="flex items-center mt-2 md:mt-0">
 						<router-link
 							v-if="lesson.data.prev"
 							:to="{
@@ -336,7 +339,7 @@ const allowInstructorContent = () => {
 	return false
 }
 </script>
-<style>
+<style scoped>
 .avatar-group {
 	display: inline-flex;
 	align-items: center;

frontend/src/pages/Statistics.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
 		<div v-if="chartDetails.data" class="p-5">
-			<div class="grid grid-cols-5 gap-4">
+			<div class="grid grid-cols-2 lg:gridc-cols-5 gap-4">
 				<div class="flex items-center shadow py-2 px-3 rounded-md">
 					<div class="p-2 rounded-md bg-gray-100 mr-3">
 						<BookOpen class="w-18 h-18 stroke-1.5 text-gray-700" />
@@ -73,7 +73,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="grid grid-cols-2 gap-4 mt-4">
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
 				<div class="shadow rounded-md p-5 min-h-72">
 					<Line
 						v-if="signupsChart.data"

lms/lms/utils.py

@@ -1312,16 +1312,14 @@ def get_lesson(course, chapter, lesson):
 		"Course Lesson", lesson_name, ["include_in_preview", "title"], as_dict=1
 	)
 	membership = get_membership(course)
+	course_title = frappe.db.get_value("LMS Course", course, "title")
 	if (
 		not lesson_details.include_in_preview
 		and not membership
 		and not has_course_moderator_role()
 		and not is_instructor(course)
 	):
-		return {
+		return {"no_preview": 1, "title": lesson_details.title, "course_title": course_title}
-			"no_preview": 1,
-			"title": lesson_details.title,
-		}
 
 	lesson_details = frappe.db.get_value(
 		"Course Lesson",
@@ -1356,7 +1354,7 @@ def get_lesson(course, chapter, lesson):
 	lesson_details.prev = neighbours["prev"]
 	lesson_details.membership = membership
 	lesson_details.instructors = get_instructors(course)
-	lesson_details.course_title = frappe.db.get_value("LMS Course", course, "title")
+	lesson_details.course_title = course_title
 	return lesson_details