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

View File

@ -5,13 +5,16 @@ const props = defineProps<{
circle: Circle
}>()
const emits = defineEmits(['closemodal'])
</script>
<template>
<div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 relative">
<Teleport to="body">
<div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full">
<div
class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
@click="$emit('close')"
@click="$emit('closemodal')"
>
<it-icon-close></it-icon-close>
</div>
@ -47,6 +50,7 @@ const props = defineProps<{
</ul>
</div>
</Teleport>
</template>
<style scoped>

View File

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