ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix modal

This commit is contained in:
Christian Cueni 2022-07-27 09:48:13 +02:00
parent 9f263ec657
commit a9ab3ef2fc
2 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/components/circle/CircleOverview.vue
View File

@ -5,48 +5,52 @@ const props = defineProps<{
circle: Circle circle: Circle
}>() }>()
const emits = defineEmits(['closemodal'])
</script> </script>
<template> <template>
<div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 relative"> <Teleport to="body">
<div <div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full">
class="w-8 h-8 absolute right-4 top-4 cursor-pointer" <div
@click="$emit('close')" class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
> @click="$emit('closemodal')"
<it-icon-close></it-icon-close> >
</div> <it-icon-close></it-icon-close>
</div>
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1> <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p> <p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
<div class="mt-8 p-4 border border-gray-500"> <div class="mt-8 p-4 border border-gray-500">
<h3>Du wirst in der Lage sein, ... </h3> <h3>Du wirst in der Lage sein, ... </h3>
<ul class="mt-4"> <ul class="mt-4">
<li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id"> <li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check> <it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
<div class="mt-4">{{ goal.value }}</div> <div class="mt-4">{{ goal.value }}</div>
</li>
</ul>
</div>
<h3 class="mt-16">
Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
</h3>
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
<li
v-for="jobSituation in circle.job_situations"
:key="jobSituation.id"
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
>
{{jobSituation.value}}
</li> </li>
</ul> </ul>
</div> </div>
</Teleport>
<h3 class="mt-16">
Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
</h3>
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
<li
v-for="jobSituation in circle.job_situations"
:key="jobSituation.id"
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
>
{{jobSituation.value}}
</li>
</ul>
</div>
</template> </template>
<style scoped> <style scoped>

10
client/src/views/CircleView.vue
View File

@ -25,11 +25,14 @@ onMounted(async () => {
</script> </script>
<template> <template>
<Transition mode="out-in"> <div>
<Transition mode="out-in">
<div v-if="circleStore.page === 'OVERVIEW'"> <div v-if="circleStore.page === 'OVERVIEW'">
<CircleOverview :circle="circleStore.circle" @close="circleStore.page = 'INDEX'"/> <CircleOverview :circle="circleStore.circle" @closemodal="circleStore.page = 'INDEX'"/>
</div> </div>
<div v-else-if="circleStore.page === 'LEARNING_CONTENT'"> </Transition>
<Transition mode="out-in">
<div v-if="circleStore.page === 'LEARNING_CONTENT'">
<LearningContent :key="circleStore.currentLearningContent.translation_key"/> <LearningContent :key="circleStore.currentLearningContent.translation_key"/>
</div> </div>
<div v-else-if="circleStore.page === 'SELF_EVALUATION'"> <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
@ -97,6 +100,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
</Transition> </Transition>
</div>
</template> </template>
<style scoped> <style scoped>