Update CompetenceDetail component

client/src/components/competences/CompetenceDetail.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
 import ItProgress from "@/components/ui/ItProgress.vue";
+import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
 import { useCompetenceStore } from "@/stores/competence";
 import type { CompetencePage } from "@/types";
 import { ref } from "vue";
@@ -11,10 +12,12 @@ interface Props {
   competence: CompetencePage;
   courseSlug: string;
   showAssessAgain?: boolean;
+  isInline?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showAssessAgain: true,
+  isInline: false,
 });
 
 const isOpen = ref(false);
@@ -28,19 +31,28 @@ const togglePerformanceCriteria = () => {
   <div>
     <div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8">
       <div
-        class="mb-4 flex flex-row justify-between items-center"
+        class="flex flex-row justify-between items-center"
+        :class="props.isInline ? '' : 'mb-4'"
         role="button"
         aria-pressed="false"
         @click="togglePerformanceCriteria()"
       >
-        <h2 class="text-large">
+        <h2 :class="props.isInline ? ['text-bold', 'w-2/5'] : 'text-large'">
           {{ competence.competence_id }} {{ competence.title }}
         </h2>
-        <div class="transition-transform" :class="{ 'rotate-180': isOpen }">
+        <ItProgress
-          <it-icon-arrow-down class="h-10 w-10" aria-hidden="true" />
+          v-if="isInline"
-        </div>
+          class="w-[330px]"
+          :status-count="
+            competenceStore.calcStatusCount(
+              competenceStore.criteriaByCompetence(competence)
+            )
+          "
+        ></ItProgress>
+        <ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
       </div>
       <ItProgress
+        v-if="!isInline"
         :status-count="
           competenceStore.calcStatusCount(
             competenceStore.criteriaByCompetence(competence)
@@ -52,7 +64,7 @@ const togglePerformanceCriteria = () => {
       <li
         v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
         :key="performanceCriteria.id"
-        class="mb-4 pb-4 border-b"
+        class="mb-4 pb-4 border-b last:border-0"
       >
         <PerformanceCriteriaRow
           :criteria="performanceCriteria"

client/src/components/ui/ItPersonRow.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
     class="py-4 leading-[45px] border-t border-gray-500 flex flex-col lg:flex-row justify-between"
   >
     <div class="flex flex-row md:w-1/4 items-center">
-      <img class="h-[45px] rounded-full mr-2" :src="avatarUrl"/>
+      <img class="h-[45px] rounded-full mr-2" :src="avatarUrl" />
       <p class="text-bold lg:leading-[45px]">{{ name }}</p>
     </div>
     <div class="flex-1 flex items-center">

client/src/components/ui/ItToggleArrow.vue

@@ -10,13 +10,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 function sizeClasses() {
-  return props.small ? ["h-8", "w-8"] : ["h-10", "w-10"];
+  const classes = props.small ? ["h-8", "w-8"] : ["h-10", "w-10"];
+  if (props.isOpen) {
+    classes.push("rotate-180");
+  }
+  return classes;
 }
 </script>
 
 <template>
-  <div class="transition-transform" :class="{ 'rotate-180': isOpen }">
+  <div class="transition-transform" :class="sizeClasses()">
-    <it-icon-arrow-down :class="sizeClasses()" aria-hidden="true" />
+    <it-icon-arrow-down aria-hidden="true" />
   </div>
 </template>
 <style lang="scss" scoped></style>

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -61,7 +61,7 @@ function setActiveClasses(isActive: boolean) {
         </div>
       </header>
       <main>
-        <div v-if="learningPath" class="bg-white w-full mb-8">
+        <div v-if="learningPath" class="bg-white w-full pt-8 pb-4 mb-8">
           <LearningPathDiagram
             class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
             diagram-type="horizontal"
@@ -84,16 +84,20 @@ function setActiveClasses(isActive: boolean) {
           </li>
         </ul>
         <div>
-          <ul v-if="competenceStore.competenceProfilePage(user.user_id)">
+          <ul
+            class="px-8 bg-white"
+            v-if="competenceStore.competenceProfilePage(user.user_id)"
+          >
             <li
               v-for="competence in competenceStore.competences(user.user_id)"
               :key="competence.id"
-              class="bg-white p-8 mb-8"
+              class="p-8 border-b last:border-0 border-gray-500"
             >
               <CompetenceDetail
                 :competence="competence"
                 :course-slug="props.courseSlug"
                 :show-assess-again="false"
+                :is-inline="true"
               ></CompetenceDetail>
             </li>
           </ul>