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,10 +115,17 @@ export const useCircleStore = defineStore({
           // go to self evaluation
           this.openSelfEvaluation(currentParent);
         } else if (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();
+        }
       } else {
         log.error('currentLearningContent is undefined');
       }
@@ -126,11 +133,16 @@ export const useCircleStore = defineStore({
     continueFromSelfEvaluation() {
       if (this.currentSelfEvaluation) {
         const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
+
         if (nextContent) {
+          if (this.currentSelfEvaluation?.parentLearningSequence?.id === nextContent?.parentLearningSequence?.id) {
             this.openLearningContent(nextContent);
           } else {
             this.closeSelfEvaluation();
           }
+        } else {
+          this.closeSelfEvaluation();
+        }
       } else {
         log.error('currentSelfEvaluation is undefined');
       }

client/src/views/CircleView.vue

@@ -41,9 +41,10 @@ onMounted(async () => {
         <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
       </div>
       <div v-else>
+        <div class="circle-container">
           <div class="circle">
             <div class="flex flex-col lg:flex-row">
-          <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4">
+              <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
                 <router-link
                   to="/learningpath/versicherungsvermittlerin"
                   class="btn-text inline-flex items-center px-3 py-4 font-normal"
@@ -81,13 +82,14 @@ onMounted(async () => {
                       {{ circleStore.circle?.description }}
                     </div>
 
-                <button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
+                    <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">
+                    <button class="btn-secondary mt-4 text-xl">
                       Fachexpertin kontaktieren
                     </button>
                   </div>
@@ -109,11 +111,27 @@ onMounted(async () => {
 
           </div>
         </div>
+      </div>
     </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
   }