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",
"@rollup/plugin-alias": "^3.1.9",
"@rushstack/eslint-patch": "^1.1.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.4",
"@testing-library/vue": "^6.6.0",
"@types/d3": "^7.4.0",
"@types/jsdom": "^16.2.14",

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

@ -1,52 +1,61 @@
<script setup lang="ts">
// inspiration https://vuejs.org/examples/#modal
import {Circle} from '@/services/circle';
const props = defineProps<{
circle: Circle
circle: Circle,
show: boolean
}>()
const emits = defineEmits(['closemodal'])
</script>
<template>
<div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 relative">
<Transition mode="in-out">
<div
class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
@click="$emit('close')"
>
<it-icon-close></it-icon-close>
</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"
@click="$emit('closemodal')"
>
<it-icon-close></it-icon-close>
</button>
<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">
<h3>Du wirst in der Lage sein, ... </h3>
<div class="mt-8 p-4 border border-gray-500">
<h3>Du wirst in der Lage sein, ... </h3>
<ul class="mt-4">
<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>
<div class="mt-4">{{ goal.value }}</div>
<ul class="mt-4">
<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>
<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>
</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>
</ul>
</div>
</Transition>
</template>
<style scoped>

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

@ -82,5 +82,14 @@ const block = computed(() => {
</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>

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

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