Refactor CompetenceDetail component

client/src/components/competences/CompetenceDetail.vue

@@ -8,32 +8,48 @@ import { ref } from "vue";
 
 const competenceStore = useCompetenceStore();
 
-const props = defineProps<{
+interface Props {
   competence: CompetencePage;
-}>();
+  isInline?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isInline: false,
+});
 
 const isOpen = ref(false);
 
-const togglePerformanceCriteria = () => {
+function togglePerformanceCriteria() {
   isOpen.value = !isOpen.value;
-};
+}
 </script>
 
 <template>
   <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>
-        <ItToggleArrow :is-open="isOpen"></ItToggleArrow>
+        <CompetenceProgress
+          v-if="isInline"
+          class="w-[330px]"
+          :status-count="
+            competenceStore.calcStatusCount(
+              competenceStore.criteriaByCompetence(competence)
+            )
+          "
+        ></CompetenceProgress>
+        <ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
       </div>
       <CompetenceProgress
+        v-if="!isInline"
         :status-count="
           competenceStore.calcStatusCount(
             competenceStore.criteriaByCompetence(competence)

client/src/components/ui/ItToggleArrow.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 interface Props {
   isOpen: boolean;
   small?: boolean;
@@ -10,14 +9,14 @@ const props = withDefaults(defineProps<Props>(), {
   small: false,
 });
 
-function sizeClasses(isSmall: boolean) {
-  return isSmall ? ["h-8", "w-8"] : ["h-10", "w-10"];
+function sizeClasses() {
+  return props.small ? ["h-8", "w-8"] : ["h-10", "w-10"];
 }
 </script>
 
 <template>
   <div class="transition-transform" :class="{ 'rotate-180': isOpen }">
-    <it-icon-arrow-down :class="sizeClasses(small)" aria-hidden="true" />
+    <it-icon-arrow-down :class="sizeClasses()" aria-hidden="true" />
   </div>
 </template>
 <style lang="scss" scoped></style>

client/tailwind.config.js

@@ -23,7 +23,7 @@ module.exports = {
         "handlungsfelder-overview":
           "url('/static/icons/icon-handlungsfelder-overview.svg')",
         "lernmedien-overview": "url('/static/icons/icon-lernmedien-overview.svg')",
-        "message": "url('/static/icons/icon-message.svg')",
+        message: "url('/static/icons/icon-message.svg')",
       },
       borderColor: (theme) => ({
         DEFAULT: theme("colors.gray.500"),