danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination / category / sort

Browse Source
This commit is contained in:
HAM!DREZA
2024-06-01 23:02:18 +03:30
parent 2242ed022f
commit 69ad899b35
11 changed files with 520 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/courses-page/Courses-list.vue
-97
View File
@@ -1,97 +0,0 @@
<template>
<div
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
>
<div
class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
>
<span
class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
>
<svg
class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 7.5H21"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
/>
<path
d="M6 12.5H18"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
/>
<path
d="M10 17.5H14"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
<span class="hidden md:block"> مرتب سازی بر اساس: </span>
<span
class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
@click="openSortOptions"
>مرتب سازی</span
>
</span>
<ul class="gap-x-[1vw] items-center hidden md:flex">
<li class="relative pb-[0.681vw] text-primaryGreen active">
همه دوره ها
</li>
<li class="pb-[0.681vw]">دوره های رایگان</li>
<li class="pb-[0.681vw]">ارزان ترین</li>
<li class="pb-[0.681vw]">گران ترین</li>
</ul>
</div>
<div class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
>
<div v-for="(course, index) in data.data.courses"
:key="index">
<Card :course="course" />
</div>
</div>
</div>
</template>
<script setup>
// const pages = 17 / 16
// console.log(Math.ceil(pages));
//const data = await useFetch("/api/course");
const data = defineProps(['data']);
const openSortOptions = () => {
if (process.client) {
document
.getElementById("filters")
.classList.remove("translate-y-[80.769vw]");
document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
document.getElementById("brightnessFilter").style.filter =
"brightness(50%)";
document.getElementById("brightnessFilter").style.backdropFilter =
"brightness(90%)";
}
};
const loading = ref(false);
onMounted(() => {
setTimeout(() => {
loading.value = true;
}, 2000);
});
</script>
<style>
.active::before {
content: "";
position: absolute;
background-color: #0d3f40;
width: 100%;
height: 0.01vw;
top: 2vw;
}
</style>
components/courses-page/Pagination.vue
-51
View File
@@ -1,51 +0,0 @@
<template>
<div class="flexBox py-[5vw] md:py-[2vw]">
<ul class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]">
<li>
<svg
class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
stroke="#292D32"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</li>
<li>53</li>
<li>...</li>
<li>3</li>
<li>2</li>
<li class="flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">1</li>
<li>
<svg
class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
stroke="#292D32"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</li>
</ul>
</div>
</template>
components/home-page/Suggested-courses.vue
+81 -4
View File
@@ -3,9 +3,86 @@
<div
class="courses"
>
<home-page-courses-sectionCategories />
<home-page-courses-sectionSuggestedCourses />
<home-page-courses-sectionWatchCoursesButton />
<div class="category">
<h3
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
>
انتخاب گسترده ای از دوره ها
</h3>
<p
class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
>
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
ماه منتشر می شود
</p>
</div>
<!-- <home-page-courses-sectionCategories /> -->
<div
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
>
<h5
class="border-b pb-[1.5vw] text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
>
دوره های پیشنهادی
</h5>
<div
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
>
<div v-for="(course, index) in data.courses"
:key="index">
<Card :course="course" />
</div>
</div>
</div>
<div
class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
>
<nuxt-link to="/courses"
class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
>
<svg
class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
viewBox="0 0 22 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.917 10.5833L19.4337 3.06665"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20.1666 6.73325V2.33325H15.7666"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
</nuxt-link>
</div>
</div>
</div>
</template>
</template>
<script setup>
const {data} = await useFetch("/api/course");
// const selectedItems = data.data.value.courses.slice(0, 8);
</script>
components/home-page/courses-section/Categories.vue
-147
View File
@@ -1,147 +0,0 @@
<template>
<div class="category">
<h3
v-if="$route.path === '/'"
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
>
انتخاب گسترده ای از دوره ها
</h3>
<div
class="flex flex-col md:flex-row items-start justify-between md:items-center"
v-else
>
<h3
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
>
حرفه آینده را کشف کنید
</h3>
<span
class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
>
{{data?.count}}
ویدیو آموزشی</span
>
</div>
<p
class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
>
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
ماه منتشر می شود
</p>
<div
v-show="$route.path === '/courses'"
class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
>
<svg
class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M25.6668 25.6667L23.3335 23.3333"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<input
class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
type="text"
placeholder="نام آموزش ، دوره و ... را وارد کنید"
/>
</div>
<div class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]">
<svg
@click="this.$refs.carousel.next()"
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="fill-[#878787] hover:fill-[#383E43]"
d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
/>
</svg>
<Carousel
:items-to-show="8.3"
ref="carousel"
:breakpoints="breakpoints"
:wrapAround="true"
class="w-full md:w-[95%]"
>
<Slide v-for="slide in categories" :key="slide" @click="selectCategory(slide.id)">
<div class="categoriesOption"
>{{ slide.name }}</div>
</Slide>
</Carousel>
<svg
@click="this.$refs.carousel.prev()"
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
class="fill-[#878787] hover:fill-[#383E43]"
/>
</svg>
</div>
</div>
<div v-if="pending" class="grid grid-cols-4 gap-[2vw] mt-[2vw]">
<Loading />
<Loading />
<Loading />
<Loading />
</div>
<courses-pageCourses-list :data="data"/>
</template>
<script setup>
const changeCategory = ref('')
const {data, refresh, pending} = await useFetch(() => "/api/course", {
method: "POST",
body: {
changeCategory
}
});
const categoryLis = await useFetch("/api/category");
// console.log('daste bandy', categoryLis.data.value);
const categories = categoryLis.data.value;
function selectCategory (id){
changeCategory.value = '/category/' + id
refresh()
}
const breakpoints = {
// 700px and up
300: {
itemsToShow: 3.5,
snapAlign: "end",
},
700: {
itemsToShow: 8.6,
snapAlign: "end",
},
// 1024 and up
1024: {
itemsToShow: 8.6,
snapAlign: "end",
},
};
</script>
<style scoped>
</style>
components/home-page/courses-section/SuggestedCourses.vue
-24
View File
@@ -1,24 +0,0 @@
<template>
<div
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
>
<h5
class="text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
>
دوره های پیشنهادی
</h5>
<div
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
>
<div v-for="(course, index) in selectedItems"
:key="index">
<Card :course="course" />
</div>
</div>
</div>
</template>
<script setup>
const data = await useFetch("/api/course");
const selectedItems = data.data.value.courses.slice(0, 8);
</script>
components/home-page/courses-section/WatchCoursesButton.vue
-39
View File
@@ -1,39 +0,0 @@
<template>
<div
class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
>
<nuxt-link to="/courses"
class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
>
<svg
class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
viewBox="0 0 22 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.917 10.5833L19.4337 3.06665"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20.1666 6.73325V2.33325H15.7666"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
</nuxt-link>
</div>
</template>