From 87a89e564cf43a221b8d729ac71066bfd6eab6e1 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 10 Nov 2022 09:35:58 +0100
Subject: [PATCH] Fix learning content header

---
 .../learningPath/LearningContent.vue          | 101 +++++++++---------
 .../learningPath/LearningContentContainer.vue |  14 ++-
 2 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/client/src/components/learningPath/LearningContent.vue b/client/src/components/learningPath/LearningContent.vue
index 2224b313..271d2b77 100644
--- a/client/src/components/learningPath/LearningContent.vue
+++ b/client/src/components/learningPath/LearningContent.vue
@@ -34,56 +34,58 @@ const block = computed(() => {
       @exit="circleStore.closeLearningContent(props.learningContent)"
       @next="circleStore.continueFromLearningContent(props.learningContent)"
     >
-      <div
-        v-if="
-          block.type === 'exercise' ||
-          block.type === 'test' ||
-          block.type === 'learningmodule'
-        "
-        class="h-screen"
-      >
-        <iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
-      </div>
-
-      <div v-else class="container-medium">
-        <div v-if="block.type === 'video'">
-          <iframe
-            class="mt-8 w-full aspect-video"
-            :src="block.value.url"
-            :title="learningContent.title"
-            frameborder="0"
-            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-          >
-          </iframe>
-        </div>
-
-        <div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
-          <h1>{{ learningContent.title }}</h1>
-
-          <p class="text-large my-4 lg:my-8">{{ block.value.description }}</p>
-          <router-link
-            :to="`${block.value.url}?back=${route.path}`"
-            class="button btn-primary"
-          >
-            Mediathek öffnen
-          </router-link>
-        </div>
-
+      <div class="content">
         <div
-          v-else-if="block.type === 'resource' || block.type === 'assignment'"
-          class="mt-4 lg:mt-12"
+          v-if="
+            block.type === 'exercise' ||
+            block.type === 'test' ||
+            block.type === 'learningmodule'
+          "
+          class="h-screen"
         >
-          <p class="text-large my-4">{{ block.value.description }}</p>
-          <div class="resource-text" v-html="block.value.text"></div>
+          <iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
         </div>
 
-        <div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
-          <p class="text-large my-4">{{ block.value.description }}</p>
-          <h1>{{ learningContent.title }}</h1>
-        </div>
+        <div v-else class="container-medium">
+          <div v-if="block.type === 'video'">
+            <iframe
+              class="mt-8 w-full aspect-video"
+              :src="block.value.url"
+              :title="learningContent.title"
+              frameborder="0"
+              allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+            >
+            </iframe>
+          </div>
 
-        <div v-else class="text-large my-4">{{ block.value.description }}</div>
+          <div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
+            <h1>{{ learningContent.title }}</h1>
+
+            <p class="text-large my-4 lg:my-8">{{ block.value.description }}</p>
+            <router-link
+              :to="`${block.value.url}?back=${route.path}`"
+              class="button btn-primary"
+            >
+              Mediathek öffnen
+            </router-link>
+          </div>
+
+          <div
+            v-else-if="block.type === 'resource' || block.type === 'assignment'"
+            class="mt-4 lg:mt-12"
+          >
+            <p class="text-large my-4">{{ block.value.description }}</p>
+            <div class="resource-text" v-html="block.value.text"></div>
+          </div>
+
+          <div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
+            <p class="text-large my-4">{{ block.value.description }}</p>
+            <h1>{{ learningContent.title }}</h1>
+          </div>
+
+          <div v-else class="text-large my-4">{{ block.value.description }}</div>
+        </div>
       </div>
     </LearningContentContainer>
   </div>
@@ -91,12 +93,9 @@ const block = computed(() => {
 
 <style lang="scss" scoped>
 $header-height: 77px;
-$footer-height: 57px;
 
-$content-height: $header-height + $footer-height;
-
-.h-screen {
-  height: calc(100vh - $content-height);
+.content {
+  padding-top: $header-height;
 }
 
 .resource-text {
@@ -108,9 +107,7 @@ $content-height: $header-height + $footer-height;
     margin-bottom: 48px;
   }
 }
-</style>
 
-<style lang="scss">
 .resource-text {
   p {
     margin-bottom: 1.5rem;
diff --git a/client/src/components/learningPath/LearningContentContainer.vue b/client/src/components/learningPath/LearningContentContainer.vue
index 50a12f99..69aefdae 100644
--- a/client/src/components/learningPath/LearningContentContainer.vue
+++ b/client/src/components/learningPath/LearningContentContainer.vue
@@ -14,8 +14,10 @@ const emit = defineEmits(["back", "next", "exit"]);
 </script>
 
 <template>
-  <div>
-    <nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
+  <div class="overflow-y-scroll h-content">
+    <nav
+      class="px-4 lg:px-8 py-4 flex justify-between items-center border-b bg-white absolute w-full"
+    >
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2"
@@ -53,4 +55,10 @@ const emit = defineEmits(["back", "next", "exit"]);
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+$footer-height: 57px;
+
+.h-content {
+  height: calc(100vh - $footer-height);
+}
+</style>