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

2
frontend/src/components/Annoucements.vue
View File

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

5
frontend/src/components/AppSidebar.vue
View File

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

2
frontend/src/components/BatchCard.vue
View File

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

6
frontend/src/components/CourseCard.vue
View File

@@ -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">
<Badge theme="gray" size="lg" class="mr-2" v-for="tag in course.tags">
<div class="flex relative top-4 left-4 w-fit flex-wrap">
<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%;

2
frontend/src/components/CourseOutline.vue
View File

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

28
frontend/src/components/DesktopLayout.vue
View File

@@ -1,17 +1,19 @@
<template>
<div class="relative flex h-full flex-col">
<div class="h-full flex-1">
<div class="flex h-full">
<div class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto">
<slot name="sidebar" />
<AppSidebar />
</div>
<div class="w-full overflow-auto" id="scrollContainer">
<slot />
</div>
</div>
</div>
</div>
<div class="relative flex h-full flex-col">
<div class="h-full flex-1">
<div class="flex h-screen text-base">
<div
class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
>
<slot name="sidebar" />
<AppSidebar />
</div>
<div class="w-full overflow-auto" id="scrollContainer">
<slot />
</div>
</div>
</div>
</div>
</template>
<script setup>
import AppSidebar from './AppSidebar.vue'

2
frontend/src/components/JobCard.vue
View File

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

41
frontend/src/components/MobileLayout.vue
View File

@@ -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"
:style="{ gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))` }"
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 - 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) => {
console.log(tab);
return router.currentRoute.value.name === tab.to
}) */
let isActive = (tab) => {
return tab.activeFor?.includes(router.currentRoute.value.name)
}
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>

31
frontend/src/components/SidebarLink.vue
View File

@@ -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: {
type: Function,
},
label: {
type: String,
default: '',
},
to: {
type: String,
default: '',
},
activeFor: {
type: Array,
default: [],
link: {
type: Object,
required: true,
},
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>

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"