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

Add transition

This commit is contained in:
Daniel Egger 2022-06-20 18:22:39 +02:00
parent fef31bf189
commit 3dfb9af7c9
1 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,58 +26,74 @@ onMounted(() => {
</script>
<template>
<div v-if="state.showOverview">
<CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
</div>
<div v-else>
<MainNavigationBar/>
<Transition>
<div v-if="state.showOverview">
<CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
</div>
<div v-else>
<MainNavigationBar/>
<div class="circle">
<div class="flex flex-col lg:flex-row">
<div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
<h1 class="text-blue-dark text-7xl">
{{ circleStore.circleData.title }}
</h1>
<div class="circle">
<div class="flex flex-col lg:flex-row">
<div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
<h1 class="text-blue-dark text-7xl">
{{ circleStore.circleData.title }}
</h1>
<div class="mt-8">
<img src="@/assets/circle-analyse.svg" alt="">
</div>
<div class="outcome border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
<div class="prose mt-4">
{{ circleStore.circleData.description }}
<div class="mt-8">
<img src="@/assets/circle-analyse.svg" alt="">
</div>
<button class="btn-primary mt-4" @click="state.showOverview = true">Erfahre mehr dazu</button>
<div class="outcome border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
<div class="prose mt-4">
{{ circleStore.circleData.description }}
</div>
<button class="btn-primary mt-4" @click="state.showOverview = true">Erfahre mehr dazu</button>
</div>
<div class="expert border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Hast du Fragen?</h3>
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
<button class="btn-secondary mt-4">
Fachexpertin kontaktieren
</button>
</div>
</div>
<div class="expert border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Hast du Fragen?</h3>
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
<button class="btn-secondary mt-4">
Fachexpertin kontaktieren
</button>
<div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
<div
v-for="learningSequence in circleStore.circleData.learningSequences"
:key="learningSequence.translation_key"
>
<LearningSequence
:learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
:completion-data="circleStore.completionData"
></LearningSequence>
</div>
</div>
</div>
<div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
<div
v-for="learningSequence in circleStore.circleData.learningSequences"
:key="learningSequence.translation_key"
>
<LearningSequence
:learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
:completion-data="circleStore.completionData"
></LearningSequence>
</div>
</div>
</div>
</div>
</div>
</Transition>
</template>
<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 0.3s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-active {
transition-delay: 0.3s;
}
</style>