VBV-67: Circle Ansicht Design Anpassungen

client/src/components/circle/LearningSequence.vue

@@ -30,40 +30,51 @@ const allFinished = computed(() => {
   return false;
 })
 
+const learningSequenceBorderClass = computed(() => {
+  let result = [];
+  if (props.learningSequence && circleStore.circle) {
+    if (allFinished.value) {
+      result = ['border-l-4', 'border-l-green-500']
+    } else if (someFinished.value) {
+      result = ['border-l-4', 'border-l-sky-500']
+    } else {
+      result = ['border-l-gray-500']
+    }
+  }
+
+  return result;
+});
+
 </script>
 
 <template>
   <div class="mb-8 learning-sequence" :id="learningSequence.translation_key">
-    <div class="flex items-center gap-4 mb-2">
+    <div class="flex items-center gap-4 mb-2 text-blue-900">
       <component :is="learningSequence.icon" />
-      <h3 class="text-xl">
+      <h3 class="text-xl font-semibold">
         {{ learningSequence.title }}
       </h3>
       <div>{{ learningSequence.minutes }} Minuten</div>
     </div>
 
     <div
-      class="bg-white px-4 border border-gray-500 border-l-4"
+      class="bg-white px-4 lg:px-6 border border-gray-500"
-      :class="{
+      :class="learningSequenceBorderClass"
-        'border-l-green-500': allFinished,
-        'border-l-sky-500': someFinished,
-        'border-l-gray-500': !someFinished,
-      }"
     >
       <div
         v-for="learningUnit in learningSequence.learningUnits"
         :key="learningUnit.id"
-        class="pt-3"
+        class="pt-3 lg:pt-6"
       >
-        <div class="pb-3 flex gap-4" v-if="learningUnit.title">
+        <div class="pb-3 lg:pg-6 flex gap-4 text-blue-900" v-if="learningUnit.title">
-          <div class="font-bold">{{ learningUnit.title }}</div>
+          <div class="font-semibold">{{ learningUnit.title }}</div>
           <div>{{ learningUnit.minutes }} Minuten</div>
         </div>
 
         <div
           v-for="learningContent in learningUnit.learningContents"
           :key="learningContent.id"
-          class="flex items-center gap-4 pb-3"
+          class="flex items-center gap-4 pb-3 lg:pb-6"
         >
           <ItCheckbox
             :modelValue="learningContent.completed"
@@ -81,24 +92,24 @@ const allFinished = computed(() => {
         >
           <div
             v-if="circleStore.calcSelfEvaluationStatus(learningUnit)"
-            class="flex items-center gap-4 pb-3"
+            class="flex items-center gap-4 pb-3 lg:pb-6"
           >
-            <it-icon-smiley-happy/>
+            <it-icon-smiley-happy class="w-8 h-8 flex-none"/>
-            <span>Selbsteinschätzung: Ich kann das.</span>
+            <div>Selbsteinschätzung: Ich kann das.</div>
           </div>
           <div
             v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === false"
-            class="flex items-center gap-4 pb-3"
+            class="flex items-center gap-4 pb-3 lg:pb-6"
           >
-            <it-icon-smiley-thinking/>
+            <it-icon-smiley-thinking class="w-8 h-8 flex-none"/>
-            <span>Selbsteinschätzung: Muss ich nochmals anschauen</span>
+            <div>Selbsteinschätzung: Muss ich nochmals anschauen</div>
           </div>
           <div
             v-else
-            class="flex items-center gap-4 pb-3"
+            class="flex items-center gap-4 pb-3 lg:pb-6"
           >
-            <it-icon-smiley-neutral/>
+            <it-icon-smiley-neutral class="w-8 h-8 flex-none"/>
-            <span>Selbsteinschätzung</span>
+            <div>Selbsteinschätzung</div>
           </div>
         </div>
 

client/src/stores/circle.ts

@@ -1,18 +1,18 @@
-import * as log from 'loglevel';
+import * as log from 'loglevel'
 
-import {defineStore} from 'pinia'
+import { defineStore } from 'pinia'
 
-import type {LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
+import type { LearningContent, LearningUnit, LearningUnitQuestion } from '@/types'
-import type {Circle} from '@/services/circle'
+import type { Circle } from '@/services/circle'
-import {itGet, itPost} from '@/fetchHelpers';
+import { itGet, itPost } from '@/fetchHelpers'
-import {useAppStore} from '@/stores/app';
+import { useAppStore } from '@/stores/app'
-import {useLearningPathStore} from '@/stores/learningPath';
+import { useLearningPathStore } from '@/stores/learningPath'
 
 export type CircleStoreState = {
-  circle: Circle | undefined;
+  circle: Circle | undefined
-  currentLearningContent: LearningContent | undefined;
+  currentLearningContent: LearningContent | undefined
-  currentSelfEvaluation: LearningUnit | undefined;
+  currentSelfEvaluation: LearningUnit | undefined
-  page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION';
+  page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION'
 }
 
 export const useCircleStore = defineStore({
@@ -115,7 +115,14 @@ export const useCircleStore = defineStore({
           // go to self evaluation
           this.openSelfEvaluation(currentParent);
         } else if (this.currentLearningContent.nextLearningContent) {
-          this.openLearningContent(this.currentLearningContent.nextLearningContent);
+          if (
+            this.currentLearningContent.parentLearningSequence &&
+            this.currentLearningContent.parentLearningSequence.id === nextLearningContent?.parentLearningSequence?.id
+          ) {
+            this.openLearningContent(this.currentLearningContent.nextLearningContent);
+          } else {
+            this.closeLearningContent();
+          }
         } else {
           this.closeLearningContent();
         }
@@ -126,8 +133,13 @@ export const useCircleStore = defineStore({
     continueFromSelfEvaluation() {
       if (this.currentSelfEvaluation) {
         const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
+
         if (nextContent) {
-          this.openLearningContent(nextContent);
+          if (this.currentSelfEvaluation?.parentLearningSequence?.id === nextContent?.parentLearningSequence?.id) {
+            this.openLearningContent(nextContent);
+          } else {
+            this.closeSelfEvaluation();
+          }
         } else {
           this.closeSelfEvaluation();
         }

client/src/views/CircleView.vue

@@ -33,87 +33,105 @@ onMounted(async () => {
         @closemodal="circleStore.page = 'INDEX'"
       />
     </Teleport>
-  <Transition mode="out-in">
+    <Transition mode="out-in">
-    <div v-if="circleStore.page === 'LEARNING_CONTENT'">
+      <div v-if="circleStore.page === 'LEARNING_CONTENT'">
-      <LearningContent :key="circleStore.currentLearningContent.translation_key"/>
+        <LearningContent :key="circleStore.currentLearningContent.translation_key"/>
-    </div>
+      </div>
-    <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
+      <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
-      <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
+        <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
-    </div>
+      </div>
-    <div v-else>
+      <div v-else>
-      <div class="circle">
+        <div class="circle-container">
-        <div class="flex flex-col lg:flex-row">
+          <div class="circle">
-          <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4">
+            <div class="flex flex-col lg:flex-row">
-            <router-link
+              <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
-              to="/learningpath/versicherungsvermittlerin"
+                <router-link
-              class="btn-text inline-flex items-center px-3 py-4 font-normal"
+                  to="/learningpath/versicherungsvermittlerin"
-            >
+                  class="btn-text inline-flex items-center px-3 py-4 font-normal"
-              <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
+                >
-              <span class="inline">zurück zum Lernpfad</span>
+                  <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
-            </router-link>
+                  <span class="inline">zurück zum Lernpfad</span>
+                </router-link>
 
-            <h1 class="text-blue-dark text-7xl" data-cy="circle-title">
+                <h1 class="text-blue-dark text-7xl" data-cy="circle-title">
-              {{ circleStore.circle?.title }}
+                  {{ circleStore.circle?.title }}
-            </h1>
+                </h1>
 
-            <div class="w-full mt-8">
+                <div class="w-full mt-8">
-              <CircleDiagram></CircleDiagram>
+                  <CircleDiagram></CircleDiagram>
-            </div>
-
-            <div class="border-t-2 border-gray-500 mt-4 lg:hidden">
-              <div
-                class="mt-4 inline-flex items-center"
-                @click="circleStore.page = 'OVERVIEW'"
-              >
-                <it-icon-info class="mr-2"/>
-                Das lernst du in diesem Circle
-              </div>
-              <div class="inline-flex items-center">
-                <it-icon-message class="mr-2"/>
-                Fachexpertin kontaktieren
-              </div>
-            </div>
-
-            <div class="hidden lg:block">
-              <div class="block border border-gray-500 mt-8 p-6">
-                <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
-                <div class="prose mt-4">
-                  {{ circleStore.circle?.description }}
                 </div>
 
-                <button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
+                <div class="border-t-2 border-gray-500 mt-4 lg:hidden">
+                  <div
+                    class="mt-4 inline-flex items-center"
+                    @click="circleStore.page = 'OVERVIEW'"
+                  >
+                    <it-icon-info class="mr-2"/>
+                    Das lernst du in diesem Circle
+                  </div>
+                  <div class="inline-flex items-center">
+                    <it-icon-message class="mr-2"/>
+                    Fachexpertin kontaktieren
+                  </div>
+                </div>
+
+                <div class="hidden lg:block">
+                  <div class="block border border-gray-500 mt-8 p-6">
+                    <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
+                    <div class="prose mt-4">
+                      {{ circleStore.circle?.description }}
+                    </div>
+
+                    <button class="btn-primary mt-4 text-xl" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu
+                    </button>
+                  </div>
+
+                  <div class="expert border border-gray-500 mt-8 p-6">
+                    <h3 class="text-blue-dark">Hast du Fragen?</h3>
+                    <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
+                    <button class="btn-secondary mt-4 text-xl">
+                      Fachexpertin kontaktieren
+                    </button>
+                  </div>
+                </div>
               </div>
 
-              <div class="expert border border-gray-500 mt-8 p-6">
+              <div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
-                <h3 class="text-blue-dark">Hast du Fragen?</h3>
+                <div
-                <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
+                  v-for="learningSequence in circleStore.circle?.learningSequences || []"
-                <button class="btn-secondary mt-4">
+                  :key="learningSequence.translation_key"
-                  Fachexpertin kontaktieren
+                >
-                </button>
+                  <LearningSequence
-              </div>
+                    :learning-sequence="learningSequence"
-            </div>
+                  ></LearningSequence>
-          </div>
+                </div>
 
-          <div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
+              </div>
-            <div
-              v-for="learningSequence in circleStore.circle?.learningSequences || []"
-              :key="learningSequence.translation_key"
-            >
-              <LearningSequence
-                :learning-sequence="learningSequence"
-              ></LearningSequence>
             </div>
 
           </div>
         </div>
-
       </div>
-    </div>
+    </Transition>
-  </Transition>
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
+
+.circle-container {
+  background: linear-gradient(
+    to right,
+    white 0%,
+    white 50%,
+    #EDF2F6 50%,
+    #EDF2F6 100%
+  );
+}
+
+.circle {
+  max-width: 1440px;
+  margin: 0 auto;
+}
 
 .v-enter-active,
 .v-leave-active {

client/src/views/LearningPathView.vue

@@ -49,8 +49,11 @@ onMounted(async () => {
               Listen Ansicht anzeigen
             </button>
           </div>
-          <LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization"
+          <LearningPathDiagram
-                               v-bind:vertical="false"></LearningPathDiagram>
+            class="max-w-[1680px] w-full"
+            identifier="mainVisualization"
+            v-bind:vertical="false"
+          ></LearningPathDiagram>
         </div>
 
         <h1 data-cy="learning-path-title" class="m-12">{{ learningPathStore.learningPath.title }}</h1>
@@ -64,7 +67,7 @@ onMounted(async () => {
             </p>
           </div>
           <div class="p-8 flex-1">
-            Nächster Schirtt
+            Nächster Schritt
             <h3>Analyse: Anwenden</h3>
             <router-link class="mt-4 btn-blue" to="/circle/analyse">
               Los geht's
@@ -73,11 +76,7 @@ onMounted(async () => {
 
         </div>
         <div class="topic"></div>
-
-
       </div>
-
-
     </div>
   </div>
 </template>

client/tailwind.css

@@ -63,28 +63,28 @@ svg {
   }
 
   .btn-primary {
-    @apply font-bold py-2 px-4 align-middle inline-block
+    @apply font-semibold py-2 px-4 align-middle inline-block
     bg-blue-900 text-white border-2 border-blue-900
     hover:bg-blue-700 hover:border-blue-700
     disabled:opacity-50 disabled:cursor-not-allowed
   }
 
   .btn-secondary {
-    @apply font-bold py-2 px-4 align-middle inline-block
+    @apply font-semibold py-2 px-4 align-middle inline-block
     bg-white text-blue-900 border-2 border-blue-900
     hover:bg-gray-200
     disabled:opacity-50 disabled:cursor-not-allowed
   }
 
   .btn-blue {
-    @apply font-bold py-2 px-4 align-middle inline-block
+    @apply font-semibold py-2 px-4 align-middle inline-block
     bg-sky-500 text-blue-900 border-2 border-sky-500
     hover:bg-sky-400 hover:border-sky-400
     disabled:opacity-50 disabled:cursor-not-allowed
   }
 
   .btn-text {
-    @apply font-bold py-2 px-4 align-middle inline-block
+    @apply font-semibold py-2 px-4 align-middle inline-block
     hover:text-gray-700
     disabled:opacity-50 disabled:cursor-not-allowed
   }