From 38b7454fd11316f67d561b4bdd59889e2d833577 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 12 Jan 2023 09:25:53 +0100
Subject: [PATCH] VBV-232: WIP - Rearrange learning content navigation

---
 .../learningPath/LearningContentContainer.vue | 80 +++++++++++--------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/client/src/components/learningPath/LearningContentContainer.vue b/client/src/components/learningPath/LearningContentContainer.vue
index 4e95f1ee..17586019 100644
--- a/client/src/components/learningPath/LearningContentContainer.vue
+++ b/client/src/components/learningPath/LearningContentContainer.vue
@@ -4,7 +4,6 @@ import * as log from "loglevel";
 log.debug("LeariningContentContainer.vue setup");
 
 defineProps<{
-  exitText: string;
   title: string;
   nextButtonText: string;
   showBackButton?: boolean;
@@ -14,51 +13,62 @@ defineEmits(["back", "next", "exit"]);
 </script>
 
 <template>
-  <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"
-        data-cy="close-learning-content"
-        @click="$emit('exit')"
+  <div>
+    <div class="h-full"></div> <!-- just here to not make the footer jump during the transition -->
+    <div class="overflow-y-scroll absolute w-full top-0 bottom-0 bg-white">
+      <div class="h-content">
+      <header
+        class="px-4 lg:px-8 py-4 flex justify-between items-center bg-white absolute w-full"
       >
-        <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
-        <span class="hidden lg:inline">{{ exitText }}</span>
-      </button>
-
-      <h1 class="text-large hidden lg:block" data-cy="ln-title">
-        {{ title }}
-      </h1>
-      <div>
-        <button
-          v-if="showBackButton"
-          type="button"
-          class="btn-secondary mr-4"
-          data-cy="cancel-and-back"
-          @click="$emit('back')"
-        >
-          {{ $t("general.backCapitalized") }}
-        </button>
         <button
           type="button"
-          class="btn-blue"
-          data-cy="complete-and-continue"
-          @click="$emit('next')"
+          class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
+          data-cy="close-learning-content"
+          @click="$emit('exit')"
         >
-          {{ nextButtonText }}
+          <it-icon-close></it-icon-close>
         </button>
+      </header>
+        <slot></slot>
       </div>
-    </nav>
-    <slot></slot>
+      <nav class="nav border-t flex justify-between px-4 items-center">
+        <div>
+          <h1 class="text-large hidden lg:block" data-cy="ln-title">
+            {{ title }}
+          </h1>
+        </div>
+        <div>
+          <button
+            v-if="showBackButton"
+            type="button"
+            class="btn-secondary mr-4"
+            data-cy="cancel-and-back"
+            @click="$emit('back')"
+          >
+            {{ $t("general.backCapitalized") }}
+          </button>
+          <button
+            type="button"
+            class="btn-blue"
+            data-cy="complete-and-continue"
+            @click="$emit('next')"
+          >
+            {{ nextButtonText }}
+          </button>
+        </div>
+      </nav>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-$footer-height: 57px;
+$nav-height: 86px;
 
 .h-content {
-  height: calc(100vh - $footer-height);
+  height: calc(100vh - $nav-height);
+}
+
+.nav {
+  height: $nav-height;
 }
 </style>