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

Feature/fix overlay postion vbv 96

client/package.json

@@ -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",

client/src/components/circle/CircleOverview.vue

@@ -1,20 +1,28 @@
 <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
+      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('close')"
+        @click="$emit('closemodal')"
       >
         <it-icon-close></it-icon-close>
-    </div>
+      </button>
 
 
       <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
@@ -47,6 +55,7 @@ const props = defineProps<{
       </ul>
 
     </div>
+  </Transition>
 </template>
 
 <style scoped>

client/src/components/circle/LearningContent.vue

@@ -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>

client/src/views/CircleView.vue

@@ -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>