VBV-232: WIP: Style bottom navigation, add progress

client/src/components/learningPath/LearningContent.vue

@@ -55,7 +55,7 @@ const component = computed(() => {
     v-if="block"
     :title="learningContent.title"
     :next-button-text="$t('learningContent.completeAndContinue')"
-    :exit-text="$t('general.backToCircle')"
+    :learning-content-block="learningContent.contents[0]"
     @exit="circleStore.closeLearningContent(props.learningContent)"
     @next="circleStore.continueFromLearningContent(props.learningContent)"
   >

client/src/components/learningPath/LearningContentContainer.vue

@@ -1,61 +1,70 @@
 <script setup lang="ts">
+import LearningContentBadge from "@/components/learningPath/LearningContentTypeBadge.vue";
+import type { LearningContentBlock } from "@/types";
 import * as log from "loglevel";
 
 log.debug("LeariningContentContainer.vue setup");
 
-defineProps<{
+interface Props {
   title: string;
   nextButtonText: string;
-  showBackButton?: boolean;
-}>();
+  learningContentBlock: LearningContentBlock | null;
+  showBorder: boolean;
+}
 
-defineEmits(["back", "next", "exit"]);
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  nextButtonText: "",
+  learningContentBlock: null,
+  showBorder: true,
+});
+
+defineEmits(["next", "exit"]);
 </script>
 
 <template>
   <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"
-      >
-        <button
-          type="button"
-          class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
-          data-cy="close-learning-content"
-          @click="$emit('exit')"
+    <div class="h-full"></div>
+    <!-- just here to not make the footer jump during the transition -->
+    <div class="absolute w-full top-0 bottom-0 bg-white">
+      <div class="h-content overflow-y-scroll">
+        <header
+          class="px-4 lg:px-8 py-4 flex justify-between items-center bg-white absolute w-full h-12"
         >
-          <it-icon-close></it-icon-close>
-        </button>
-      </header>
+          <button
+            type="button"
+            class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
+            data-cy="close-learning-content"
+            @click="$emit('exit')"
+          >
+            <it-icon-close></it-icon-close>
+          </button>
+        </header>
         <slot></slot>
       </div>
-      <nav class="nav border-t flex justify-between px-4 items-center">
-        <div>
-          <h1 class="text-large hidden lg:block" data-cy="ln-title">
+      <nav
+        class="nav flex justify-between px-4 items-center bg-white"
+        :class="{ 'border-t': showBorder }"
+      >
+        <div class="flex justify-between">
+          <LearningContentBadge
+            v-if="learningContentBlock"
+            :learning-content-type="learningContentBlock.type"
+            class="mr-2"
+          />
+          <h1 class="text-base font-normal hidden lg:inline-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>
+        <button
+          type="button"
+          class="btn-blue flex items-center"
+          data-cy="complete-and-continue"
+          @click="$emit('next')"
+        >
+          {{ nextButtonText }}
+          <it-icon-check class="ml-2"></it-icon-check>
+        </button>
       </nav>
     </div>
   </div>

client/src/components/learningPath/LearningSequence.vue

@@ -189,21 +189,21 @@ const learningSequenceBorderClass = computed(() => {
             class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-success"
           >
             <it-icon-smiley-happy class="w-8 h-8 flex-none" data-cy="success" />
-            <div>Selbsteinschätzung: Ich kann das.</div>
+            <div>{{ $t("selfEvaluation.selfEvaluationYes") }}</div>
           </div>
           <div
             v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === 'fail'"
             class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-fail"
           >
             <it-icon-smiley-thinking class="w-8 h-8 flex-none" data-cy="fail" />
-            <div>Selbsteinschätzung: Muss ich nochmals anschauen</div>
+            <div>{{ $t("selfEvaluation.selfEvaluationNo") }}</div>
           </div>
           <div
             v-else
             class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-unknown"
           >
             <it-icon-smiley-neutral class="w-8 h-8 flex-none" data-cy="unknown" />
-            <div>Selbsteinschätzung</div>
+            <div>{{ $t("selfEvaluation.selfEvaluation") }}</div>
           </div>
         </div>
 

client/src/components/learningPath/SelfEvaluation.vue

@@ -46,37 +46,20 @@ function handleBack() {
   <div v-if="learningUnit">
     <LearningContentContainer
       :title="$t('selfEvaluation.title', { title: learningUnit.title })"
-      :exit-text="$t('general.backToCircle')"
-      :next-button-text="$t('general.next')"
-      :show-back-button="showBackButton"
+      :next-button-text="$t('learningContent.completeAndContinue')"
+      :show-border="false"
       @exit="circleStore.closeSelfEvaluation(props.learningUnit)"
-      @next="handleContinue()"
-      @back="handleBack()"
+      @next="circleStore.closeSelfEvaluation(props.learningUnit)"
     >
-      <div class="container-medium">
-        <div class="mt-2 lg:mt-8 text-gray-700">
-          {{
-            $t("selfEvaluation.steps", {
-              current: state.questionIndex + 1,
-              max: questions.length,
-            })
-          }}
-        </div>
-
-        <p class="text-large mt-4">
-          {{ $t("selfEvaluation.instruction[0]") }}
-          <span class="font-bold">«{{ learningUnit.title }}»</span>
-          {{ $t("selfEvaluation.instruction[1]") }}
-          <br />
-          {{ $t("selfEvaluation.instruction[2]") }}
-        </p>
-
-        <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
+      <div class="container-medium h-full">
+        <div class="mt-6 lg:mt-40">
           <h2 class="heading-2">
             {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
           </h2>
 
-          <div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
+          <div
+            class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-8 lg:gap-12"
+          >
             <button
               class="flex-1 inline-flex items-center text-left p-4 border"
               :class="{
@@ -109,6 +92,36 @@ function handleBack() {
             {{ $t("selfEvaluation.progressLink") }}
           </div>
         </div>
+        <nav class="mt-16 flex justify-between">
+          <button
+            v-if="showBackButton"
+            class="btn-secondary flex items-center"
+            @click="handleBack()"
+          >
+            <it-icon-arrow-left class="w-6 h-6 ml-2"></it-icon-arrow-left>
+            {{ $t("general.backCapitalized") }}
+          </button>
+          <button class="btn-secondary flex items-center" @click="handleContinue()">
+            {{ $t("general.next") }}
+            <it-icon-arrow-right class="w-6 h-6 ml-2"></it-icon-arrow-right>
+          </button>
+        </nav>
+        <div
+          role="progressbar"
+          :aria-valuenow="state.questionIndex + 1"
+          :aria-valuemax="questions.length"
+          :aria-valuemin="1"
+          class="absolute bottom-[86px] h-1 left-4 right-4 inline-flex gap-1"
+        >
+          <span
+            v-for="i in questions.length"
+            class="w-full"
+            :class="{
+              'bg-sky-500': i <= state.questionIndex + 1,
+              'bg-gray-400': i > state.questionIndex + 1,
+            }"
+          ></span>
+        </div>
       </div>
     </LearningContentContainer>
   </div>

client/src/locales/de.json

@@ -62,7 +62,8 @@
     "completeAndContinue": "Abschliessen und weiter"
   },
   "selfEvaluation": {
-    "title": "Selbsteinschätzung {title}",
+    "selfEvaluation": "Selbsteinschätzung",
+    "title": "@:selfEvaluation.selfEvaluation {title}",
     "steps": "Schritt {current} von {max}",
     "instruction": [
       "Überprüfe, ob du in der Lernheinheit",
@@ -72,7 +73,9 @@
     "yes": "Ja, ich kann das",
     "no": "Das muss ich nochmals anschauen",
     "progressText": "Schau dein Fortschritt in deinem KompetenzNavi:",
-    "progressLink": "KompetenzNavi öffnen"
+    "progressLink": "KompetenzNavi öffnen",
+    "selfEvaluationYes": "@:selfEvaluation: Ich kann das.",
+    "selfEvaluationNo": "@:selfEvaluation: Muss ich nochmals anschauen."
   },
   "competences": {
     "competences": "Kompetenzen",

client/src/pages/competence/SinglePerformanceCriteriaPage.vue

@@ -58,7 +58,6 @@ findCriteria();
   <div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white">
     <LearningContentContainer
       :title="''"
-      :exit-text="$t('general.back')"
       :next-button-text="$t('general.save')"
       @exit="router.back()"
       @next="router.back()"