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

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

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

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

@ -25,11 +25,14 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div>
<Transition mode="out-in"> <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>