From 9a7b858cf362406a7b13a6655c90906ab37bb781 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 26 Jul 2022 15:53:14 +0200
Subject: [PATCH 1/6] Add missing packages to client

---
 client/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/package.json b/client/package.json
index eea590d3..433ab715 100644
--- a/client/package.json
+++ b/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",

From 9f263ec657f737a799bfc493a31d2ed130d68f20 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 26 Jul 2022 15:53:33 +0200
Subject: [PATCH 2/6] Fix iframe height for WBT

---
 client/src/components/circle/LearningContent.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/components/circle/LearningContent.vue b/client/src/components/circle/LearningContent.vue
index 3df552b7..d0bce5e5 100644
--- a/client/src/components/circle/LearningContent.vue
+++ b/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>

From a9ab3ef2fc65708bc7c1a6828cc9853fe202b26f Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 27 Jul 2022 09:48:13 +0200
Subject: [PATCH 3/6] Fix modal

---
 .../src/components/circle/CircleOverview.vue  | 66 ++++++++++---------
 client/src/views/CircleView.vue               | 10 ++-
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/client/src/components/circle/CircleOverview.vue b/client/src/components/circle/CircleOverview.vue
index 29bf5ec5..df496d6b 100644
--- a/client/src/components/circle/CircleOverview.vue
+++ b/client/src/components/circle/CircleOverview.vue
@@ -5,48 +5,52 @@ const props = defineProps<{
   circle: Circle
 }>()
 
+const emits = defineEmits(['closemodal'])
+
 </script>
 
 <template>
-  <div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 relative">
-    <div
-      class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
-      @click="$emit('close')"
-    >
-      <it-icon-close></it-icon-close>
-    </div>
+  <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
+        class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
+        @click="$emit('closemodal')"
+      >
+        <it-icon-close></it-icon-close>
+      </div>
 
 
-    <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>
+  </Teleport>
 </template>
 
 <style scoped>
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index b5fbb561..8c893a3b 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -25,11 +25,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Transition mode="out-in">
+  <div>
+    <Transition mode="out-in">
     <div v-if="circleStore.page === 'OVERVIEW'">
-      <CircleOverview :circle="circleStore.circle" @close="circleStore.page = 'INDEX'"/>
+      <CircleOverview :circle="circleStore.circle" @closemodal="circleStore.page = 'INDEX'"/>
     </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"/>
     </div>
     <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
@@ -97,6 +100,7 @@ onMounted(async () => {
       </div>
     </div>
   </Transition>
+  </div>
 </template>
 
 <style scoped>

From 53f01701ad77b61998e73176faa7a076dbb37d3d Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 27 Jul 2022 09:58:27 +0200
Subject: [PATCH 4/6] Add animation

---
 client/src/components/circle/CircleOverview.vue | 12 ++++++++----
 client/src/views/CircleView.vue                 | 12 +++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/components/circle/CircleOverview.vue b/client/src/components/circle/CircleOverview.vue
index df496d6b..ac346d12 100644
--- a/client/src/components/circle/CircleOverview.vue
+++ b/client/src/components/circle/CircleOverview.vue
@@ -1,8 +1,10 @@
 <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'])
@@ -10,8 +12,10 @@ const emits = defineEmits(['closemodal'])
 </script>
 
 <template>
-  <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">
+  <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">
       <div
         class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
         @click="$emit('closemodal')"
@@ -50,7 +54,7 @@ const emits = defineEmits(['closemodal'])
       </ul>
 
     </div>
-  </Teleport>
+  </Transition>
 </template>
 
 <style scoped>
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 8c893a3b..77498f2c 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -26,11 +26,13 @@ onMounted(async () => {
 
 <template>
   <div>
-    <Transition mode="out-in">
-    <div v-if="circleStore.page === 'OVERVIEW'">
-      <CircleOverview :circle="circleStore.circle" @closemodal="circleStore.page = 'INDEX'"/>
-    </div>
-    </Transition>
+    <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 === 'LEARNING_CONTENT'">
       <LearningContent :key="circleStore.currentLearningContent.translation_key"/>

From d93090f43bcf94a3e74e1ac824c690324bdb49fb Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 28 Jul 2022 08:14:24 +0200
Subject: [PATCH 5/6] Make div a button

---
 client/src/components/circle/CircleOverview.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/circle/CircleOverview.vue b/client/src/components/circle/CircleOverview.vue
index ac346d12..9f6e3617 100644
--- a/client/src/components/circle/CircleOverview.vue
+++ b/client/src/components/circle/CircleOverview.vue
@@ -16,12 +16,13 @@ const emits = defineEmits(['closemodal'])
     <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">
-      <div
+      <button
+        type="button"
         class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
         @click="$emit('closemodal')"
       >
         <it-icon-close></it-icon-close>
-      </div>
+      </button>
 
 
       <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>

From d45530c2ddca7b43b263d0bad2e0b3825eb88115 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 2 Aug 2022 07:00:33 +0200
Subject: [PATCH 6/6] Fix width on big screens

---
 client/src/components/circle/CircleOverview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/circle/CircleOverview.vue b/client/src/components/circle/CircleOverview.vue
index 9f6e3617..875bc62f 100644
--- a/client/src/components/circle/CircleOverview.vue
+++ b/client/src/components/circle/CircleOverview.vue
@@ -15,7 +15,7 @@ const emits = defineEmits(['closemodal'])
   <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">
+      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"