VBV-232: WIP - Rearrange learning content navigation

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">
+  <div>
-    <nav
+    <div class="h-full"></div> <!-- just here to not make the footer jump during the transition -->
-      class="px-4 lg:px-8 py-4 flex justify-between items-center border-b bg-white absolute w-full"
+    <div class="overflow-y-scroll absolute w-full top-0 bottom-0 bg-white">
-    >
+      <div class="h-content">
-      <button
+      <header
-        type="button"
+        class="px-4 lg:px-8 py-4 flex justify-between items-center bg-white absolute w-full"
-        class="btn-text inline-flex items-center px-3 py-2"
-        data-cy="close-learning-content"
-        @click="$emit('exit')"
       >
-        <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"
+          class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
-          data-cy="complete-and-continue"
+          data-cy="close-learning-content"
-          @click="$emit('next')"
+          @click="$emit('exit')"
         >
-          {{ nextButtonText }}
+          <it-icon-close></it-icon-close>
         </button>
+      </header>
+        <slot></slot>
       </div>
-    </nav>
+      <nav class="nav border-t flex justify-between px-4 items-center">
-    <slot></slot>
+        <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>