dwd-projects/teenybeanspreschoolcurriculum.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Suvodip Ghosh
2023-02-08 21:06:18 +05:30
parent d8478b86bf
commit 85a03a3f24
41 changed files with 3604 additions and 1432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/Weeklyplan.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<div>
<div class="">
<section class="container-fluid bg3">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
<div class="flex flex-col w-full justify-center">
<h1 class="text-blue-700 hero-text font-bold 2xl:w-10/12">Start Creating Weekly <span class="text-color-1">Lesson Plan</span></h1>
</div>
<div class="flex w-fit h-fit">
<img class="w-fit h-fit" src="/img/lesson-plan1c.png" alt="">
</div>
</div>
</section>
<section>
<nav class="bg-white border-gray-200 py-2.5 rounded dark:bg-gray-900 bg3">
<div class="container flex flex-wrap items-center justify-between mx-auto px-4 xl:px-24">
<div class="w-full md:block md:w-auto" id="navbar-default container mx-auto">
<ul class="flex bg3 flex-col p-4 mt-4 md:gap-20 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li><a href="/lesson-plan/dailyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Daily</p></a></li>
<li><a href="/lesson-plan/weeklyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Weekly</p></a></li>
<li><a href="/lesson-plan/monthlyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Monthly</p></a></li>
</ul>
</div>
</div>
</nav>
</section>
<section class="container mx-auto px-4 xl:px-24">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-16 place-items-center mb-32 gap-16 ">
<div v-for="lessonplan in weeklyplan" :key="lessonplan.id">
<div @click="showLpModal(lessonplan.file)">
<!-- <div class="grid h-80 w-64 border-4 place-items-center">
<router-link to=""><img class="" src="/img/svg/plus.svg" alt="">
<h1 class="text-center">Add New Plan</h1></router-link></div> -->
<div class="grid gap-4"><img class="w-96 h-6/6 cursor-pointer" v-if="lessonplan.lesson_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lessonplan.lesson_icon" alt=""/></div>
</div>
<!-- <div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div>
<div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div> -->
</div>
</div>
</section>
</div>
<!-- Youtube Modal -->
<div @click="hideLpModal" v-if="lpModal" id="lpModal" class="flex justify-center lpModal ">
<div class="modal-content">
<span @click="hideLpModal" class="close text-4xl font-bold cursor-pointer text-gray-200 border-2 rounded-full p-1">X</span>
<div>
<img width="540" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ file" alt=""/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
setup(){
// const route = useRoute();
},
data() {
return {
page: null,
lessonplan: null,
weeklyplan: null,
wsMath: null,
wsWorld: null,
vbfliteracy: null,
isLoading: true,
lpModal:false,
file:''
}
},
methods: {
showLpModal(file){
this.lpModal=true
this.file=file
},
hideLpModal(){
this.lpModal=false
// this.ytID=ytID
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=weekly')
.then(resp => resp.json())
.then(data => {
this.weeklyplan=data.data
// console.log(this.weeklyplan)
})
}
}
</script>
<style scoped>
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}
.font-20px {
font-size: 20px;
}
@media screen and (min-width: 801px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 800px) {
.hero-text {
font-size: 25px;
}
}
@media screen and (min-width: 801px) {
.h1-text {
font-size: 40px;
}
}
@media screen and (max-width: 800px) {
.h1-text {
font-size: 25px;
}
}
.lpModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.text-color-1 {
color: #7C4C23;
}
.menu2 {
color: #212325;
}
</style>