fix: mobile layout and certification link

frontend/src/components/CourseCardOverlay.vue

@@ -3,7 +3,7 @@
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
-			class="rounded-t-md min-h-56 min-w-80"
+			class="rounded-t-md min-h-56 w-full"
 		/>
 		<div class="p-5">
 			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">

frontend/src/components/Discussions.vue

@@ -11,7 +11,7 @@
 		<div v-if="showTopics" v-for="(topic, index) in topics.data">
 			<div
 				@click="showReplies(topic)"
-				class="flex items-center cursor-pointer py-5"
+				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" />
@@ -23,7 +23,7 @@
 						<span>
 							{{ topic.user.full_name }}
 						</span>
-						<span class="text-sm ml-2">
+						<span class="text-sm ml-3">
 							{{ timeAgo(topic.creation) }}
 						</span>
 					</div>

frontend/src/components/MobileLayout.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="flex h-full flex-col">
-		<div class="h-full" id="scrollContainer">
+		<div class="h-full pb-10" id="scrollContainer">
 			<slot />
 		</div>
 		<div
 			v-if="tabs"
-			class="grid grid-cols-5 border-t border-gray-300 sticky bottom-0 z-10 bg-white standalone:pb-4"
+			class="fixed flex justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
 			:style="{
-				gridTemplateColumns: `repeat(${tabs.length - 1}, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))`,
 			}"
 		>
 			<button
@@ -19,7 +19,7 @@
 			>
 				<component
 					:is="tab.icon"
-					class="h-7 w-7 stroke-1.5"
+					class="h-6 w-6 stroke-1.5"
 					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
 				/>
 			</button>

frontend/src/pages/Batches.vue

@@ -31,7 +31,11 @@
 			>
 				{{ __('Loading Batches...') }}
 			</div>
-			<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
+			<Tabs
+				v-model="tabIndex"
+				:tabs="tabs"
+				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
+			>
 				<template #tab="{ tab, selected }">
 					<div>
 						<button

frontend/src/pages/CreateCourse.vue

@@ -3,10 +3,10 @@
 		<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"
+					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 				>
 					<Breadcrumbs class="h-7" :items="breadcrumbs" />
-					<div class="flex items-center">
+					<div class="flex items-center mt-3 md:mt-0">
 						<router-link
 							v-if="courseResource.data"
 							:to="{

frontend/src/pages/CreateLesson.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="">
-		<div class="grid grid-cols-[75%,25%] h-full">
+		<div class="grid md:grid-cols-[75%,25%] h-full">
 			<div class="border-r">
 				<header
-					class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-white px-3 py-2.5 sm:px-5"
 				>
-					<Breadcrumbs :items="breadcrumbs" />
-					<Button variant="solid" @click="saveLesson()">
+					<Breadcrumbs class="text-ellipsis" :items="breadcrumbs" />
+					<Button variant="solid" @click="saveLesson()" class="mt-3 md:mt-0">
 						{{ __('Save') }}
 					</Button>
 				</header>

lms/hooks.py

@@ -136,13 +136,17 @@ override_whitelisted_methods = {
 # Add all simple route rules here
 website_route_rules = [
 	{"from_route": "/lms/<path:app_path>", "to_route": "lms"},
+	{
+		"from_route": "/courses/<course_name>/<certificate_id>",
+		"to_route": "certificate",
+	},
 ]
 
 website_redirects = [
 	{"source": "/update-profile", "target": "/edit-profile"},
 	{"source": "/courses", "target": "/lms/courses"},
 	{
-		"source": r"/courses/(.*)",
+		"source": r"/courses/([^/]*)",
 		"target": "/lms/courses",
 		"match_with_query_string": True,
 	},

lms/www/certificate.py

@@ -0,0 +1,14 @@
+import frappe
+from urllib.parse import quote
+
+
+def get_context(context):
+	context.no_cache = 1
+	template = frappe.db.get_value(
+		"LMS Certificate", frappe.form_dict.certificate_id, "template"
+	)
+	certificate_id = frappe.form_dict.certificate_id
+	template = quote(template)
+
+	frappe.local.flags.redirect_location = f"/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name={certificate_id}&format={template}"
+	raise frappe.Redirect