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

Merged in feature/fix-overlay-postion-vbv-96 (pull request #4) 

Feature/fix overlay postion vbv 96
This commit is contained in:
Christian Cueni 2022-08-04 13:30:23 +00:00
parent d91293338d d45530c2dd
commit 7970cf6174
4 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

@ -26,6 +26,8 @@
"@intlify/vite-plugin-vue-i18n": "^3.4.0", "@intlify/vite-plugin-vue-i18n": "^3.4.0",
"@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-alias": "^3.1.9",
"@rushstack/eslint-patch": "^1.1.0", "@rushstack/eslint-patch": "^1.1.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.4",
"@testing-library/vue": "^6.6.0", "@testing-library/vue": "^6.6.0",
"@types/d3": "^7.4.0", "@types/d3": "^7.4.0",
"@types/jsdom": "^16.2.14", "@types/jsdom": "^16.2.14",

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

@ -1,20 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
// inspiration https://vuejs.org/examples/#modal
import {Circle} from '@/services/circle'; import {Circle} from '@/services/circle';
const props = defineProps<{ const props = defineProps<{
circle: Circle circle: Circle,
show: boolean
}>() }>()
const emits = defineEmits(['closemodal'])
</script> </script>
<template> <template>
<div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 relative"> <Transition mode="in-out">
<div <div
v-if="show"
class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
<button
type="button"
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> </button>
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1> <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
@ -47,6 +55,7 @@ const props = defineProps<{
</ul> </ul>
</div> </div>
</Transition>
</template> </template>
<style scoped> <style scoped>

11
client/src/components/circle/LearningContent.vue
View File

@ -82,5 +82,14 @@ const block = computed(() => {
</template> </template>
<style scoped> <style lang="scss" scoped>
$header-height: 77px;
$footer-height: 57px;
$content-height: $header-height + $footer-height;
.h-screen {
height: calc(100vh - $content-height);
}
</style> </style>

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

@ -25,11 +25,16 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div>
<Teleport to="body">
<CircleOverview
:circle="circleStore.circle"
:show="circleStore.page === 'OVERVIEW'"
@closemodal="circleStore.page = 'INDEX'"
/>
</Teleport>
<Transition mode="out-in"> <Transition mode="out-in">
<div v-if="circleStore.page === 'OVERVIEW'"> <div v-if="circleStore.page === 'LEARNING_CONTENT'">
<CircleOverview :circle="circleStore.circle" @close="circleStore.page = 'INDEX'"/>
</div>
<div v-else-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 +102,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
</Transition> </Transition>
</div>
</template> </template>
<style scoped> <style scoped>