fix: mobile and lesson issues

frontend/src/components/BatchOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="batch.data" class="shadow rounded-md p-5" style="width: 300px">
+	<div v-if="batch.data" class="shadow rounded-md p-5 lg:w-72">
 		<Badge
 			v-if="batch.data.seat_count && seats_left > 0"
 			theme="green"

frontend/src/components/MobileLayout.vue

@@ -29,15 +29,42 @@
 <script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import { sessionStore } from '@/stores/session'
+import { usersStore } from '@/stores/user'
+import { LogOut, LogIn, UserRound } from 'lucide-vue-next'
 
-const { logout, user } = sessionStore()
+const { logout, user, username } = sessionStore()
 let { isLoggedIn } = sessionStore()
-
 const router = useRouter()
+let { userResource } = usersStore()
+
 const tabs = computed(() => {
-	return getSidebarLinks()
+	let links = getSidebarLinks()
+
+	if (user) {
+		links.push({
+			label: 'Profile',
+			icon: UserRound,
+			activeFor: [
+				'Profile',
+				'ProfileAbout',
+				'ProfileCertification',
+				'ProfileEvaluator',
+				'ProfileRoles',
+			],
+		})
+		links.push({
+			label: 'Log out',
+			icon: LogOut,
+		})
+	} else {
+		links.push({
+			label: 'Log in',
+			icon: LogIn,
+		})
+	}
+	return links
 })
 
 let isActive = (tab) => {
@@ -50,6 +77,13 @@ const handleClick = (tab) => {
 		logout.submit().then(() => {
 			isLoggedIn = false
 		})
+	else if (tab.label == 'Profile')
+		router.push({
+			name: 'Profile',
+			params: {
+				username: userResource.data?.username,
+			},
+		})
 	else router.push({ name: tab.to })
 }
 

frontend/src/pages/BatchDetail.vue

@@ -11,17 +11,23 @@
 				<div class="my-3">
 					{{ batch.data.description }}
 				</div>
-				<div class="flex items-center justify-between w-1/2">
+				<div
+					class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center justify-between lg:w-1/2"
+				>
 					<div class="flex items-center">
 						<BookOpen class="h-4 w-4 text-gray-700 mr-2" />
 						<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
 					</div>
-					<span v-if="batch.data.courses">&middot;</span>
+					<span class="hidden lg:block" v-if="batch.data.courses"
+						>&middot;</span
+					>
 					<DateRange
 						:startDate="batch.data.start_date"
 						:endDate="batch.data.end_date"
 					/>
-					<span v-if="batch.data.start_date">&middot;</span>
+					<span class="hidden lg:block" v-if="batch.data.start_date"
+						>&middot;</span
+					>
 					<div class="flex items-center">
 						<Clock class="h-4 w-4 text-gray-700 mr-2" />
 						<span>
@@ -31,14 +37,14 @@
 					</div>
 				</div>
 			</div>
-			<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
-				<div class="">
+			<div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
+				<div class="order-2 lg:order-none">
 					<div
 						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6"
 						v-html="batch.data.batch_details"
 					></div>
 				</div>
-				<div>
+				<div class="order-1 lg:order-none">
 					<BatchOverlay :batch="batch" />
 				</div>
 			</div>
@@ -48,7 +54,7 @@
 						{{ __('Courses') }}
 					</div>
 				</div>
-				<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5">
+				<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-5">
 					<div
 						v-if="batch.data.courses"
 						v-for="course in courses.data"

frontend/src/pages/CreateLesson.vue

@@ -43,7 +43,7 @@
 							<div
 								v-show="openInstructorEditor"
 								id="instructor-notes"
-								class="py-3"
+								class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6 py-3"
 							></div>
 						</div>
 					</div>
@@ -52,7 +52,10 @@
 							<label class="block font-medium text-gray-600 mb-1">
 								{{ __('Content') }}
 							</label>
-							<div id="content" class="py-3"></div>
+							<div
+								id="content"
+								class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6 py-3"
+							></div>
 						</div>
 					</div>
 				</div>

frontend/src/pages/Profile.vue

@@ -35,8 +35,8 @@
 				</EditCoverImage>
 			</div>
 		</div>
-		<div class="mx-auto -mt-4 max-w-4xl translate-x-0 sm:px-5">
-			<div class="flex items-center">
+		<div class="mx-auto -mt-10 md:-mt-4 max-w-4xl translate-x-0 px-5">
+			<div class="flex flex-col md:flex-row items-center">
 				<div>
 					<img
 						v-if="profile.data.user_image"
@@ -57,7 +57,11 @@
 						{{ profile.data.headline }}
 					</div>
 				</div>
-				<Button v-if="isSessionUser()" class="ml-auto" @click="editProfile()">
+				<Button
+					v-if="isSessionUser()"
+					class="mt-3 sm:mt-0 md:ml-auto"
+					@click="editProfile()"
+				>
 					<template #prefix>
 						<Edit class="w-4 h-4 stroke-1.5 text-gray-700" />
 					</template>

frontend/src/pages/ProfileAbout.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mt-7">
+	<div class="mt-7 mb-10">
 		<h2 class="mb-3 text-lg font-semibold text-gray-900">
 			{{ __('About') }}
 		</h2>

frontend/src/pages/ProfileCertificates.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="mt-7">
+	<div class="mt-7 mb-10">
 		<h2 class="mb-3 text-lg font-semibold text-gray-900">
 			{{ __('Certificates') }}
 		</h2>
-		<div class="grid grid-cols-3 gap-4">
+		<div class="grid grod-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 			<div
 				v-for="certificate in certificates.data"
 				:key="certificate.name"

frontend/src/pages/ProfileEvaluator.vue

@@ -5,7 +5,9 @@
 		</h2>
 
 		<div class="">
-			<div class="grid grid-cols-4 gap-4 text-sm text-gray-700 mb-4">
+			<div
+				class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-gray-700 mb-4"
+			>
 				<div>
 					{{ __('Day') }}
 				</div>
@@ -20,7 +22,7 @@
 			<div
 				v-if="evaluator.data"
 				v-for="slot in evaluator.data.slots.schedule"
-				class="grid grid-cols-4 gap-4 mb-4 group"
+				class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
 			>
 				<FormControl
 					type="select"
@@ -44,7 +46,10 @@
 				/>
 			</div>
 
-			<div class="grid grid-cols-4 gap-4 mb-4" v-show="showSlotsTemplate">
+			<div
+				class="grid grid-cols-3 md:grod-cols-4 gap-4 mb-4"
+				v-show="showSlotsTemplate"
+			>
 				<FormControl
 					type="select"
 					:options="days"
@@ -74,7 +79,7 @@
 			<h2 class="mb-4 text-lg font-semibold text-gray-900">
 				{{ __('I am unavailable') }}
 			</h2>
-			<div class="grid grid-cols-4 gap-4">
+			<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 				<FormControl
 					type="date"
 					:label="__('From')"

frontend/src/pages/ProfileRoles.vue

@@ -3,7 +3,9 @@
 		<h2 class="mb-3 text-lg font-semibold text-gray-900">
 			{{ __('Settings') }}
 		</h2>
-		<div class="flex justify-between w-3/4 mt-5">
+		<div
+			class="flex flex-col md:flex-row gap-4 md:gap-0 justify-between w-3/4 mt-5"
+		>
 			<FormControl
 				:label="__('Moderator')"
 				v-model="moderator"

frontend/src/pages/Statistics.vue

@@ -6,7 +6,7 @@
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
 		<div v-if="chartDetails.data" class="p-5">
-			<div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-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" />

frontend/src/stores/session.js

@@ -17,6 +17,7 @@ export const sessionStore = defineStore('lms-session', () => {
 	}
 
 	let user = ref(sessionUser())
+	let username = ref(null)
 	const isLoggedIn = computed(() => !!user.value)
 
 	const login = createResource({
@@ -43,6 +44,7 @@ export const sessionStore = defineStore('lms-session', () => {
 
 	return {
 		user,
+		username,
 		isLoggedIn,
 		login,
 		logout,

lms/patches.txt

@@ -86,4 +86,5 @@ lms.patches.v1_0.change_jobs_url #19-01-2024
 lms.patches.v1_0.custom_perm_for_discussions #14-01-2024
 lms.patches.v1_0.rename_evaluator_role
 lms.patches.v1_0.change_navbar_urls
-lms.patches.v1_0.set_published_on
+lms.patches.v1_0.set_published_on
+lms.patches.v2_0.fix_progress_percentage

lms/patches/v2_0/fix_progress_percentage.py

@@ -0,0 +1,10 @@
+import frappe
+from lms.lms.utils import get_course_progress
+
+
+def execute():
+	enrollments = frappe.get_all("LMS Enrollment", fields=["name", "course", "member"])
+
+	for enrollment in enrollments:
+		progress = get_course_progress(enrollment.course, enrollment.member)
+		frappe.db.set_value("LMS Enrollment", enrollment.name, "progress", progress)