eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mobile responsive

Browse Source
This commit is contained in:
Jannat Patel
2024-03-28 11:30:59 +05:30
parent f15862cef4
commit e6d3819092
24 changed files with 198 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/pages/Batch.vue
View File

@@ -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

2
frontend/src/pages/BatchCreation.vue
View File

@@ -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"
>

4
frontend/src/pages/BatchDetail.vue
View File

@@ -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;

4
frontend/src/pages/Batches.vue
View File

@@ -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"

2
frontend/src/pages/Billing.vue
View File

@@ -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"

9
frontend/src/pages/CourseDetail.vue
View File

@@ -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;

194
frontend/src/pages/Courses.vue
View File

@@ -1,108 +1,104 @@
<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"
<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"
>
<Breadcrumbs
class="h-7"
:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
/>
<div class="flex">
<router-link
:to="{
name: 'CreateCourse',
params: {
courseName: 'new',
},
}"
>
<Button v-if="user.data?.is_moderator" variant="solid">
<template #prefix>
<Plus class="h-4 w-4" />
</template>
{{ __('New Course') }}
</Button>
</router-link>
</div>
</header>
<div class="">
<div
v-if="courses.data.length == 0 && courses.list.loading"
class="p-5 text-base text-gray-700"
>
<Breadcrumbs
class="h-7"
:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
/>
<div class="flex">
<router-link
:to="{
name: 'CreateCourse',
params: {
courseName: 'new',
},
}"
{{ __('Loading Courses...') }}
</div>
<Tabs
v-else
v-model="tabIndex"
tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
:tabs="tabs"
>
<template #tab="{ tab, selected }">
<div>
<button
class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
:class="{ 'text-gray-900': selected }"
>
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
{{ __(tab.label) }}
<Badge theme="gray">
{{ tab.count }}
</Badge>
</button>
</div>
</template>
<template #default="{ tab }">
<div
v-if="tab.courses && tab.courses.value.length"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-5 mx-5"
>
<Button v-if="user.data?.is_moderator" variant="solid">
<template #prefix>
<Plus class="h-4 w-4" />
</template>
{{ __('New Course') }}
</Button>
</router-link>
</div>
</header>
<div class="">
<div
v-if="courses.data.length == 0 && courses.list.loading"
class="p-5 text-base text-gray-700"
>
{{ __('Loading Courses...') }}
</div>
<Tabs
v-else
v-model="tabIndex"
:tabs="tabs"
tablistClass="overflow-x-visible"
>
<template #tab="{ tab, selected }">
<div>
<button
class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
:class="{ 'text-gray-900': selected }"
>
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
{{ __(tab.label) }}
<Badge theme="gray">
{{ tab.count }}
</Badge>
</button>
</div>
</template>
<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"
<router-link
v-for="course in tab.courses.value"
:to="
course.membership && course.current_lesson
? {
name: 'Lesson',
params: {
courseName: course.name,
chapterNumber: course.current_lesson.split('.')[0],
lessonNumber: course.current_lesson.split('.')[1],
},
}
: course.membership
? {
name: 'Lesson',
params: {
courseName: course.name,
chapterNumber: 1,
lessonNumber: 1,
},
}
: {
name: 'CourseDetail',
params: { courseName: course.name },
}
"
>
<router-link
v-for="course in tab.courses.value"
:to="
course.membership && course.current_lesson
? {
name: 'Lesson',
params: {
courseName: course.name,
chapterNumber: course.current_lesson.split('.')[0],
lessonNumber: course.current_lesson.split('.')[1],
},
}
: course.membership
? {
name: 'Lesson',
params: {
courseName: course.name,
chapterNumber: 1,
lessonNumber: 1,
},
}
: {
name: 'CourseDetail',
params: { courseName: course.name },
}
"
>
<CourseCard :course="course" />
</router-link>
</div>
<div
v-else
class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
>
<div class="flex flex-col items-center justify-center mt-4">
<div>
{{
__('No {0} courses found').format(tab.label.toLowerCase())
}}
</div>
<CourseCard :course="course" />
</router-link>
</div>
<div
v-else
class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
>
<div class="flex flex-col items-center justify-center mt-4">
<div>
{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}
</div>
</div>
</template>
</Tabs>
</div>
</div>
</template>
</Tabs>
</div>
</div>
</template>

4
frontend/src/pages/CreateCourse.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="h-screen text-base">
<div class="grid grid-cols-[70%,30%] h-full">
<div class="">
<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"

4
frontend/src/pages/CreateLesson.vue
View File

@@ -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;
}

2
frontend/src/pages/JobCreation.vue
View File

@@ -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"
>

2
frontend/src/pages/JobDetail.vue
View File

@@ -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"
>

4
frontend/src/pages/Jobs.vue
View File

@@ -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="{

17
frontend/src/pages/Lesson.vue
View File

@@ -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 v-if="lesson.data.no_preview" class="border-r-1 text-center pt-10">
<div class="grid md:grid-cols-[70%,30%] h-full">
<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 class="flex items-center justify-between">
<div v-else class="border-r-2 container pt-5 pb-10 px-5">
<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;

6
frontend/src/pages/Statistics.vue
View File

@@ -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"