Merge pull request #1684 from pateljannat/issues-128

fix: misc ui issues

frontend/src/components/CourseCard.vue

@@ -15,7 +15,7 @@
 					  }
 			"
 		>
-			<div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
+			<!-- <div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
 				<div
 					v-if="course.featured"
 					class="flex items-center space-x-1 text-xs text-ink-amber-3 bg-surface-white border border-outline-amber-1 px-2 py-0.5 rounded-md mr-1 mb-1"
@@ -32,14 +32,20 @@
 				>
 					{{ tag }}
 				</div>
-			</div>
-			<!-- <div
+			</div> -->
+			<div
 				v-if="!course.image"
-				class="flex items-center justify-center text-white flex-1 font-extrabold text-2xl my-auto px-5 text-center leading-6"
-				:class="course.tags ? 'h-[80%]' : 'h-full'"
+				class="flex items-center justify-center text-white flex-1 font-extrabold my-auto px-5 text-center leading-6 h-full"
+				:class="
+					course.title.length > 32
+						? 'text-lg'
+						: course.title.length > 20
+						? 'text-xl'
+						: 'text-2xl'
+				"
 			>
 				{{ course.title }}
-			</div> -->
+			</div>
 		</div>
 		<div class="flex flex-col flex-auto p-4">
 			<div class="flex items-center justify-between mb-2">
@@ -69,9 +75,14 @@
 						</span>
 					</Tooltip>
 				</div>
+
+				<Tooltip v-if="course.featured" :text="__('Featured')">
+					<Award class="size-4 stroke-2 text-ink-amber-3" />
+				</Tooltip>
 			</div>
 
 			<div
+				v-if="course.image"
 				class="font-semibold leading-6"
 				:class="course.title.length > 32 ? 'text-lg' : 'text-xl'"
 			>
@@ -120,7 +131,7 @@
 	</div>
 </template>
 <script setup>
-import { BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
+import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
 import { Tooltip } from 'frappe-ui'

frontend/src/components/EmptyState.vue

@@ -5,7 +5,7 @@
 			{{ __('No {0}').format(type?.toLowerCase()) }}
 		</div>
 		<div
-			class="leading-5 text-base w-2/5 text-base text-center text-ink-gray-7"
+			class="leading-5 text-base w-full md:w-2/5 text-base text-center text-ink-gray-7"
 		>
 			{{
 				__(

frontend/src/components/Modals/CourseProgressSummary.vue

@@ -7,7 +7,9 @@
 		}"
 	>
 		<template #body-content>
-			<div class="flex justify-between space-x-10 text-base mt-10">
+			<div
+				class="flex flex-col-reverse md:flex-row justify-between md:space-x-10 text-base mt-10"
+			>
 				<div class="w-full">
 					<div class="flex items-center justify-between space-x-5 mb-4">
 						<!-- <div class="text-xl font-semibold text-ink-gray-6">
@@ -90,7 +92,9 @@
 					</div>
 				</div>
 				<div class="mb-4 self-start w-full space-y-5">
-					<div class="flex items-center space-x-4">
+					<div
+						class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4"
+					>
 						<NumberChart
 							class="border rounded-md w-full"
 							:config="{

frontend/src/pages/CourseDetail.vue

@@ -66,7 +66,7 @@
 							{{ tag }}
 						</Badge>
 					</div>
-					<div class="md:hidden mb-4">
+					<div class="md:hidden my-4">
 						<CourseCardOverlay :course="course" />
 					</div>
 					<div

frontend/src/pages/Courses.vue

@@ -26,24 +26,19 @@
 				{{ __('All Courses') }}
 			</div>
 			<div
-				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
+				class="flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons :buttons="courseTabs" v-model="currentTab" class="w-fit" />
-				<FormControl
-					v-model="certification"
-					:label="__('Certification')"
-					type="checkbox"
-					@change="updateCourses()"
-				/>
+
 				<div class="grid grid-cols-2 gap-2">
 					<FormControl
 						v-model="title"
 						:placeholder="__('Search by Title')"
 						type="text"
-						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+						class="w-full lg:min-w-0 lg:w-32 xl:w-40"
 						@input="updateCourses()"
 					/>
-					<div class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40">
+					<div class="w-full lg:min-w-0 lg:w-32 xl:w-40">
 						<Select
 							v-if="categories.length"
 							v-model="currentCategory"
@@ -53,6 +48,13 @@
 						/>
 					</div>
 				</div>
+
+				<FormControl
+					v-model="certification"
+					:label="__('Certification')"
+					type="checkbox"
+					@change="updateCourses()"
+				/>
 			</div>
 		</div>
 		<div

frontend/src/pages/Notifications.vue

@@ -18,7 +18,7 @@
 			/>
 		</div>
 	</header>
-	<div class="w-3/4 mx-auto px-5 pt-6 divide-y">
+	<div class="w-full md:w-3/4 mx-auto px-5 pt-6 divide-y">
 		<div
 			v-if="notifications?.length"
 			v-for="log in notifications"

frontend/src/pages/Profile.vue

@@ -18,7 +18,7 @@
 				class="h-[130px] w-full"
 			></div>
 			<div
-				class="absolute bottom-0 left-1/2 mb-4 flex -translate-x-1/2 space-x-2 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
+				class="absolute bottom-[30%] md:bottom-0 left-[50%] mb-4 flex -translate-x-1/2 space-x-2 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
 				v-if="isSessionUser()"
 			>
 				<EditCoverImage

frontend/vite.config.js

@@ -35,8 +35,8 @@ export default defineConfig({
 			},
 			manifest: {
 				display: 'standalone',
-				name: 'Frappe Learning',
-				short_name: 'Frappe Learning',
+				name: 'Learning',
+				short_name: 'Learning',
 				start_url: '/lms',
 				description:
 					'Easy to use, 100% open source Learning Management System',