Add component for horizontal bar charts

client/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col min-h-full">
+  <div class="flex min-h-full flex-col">
     <MainNavigationBar class="flex-none" />
     <RouterView v-slot="{ Component }" class="flex-auto">
       <Transition mode="out-in" name="app">

client/src/components/AppFooter.vue

@@ -5,7 +5,7 @@ log.debug("AppFooter created");
 </script>
 
 <template>
-  <footer class="px-8 py-4 bg-gray-200 border-t flex flex-col lg:flex-row">
+  <footer class="flex flex-col border-t bg-gray-200 px-8 py-4 lg:flex-row">
     <div>@ 2022 VBV</div>
     <div class="lg:ml-8">{{ $t("footer.faq") }}</div>
     <div class="lg:ml-8">{{ $t("footer.dataProtection") }}</div>

client/src/components/MainNavigationBar.vue

@@ -113,14 +113,14 @@ const profileDropdownData: DropdownListItem[] = [
     </Teleport>
     <Transition name="nav">
       <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900">
-        <nav class="px-8 py-2 mx-auto lg:flex lg:justify-start lg:items-center lg:py-4">
+        <nav class="mx-auto px-8 py-2 lg:flex lg:items-center lg:justify-start lg:py-4">
           <div class="flex items-center justify-between">
             <div class="flex items-center">
               <router-link to="/" class="flex">
-                <it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3" />
+                <it-icon-vbv class="mr-3 -mt-6 -ml-3 h-8 w-16" />
               </router-link>
               <router-link to="/" class="flex">
-                <div class="text-white text-2xl pr-10 pl-3 ml-1 border-l border-white">
+                <div class="ml-1 border-l border-white pr-10 pl-3 text-2xl text-white">
                   myVBV
                 </div>
               </router-link>
@@ -133,7 +133,7 @@ const profileDropdownData: DropdownListItem[] = [
                 class="nav-item flex flex-row items-center"
                 data-cy="messages-link"
               >
-                <it-icon-bell class="w-6 h-6 mr-6" />
+                <it-icon-bell class="mr-6 h-6 w-6" />
               </router-link>
               <router-link
                 v-if="userStore.loggedIn"
@@ -141,13 +141,13 @@ const profileDropdownData: DropdownListItem[] = [
                 class="nav-item flex flex-row items-center"
                 data-cy="messages-link"
               >
-                <it-icon-persons class="w-6 h-6 mr-6" />
+                <it-icon-persons class="mr-6 h-6 w-6" />
               </router-link>
               <!-- Mobile menu button -->
               <div class="flex" @click="toggleNav">
                 <button
                   type="button"
-                  class="w-8 h-8 text-white hover:text-sky-500 focus:outline-none focus:text-sky-500"
+                  class="h-8 w-8 text-white hover:text-sky-500 focus:text-sky-500 focus:outline-none"
                 >
                   <it-icon-menu class="h-8 w-8" />
                 </button>
@@ -159,7 +159,7 @@ const profileDropdownData: DropdownListItem[] = [
           <div
             v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn"
             :class="state.showMenu ? 'flex' : 'hidden'"
-            class="flex-auto mt-8 lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0"
+            class="mt-8 flex-auto lg:mt-0 lg:flex lg:flex-row lg:items-center lg:space-y-0 lg:space-x-10"
           >
             <!--            <router-link-->
             <!--              v-if="inCourse() && courseSessionsStore.courseSessionForRoute"-->
@@ -201,7 +201,7 @@ const profileDropdownData: DropdownListItem[] = [
               {{ $t("competences.title") }}
             </router-link>
 
-            <div class="hidden lg:block flex-auto"></div>
+            <div class="hidden flex-auto lg:block"></div>
             <a
               class="nav-item"
               target="_blank"
@@ -223,14 +223,14 @@ const profileDropdownData: DropdownListItem[] = [
               class="nav-item flex flex-row items-center"
               data-cy="messages-link"
             >
-              <it-icon-bell class="w-6 h-6 mr-6" />
+              <it-icon-bell class="mr-6 h-6 w-6" />
             </router-link>
             <router-link
               to="/messages"
               class="nav-item flex flex-row items-center"
               data-cy="messages-link"
             >
-              <it-icon-persons class="w-6 h-6 mr-6" />
+              <it-icon-persons class="mr-6 h-6 w-6" />
             </router-link>
             <div v-if="userStore.loggedIn" class="nav-item flex items-center">
               <ItDropdown
@@ -261,11 +261,11 @@ const profileDropdownData: DropdownListItem[] = [
 
 <style lang="postcss" scoped>
 .nav-item {
-  @apply text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal;
+  @apply text-2xl font-bold text-white hover:text-sky-500 lg:text-base lg:font-normal;
 }
 
 .nav-item--active {
-  @apply underline underline-offset-[21px] decoration-sky-500 decoration-4;
+  @apply underline decoration-sky-500 decoration-4 underline-offset-[21px];
 }
 
 .nav-enter-active,

client/src/components/MobileMenu.vue

@@ -30,7 +30,7 @@ const clickLink = (to: string | undefined) => {
   <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
     <div>
       <div>
-        <div v-if="userStore.loggedIn" class="border-b -mx-4 px-8 pb-4">
+        <div v-if="userStore.loggedIn" class="-mx-4 border-b px-8 pb-4">
           <div class="-ml-4 flex">
             <div v-if="userStore.avatar_url">
               <img
@@ -52,8 +52,8 @@ const clickLink = (to: string | undefined) => {
           </div>
         </div>
         <div>
-          <div v-if="courseSession" class="mt-6 pb-6 border-b">
-            <h4 class="text-gray-900 text-sm">{{ courseSession?.course.title }}</h4>
+          <div v-if="courseSession" class="mt-6 border-b pb-6">
+            <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
             <ul class="mt-6">
               <li>
                 <button @click="clickLink(courseSession?.learning_path_url)">
@@ -67,7 +67,7 @@ const clickLink = (to: string | undefined) => {
               </li>
             </ul>
           </div>
-          <div class="mt-6 pb-6 border-b">
+          <div class="mt-6 border-b pb-6">
             <ul>
               <li>
                 <a
@@ -95,7 +95,7 @@ const clickLink = (to: string | undefined) => {
           <button
             v-if="userStore.loggedIn"
             type="button"
-            class="mt-6 items-center flex"
+            class="mt-6 flex items-center"
             @click="userStore.handleLogout()"
           >
             <IconLogout class="inline-block" />

client/src/components/competences/CompetenceDetail.vue

@@ -29,9 +29,9 @@ const togglePerformanceCriteria = () => {
 
 <template>
   <div>
-    <div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8">
+    <div :class="{ 'mb-4 border-b pb-8': isOpen }" class="-mx-8 px-8">
       <div
-        class="flex flex-row justify-between items-center"
+        class="flex flex-row items-center justify-between"
         :class="props.isInline ? '' : 'mb-4'"
         role="button"
         aria-pressed="false"
@@ -64,7 +64,7 @@ const togglePerformanceCriteria = () => {
       <li
         v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
         :key="performanceCriteria.id"
-        class="mb-4 pb-4 border-b last:border-0"
+        class="mb-4 border-b pb-4 last:border-0"
       >
         <PerformanceCriteriaRow
           :criteria="performanceCriteria"

client/src/components/competences/PerformanceCriteriaRow.vue

@@ -15,9 +15,9 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="flex flex-col lg:flex-row lg:items-center justify-between">
+  <div class="flex flex-col justify-between lg:flex-row lg:items-center">
     <div class="flex flex-row items-center">
-      <div v-if="showState" class="h-8 w-8 mr-4">
+      <div v-if="showState" class="mr-4 h-8 w-8">
         <it-icon-smiley-happy
           v-if="criteria.completion_status === 'success'"
         ></it-icon-smiley-happy>
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
         ></it-icon-smiley-thinking>
         <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
       </div>
-      <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
+      <div class="mb-4 pr-5 lg:mr-10 lg:mb-0">
         <h4 class="text-bold mb-2">
           {{ criteria.competence_id }} {{ criteria.title }}
         </h4>
@@ -38,7 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
         </p>
       </div>
     </div>
-    <p class="lg:hidden mb-2">
+    <p class="mb-2 lg:hidden">
       {{ $t("general.learningUnit") }}:
       <router-link class="link" :to="criteria.learning_unit.frontend_url">
         {{ criteria.learning_unit.title }}

client/src/components/learningPath/CircleOverview.vue

@@ -15,11 +15,11 @@ const props = defineProps<{
     <div v-if="circle" class="container-medium">
       <h1 class="">Überblick: Circle «{{ circle.title }}»</h1>
 
-      <p class="mt-8 text-large">
+      <p class="text-large mt-8">
         Hier zeigen wir dir, was du in diesem Circle lernen wirst.
       </p>
 
-      <div v-show="circle.goals.length" class="mt-8 p-4 border">
+      <div v-show="circle.goals.length" class="mt-8 border p-4">
         <h3>{{ circle.goal_description }}</h3>
 
         <ul class="mt-4">
@@ -29,7 +29,7 @@ const props = defineProps<{
             class="text-large flex items-center"
           >
             <it-icon-check
-              class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"
+              class="mt-4 hidden h-12 w-12 flex-none text-sky-500 lg:block"
             ></it-icon-check>
             <div class="mt-4">{{ goal.value }}</div>
           </li>
@@ -41,11 +41,11 @@ const props = defineProps<{
           {{ circle.job_situation_description }}
         </h3>
 
-        <ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
+        <ul class="mt-8 grid auto-rows-fr grid-cols-1 gap-6 lg:grid-cols-3">
           <li
             v-for="jobSituation in circle.job_situations"
             :key="jobSituation.id"
-            class="job-situation border p-4 text-large flex items-center"
+            class="job-situation text-large flex items-center border p-4"
           >
             {{ jobSituation.value }}
           </li>

client/src/components/learningPath/DocumentUploadForm.vue

@@ -80,10 +80,10 @@ function showFileInformation() {
 
 <template>
   <form @submit.prevent="submitForm()">
-    <label class="block text-bold" for="upload">
+    <label class="text-bold block" for="upload">
       {{ $t("circlePage.documents.fileLabel") }}
     </label>
-    <div class="mb-4 btn-secondary mt-4 text-xl relative cursor-pointer">
+    <div class="btn-secondary relative mb-4 mt-4 cursor-pointer text-xl">
       <input id="upload" type="file" class="absolute opacity-0" @change="fileChange" />
       {{ $t("circlePage.documents.modalAction") }}
     </div>
@@ -97,22 +97,22 @@ function showFileInformation() {
     </div>
     <p class="mb-8">{{ $t("circlePage.documents.maxFileSize") }}</p>
     <div class="mb-8">
-      <label class="block text-bold mb-4" for="name">
+      <label class="text-bold mb-4 block" for="name">
         {{ $t("circlePage.documents.modalFileName") }}
       </label>
-      <input id="name" v-model="formData.name" type="text" class="w-1/2 mb-2" />
+      <input id="name" v-model="formData.name" type="text" class="mb-2 w-1/2" />
       <p>{{ $t("circlePage.documents.modalNameInformation") }}</p>
       <div v-if="formErrors.name">
         <p class="text-red-700">{{ $t("circlePage.documents.chooseName") }}</p>
       </div>
     </div>
     <div class="mb-8">
-      <label class="block text-bold mb-4" for="learningsequnce">
+      <label class="text-bold mb-4 block" for="learningsequnce">
         {{ $t("general.learningSequence") }}
       </label>
       <ItDropdownSelect
         v-model="formData.learningSequence"
-        class="w-full lg:w-96 mt-4 lg:mt-0"
+        class="mt-4 w-full lg:mt-0 lg:w-96"
         :items="props.learningSequences"
       ></ItDropdownSelect>
       <div v-if="formErrors.learningSequence">
@@ -122,12 +122,12 @@ function showFileInformation() {
       </div>
     </div>
     <div v-if="showUploadErrorMessage">
-      <p class="text-red-700 mb-4">
+      <p class="mb-4 text-red-700">
         {{ $t("circlePage.documents.uploadErrorMessage") }}
       </p>
     </div>
-    <div class="-mx-8 px-8 pt-4 border-t">
-      <button class="btn-primary text-xl mb-0" :disabled="isUploading">
+    <div class="-mx-8 border-t px-8 pt-4">
+      <button class="btn-primary mb-0 text-xl" :disabled="isUploading">
         {{ $t("general.save") }}
       </button>
     </div>

client/src/components/learningPath/FeedbackCompletition.vue

@@ -1,19 +1,19 @@
 <template>
   <div>
-    <h1 class="hidden lg:block lg:mb-12">{{ title }}</h1>
+    <h1 class="hidden lg:mb-12 lg:block">{{ title }}</h1>
     <div
-      class="b-0 lg:border lg:border-gray-400 lg:p-8 flex flex-col lg:items-center lg:flex-row"
+      class="b-0 flex flex-col lg:flex-row lg:items-center lg:border lg:border-gray-400 lg:p-8"
     >
-      <img :src="avatarUrl" class="w-16 h-16 rounded-full mb-6 lg:mr-12" />
-      <h1 class="block lg:hidden mb-8">{{ title }}</h1>
+      <img :src="avatarUrl" class="mb-6 h-16 w-16 rounded-full lg:mr-12" />
+      <h1 class="mb-8 block lg:hidden">{{ title }}</h1>
       <div>
         <p class="mb-6">{{ description }}</p>
         <button v-if="!feedbackSent" class="btn-primary" @click="$emit('sendFeedback')">
           {{ $t("feedback.sendFeedback") }}
         </button>
-        <p v-else class="bg-green-200 px-6 py-4 flex items-center">
+        <p v-else class="flex items-center bg-green-200 px-6 py-4">
           <it-icon-check
-            class="text-green-800 w-7 h-7 mr-2 inline-block"
+            class="mr-2 inline-block h-7 w-7 text-green-800"
           ></it-icon-check>
           {{ $t("feedback.feedbackSent") }}
         </p>

client/src/components/learningPath/LearningContentContainer.vue

@@ -26,14 +26,14 @@ defineEmits(["next", "exit"]);
   <div>
     <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="absolute top-0 bottom-0 w-full 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"
+          class="absolute flex h-12 w-full items-center justify-between bg-white px-4 py-4 lg:px-8"
         >
           <button
             type="button"
-            class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
+            class="absolute right-4 top-4 h-8 w-8 cursor-pointer"
             data-cy="close-learning-content"
             @click="$emit('exit')"
           >
@@ -43,7 +43,7 @@ defineEmits(["next", "exit"]);
         <slot></slot>
       </div>
       <nav
-        class="nav flex justify-between px-4 items-center bg-white"
+        class="nav flex items-center justify-between bg-white px-4"
         :class="{ 'border-t': showBorder }"
       >
         <div class="flex justify-between">
@@ -52,7 +52,7 @@ defineEmits(["next", "exit"]);
             :learning-content-type="learningContentBlock.type"
             class="mr-2"
           />
-          <h1 class="text-base font-normal hidden lg:inline-block" data-cy="ln-title">
+          <h1 class="hidden text-base font-normal lg:inline-block" data-cy="ln-title">
             {{ title }}
           </h1>
         </div>

client/src/components/learningPath/LearningContentNavigation.vue

@@ -21,11 +21,11 @@ defineEmits(["back", "continue"]);
     <nav class="mt-16 flex lg:justify-between">
       <button
         v-if="showBackButton"
-        class="btn-secondary flex items-center mr-2"
+        class="btn-secondary mr-2 flex items-center"
         data-cy="previous-step"
         @click="$emit('back')"
       >
-        <it-icon-arrow-left class="w-6 h-6 mr-2"></it-icon-arrow-left>
+        <it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
         {{ $t("general.backCapitalized") }}
       </button>
       <button
@@ -35,7 +35,7 @@ defineEmits(["back", "continue"]);
         @click="$emit('continue')"
       >
         {{ $t("general.next") }}
-        <it-icon-arrow-right class="w-6 h-6 ml-2"></it-icon-arrow-right>
+        <it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
       </button>
     </nav>
     <div
@@ -43,7 +43,7 @@ defineEmits(["back", "continue"]);
       :aria-valuenow="questionIndex + 1"
       :aria-valuemax="maxQuestionIndex"
       :aria-valuemin="1"
-      class="absolute bottom-[86px] h-1 left-0 right-0 lg:left-4 lg:right-4 inline-flex gap-1"
+      class="absolute bottom-[86px] left-0 right-0 inline-flex h-1 gap-1 lg:left-4 lg:right-4"
     >
       <span
         v-for="i in maxQuestionIndex"

client/src/components/learningPath/LearningContentTypeBadge.vue

@@ -10,11 +10,11 @@ const props = defineProps<{
 <template>
   <div
     v-if="props.learningContentType !== 'placeholder'"
-    class="flex bg-gray-200 rounded-full px-2.5 py-0.5 gap-2 items-center w-min h-min"
+    class="flex h-min w-min items-center gap-2 rounded-full bg-gray-200 px-2.5 py-0.5"
   >
     <component
       :is="learningContentTypeData(props.learningContentType).icon"
-      class="w-6 h-6"
+      class="h-6 w-6"
     ></component>
     <p class="whitespace-nowrap">
       {{ learningContentTypeData(props.learningContentType).title }}

client/src/components/learningPath/LearningPathDiagram.vue

@@ -466,7 +466,7 @@ function render() {
   <div class="svg-container h-full content-start">
     <svg
       :id="svgId"
-      class="learning-path-visualization h-full mx-auto -mt-6 lg:mt-0"
+      class="learning-path-visualization mx-auto -mt-6 h-full lg:mt-0"
       :class="{
         'max-h-[90px]': ['horizontalSmall'].includes(diagramType),
         'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType),

client/src/components/learningPath/LearningPathViewVertical.vue

@@ -19,7 +19,7 @@ const emits = defineEmits(["closemodal"]);
     <div v-if="learningPath" class="container-medium">
       <h1>{{ learningPath.title }}</h1>
       <div class="learningpath flex flex-col">
-        <div class="flex flex-col h-max">
+        <div class="flex h-max flex-col">
           <LearningPathDiagram
             v-if="learningPath"
             class="w-full"

client/src/components/learningPath/LearningSequence.vue

@@ -89,8 +89,8 @@ const learningSequenceBorderClass = computed(() => {
 </script>
 
 <template>
-  <div :id="learningSequence.slug" class="mb-8 learning-sequence">
-    <div class="flex items-center gap-4 mb-2 text-blue-900">
+  <div :id="learningSequence.slug" class="learning-sequence mb-8">
+    <div class="mb-2 flex items-center gap-4 text-blue-900">
       <component :is="learningSequence.icon" />
       <h3 class="text-large font-semibold">
         {{ learningSequence.title }}
@@ -98,14 +98,14 @@ const learningSequenceBorderClass = computed(() => {
       <div>{{ humanizeDuration(learningSequence.minutes) }}</div>
     </div>
 
-    <ol class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
+    <ol class="border bg-white px-4 lg:px-6" :class="learningSequenceBorderClass">
       <li
         v-for="learningUnit in learningSequence.learningUnits"
         :id="learningUnit.slug"
         :key="learningUnit.id"
         class="pt-3 lg:pt-6"
       >
-        <div v-if="learningUnit.title" class="pb-3 lg:pg-6 flex gap-4 text-blue-900">
+        <div v-if="learningUnit.title" class="lg:pg-6 flex gap-4 pb-3 text-blue-900">
           <div class="font-semibold">{{ learningUnit.title }}</div>
           <div class="whitespace-nowrap">
             {{ humanizeDuration(learningUnit.minutes) }}
@@ -115,14 +115,14 @@ const learningSequenceBorderClass = computed(() => {
           <li
             v-for="learningContent in learningUnit.learningContents"
             :key="learningContent.id"
-            class="flex gap-4 pb-3 lg:pb-6 items-center"
+            class="flex items-center gap-4 pb-3 lg:pb-6"
           >
             <div v-if="props.readonly">
               <it-icon-check
                 v-if="learningContent.completion_status === 'success'"
-                class="block w-8 h-8"
+                class="block h-8 w-8"
               ></it-icon-check>
-              <div v-else class="w-8 h-8"></div>
+              <div v-else class="h-8 w-8"></div>
             </div>
             <ItCheckbox
               v-else
@@ -131,13 +131,13 @@ const learningSequenceBorderClass = computed(() => {
               @toggle="toggleCompleted(learningContent)"
             />
             <div class="flex-auto pt-1 sm:pt-0">
-              <span class="flex gap-4 items-center xl:h-10">
-                <div v-if="props.readonly" class="w-full sm:w-auto text-left">
+              <span class="flex items-center gap-4 xl:h-10">
+                <div v-if="props.readonly" class="w-full text-left sm:w-auto">
                   {{ learningContent.title }}
                 </div>
                 <button
                   v-else
-                  class="cursor-pointer w-full sm:w-auto text-left"
+                  class="w-full cursor-pointer text-left sm:w-auto"
                   :data-cy="`${learningContent.slug}`"
                   @click.stop="circleStore.openLearningContent(learningContent)"
                 >
@@ -145,7 +145,7 @@ const learningSequenceBorderClass = computed(() => {
                 </button>
 
                 <div
-                  class="flex items-center gap-4 flex-col justify-between md:flex-row sm:grow lg:flex-col xl:flex-row"
+                  class="flex flex-col items-center justify-between gap-4 sm:grow md:flex-row lg:flex-col xl:flex-row"
                 >
                   <button
                     v-if="
@@ -186,23 +186,23 @@ const learningSequenceBorderClass = computed(() => {
         >
           <div
             v-if="circleStore.calcSelfEvaluationStatus(learningUnit) === 'success'"
-            class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-success"
+            class="self-evaluation-success flex items-center gap-4 pb-3 lg:pb-6"
           >
-            <it-icon-smiley-happy class="w-8 h-8 flex-none" data-cy="success" />
+            <it-icon-smiley-happy class="h-8 w-8 flex-none" data-cy="success" />
             <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"
+            class="self-evaluation-fail flex items-center gap-4 pb-3 lg:pb-6"
           >
-            <it-icon-smiley-thinking class="w-8 h-8 flex-none" data-cy="fail" />
+            <it-icon-smiley-thinking class="h-8 w-8 flex-none" data-cy="fail" />
             <div>{{ $t("selfEvaluation.selfEvaluationNo") }}</div>
           </div>
           <div
             v-else
-            class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-unknown"
+            class="self-evaluation-unknown flex items-center gap-4 pb-3 lg:pb-6"
           >
-            <it-icon-smiley-neutral class="w-8 h-8 flex-none" data-cy="unknown" />
+            <it-icon-smiley-neutral class="h-8 w-8 flex-none" data-cy="unknown" />
             <div>{{ $t("selfEvaluation.selfEvaluation") }}</div>
           </div>
         </div>

client/src/components/learningPath/SelfEvaluation.vue

@@ -61,10 +61,10 @@ function handleBack() {
           </h2>
 
           <div
-            class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-8 lg:gap-12"
+            class="mt-4 flex flex-col justify-between gap-8 lg:mt-8 lg:flex-row lg:gap-12"
           >
             <button
-              class="flex-1 inline-flex items-center text-left p-4 border"
+              class="inline-flex flex-1 items-center border p-4 text-left"
               :class="{
                 'border-green-500': currentQuestion.completion_status === 'success',
                 'border-2': currentQuestion.completion_status === 'success',
@@ -72,11 +72,11 @@ function handleBack() {
               data-cy="success"
               @click="circleStore.markCompletion(currentQuestion, COMPLETION_SUCCESS)"
             >
-              <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
-              <span class="font-bold text-large">{{ $t("selfEvaluation.yes") }}.</span>
+              <it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
+              <span class="text-large font-bold">{{ $t("selfEvaluation.yes") }}.</span>
             </button>
             <button
-              class="flex-1 inline-flex items-center text-left p-4 border"
+              class="inline-flex flex-1 items-center border p-4 text-left"
               :class="{
                 'border-orange-500':
                   currentQuestion.completion_status === COMPLETION_FAILURE,
@@ -85,8 +85,8 @@ function handleBack() {
               data-cy="fail"
               @click="circleStore.markCompletion(currentQuestion, 'fail')"
             >
-              <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
-              <span class="font-bold text-xl">{{ $t("selfEvaluation.no") }}.</span>
+              <it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
+              <span class="text-xl font-bold">{{ $t("selfEvaluation.no") }}.</span>
             </button>
           </div>
 

client/src/components/learningPath/blocks/VideoBlock.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-medium">
     <iframe
-      class="mt-8 w-full aspect-video"
+      class="mt-8 aspect-video w-full"
       :src="value.url"
       :title="content.title"
       frameborder="0"

client/src/components/mediaLibrary/LinkCard.vue

@@ -18,10 +18,10 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="border flex flex-col lg:flex-row p-4 items-center">
+  <div class="flex flex-col items-center border p-4 lg:flex-row">
     <img class="mr-6" :src="icon" alt="" />
     <div>
-      <h4 class="mb-2 text-bold">{{ title }}</h4>
+      <h4 class="text-bold mb-2">{{ title }}</h4>
       <p class="mb-2">{{ description }}</p>
       <MediaLink :to="url" :blank="openWindow" class="link">
         <span class="inline">{{ linkText }}</span>

client/src/components/mediaLibrary/OverviewCard.vue

@@ -13,13 +13,13 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="bg-white lg:pb-8 pb-4 p-8 flex justify-between flex-col lg:flex-row">
+  <div class="flex flex-col justify-between bg-white p-8 pb-4 lg:flex-row lg:pb-8">
     <div class="mb-4 lg:mb-0">
       <h3 class="mb-4">{{ title }}</h3>
       <p class="mb-4">{{ description }}</p>
       <router-link
         :to="link"
-        class="btn-text inline-flex items-center pl-0 pr-3 py-2"
+        class="btn-text inline-flex items-center py-2 pl-0 pr-3"
         :data-cy="`${title}-link`"
       >
         <span class="inline">{{ call2Action }}</span>
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     <div
       v-if="icon"
       :class="[`bg-${icon}`]"
-      class="lg:block bg-contain bg-no-repeat bg-left lg:bg-right h-32 lg:w-2/6 -ml-8 lg:ml-0 lg:-mr-8"
+      class="-ml-8 h-32 bg-contain bg-left bg-no-repeat lg:ml-0 lg:-mr-8 lg:block lg:w-2/6 lg:bg-right"
     ></div>
   </div>
 </template>

client/src/components/ui/HorizontalBarChart.vue

@@ -0,0 +1,31 @@
+<template>
+  <QuestionSummary :title="props.title" :text="props.text">
+    <div
+      v-for="{ label, percentage } in props.items"
+      :key="label"
+      class="mb-6 flex flex-row flex-wrap items-center gap-3 gap-y-2"
+    >
+      <div class="w-full text-base font-bold">{{ label }}</div>
+      <div
+        class="h-8 bg-sky-500"
+        :style="{ width: `${percentage * 100 * 0.8}%` }"
+      ></div>
+      <div class="text-sm">{{ percentage * 100 }}%</div>
+    </div>
+  </QuestionSummary>
+</template>
+
+<script setup lang="ts">
+import QuestionSummary from "@/components/ui/QuestionSummary.vue";
+
+export interface ChartItem {
+  percentage: number;
+  label: string;
+}
+
+const props = defineProps<{
+  title: string;
+  text: string;
+  items: ChartItem[];
+}>();
+</script>

client/src/components/ui/ItCheckbox.vue

@@ -37,10 +37,10 @@ const input = (e: Event) => {
       'opacity-50': disabled,
       'cursor-not-allowed': disabled,
     }"
-    class="cursor-pointer inline-flex"
+    class="inline-flex cursor-pointer"
   >
     <label
-      class="block bg-contain disabled:opacity-50 cy-checkbox cy-checkbox-checked bg-no-repeat pl-8 h-8 flex items-center"
+      class="cy-checkbox cy-checkbox-checked block flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50"
       :class="
         checked
           ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'

client/src/components/ui/ItCheckboxGroup.vue

@@ -3,8 +3,8 @@
     :model-value="modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
-    <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>
-    <div class="flex flex-col justify-start align-items-start justify-items-start">
+    <h2 class="mb-12 block text-5xl font-bold leading-normal">{{ label }}</h2>
+    <div class="align-items-start flex flex-col justify-start justify-items-start">
       <ItCheckbox
         v-for="item in items"
         :key="item.value"

client/src/components/ui/ItDropdown.vue

@@ -30,13 +30,13 @@ const emit = defineEmits<{
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        class="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="w-max-full absolute mt-2 w-56 origin-top-right divide-y divide-gray-500 bg-white px-6 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="[align === 'left' ? 'left-0' : 'right-0']"
       >
         <div v-for="item in listItems" :key="item.title" class="px-1 py-1">
           <MenuItem>
             <button
-              class="text-black group flex w-full items-center px-0 py-2 text-sm"
+              class="group flex w-full items-center px-0 py-2 text-sm text-black"
               @click="$emit('select', item.data)"
             >
               <span class="inline-block pr-2">

client/src/components/ui/ItDropdownSelect.vue

@@ -34,16 +34,16 @@ const dropdownSelected = computed<DropdownSelectable>({
 
 <template>
   <Listbox v-model="dropdownSelected" as="div">
-    <div class="mt-1 relative w-full">
+    <div class="relative mt-1 w-full">
       <ListboxButton
-        class="bg-white relative w-full border pl-5 pr-10 py-3 text-left cursor-default font-bold flex flex-row items-center"
+        class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left font-bold"
       >
         <span v-if="dropdownSelected.iconName" class="mr-4">
           <component :is="dropdownSelected.iconName"></component>
         </span>
         <span class="block truncate">{{ dropdownSelected.name }}</span>
         <span
-          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
         >
           <it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
         </span>
@@ -55,7 +55,7 @@ const dropdownSelected = computed<DropdownSelectable>({
         leave-to-class="opacity-0"
       >
         <ListboxOptions
-          class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+          class="absolute z-10 mt-1 max-h-60 w-full overflow-auto bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
         >
           <ListboxOption
             v-for="item in items"
@@ -66,8 +66,8 @@ const dropdownSelected = computed<DropdownSelectable>({
           >
             <li
               :class="[
-                active ? 'text-white bg-blue-900' : 'text-black',
-                'cursor-default select-none relative py-2 pl-3 pr-9',
+                active ? 'bg-blue-900 text-white' : 'text-black',
+                'relative cursor-default select-none py-2 pl-3 pr-9',
               ]"
               class="flex flex-row items-center"
             >
@@ -85,7 +85,7 @@ const dropdownSelected = computed<DropdownSelectable>({
 
               <span
                 v-if="dropdownSelected"
-                class="text-blue-900 absolute inset-y-0 right-0 flex items-center pr-4"
+                class="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-900"
               >
                 <it-icon-check v-if="selected" class="h-5 w-5" aria-hidden="true" />
               </span>

client/src/components/ui/ItFullScreenModal.vue

@@ -39,11 +39,11 @@ const removeNoScroll = () => {
     <div
       v-if="show"
       data-cy="full-screen-modal"
-      class="px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full"
+      class="fixed top-0 h-full w-full overflow-y-scroll bg-white px-4 py-16 lg:px-16 lg:py-24"
     >
       <button
         type="button"
-        class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
+        class="absolute right-4 top-4 h-8 w-8 cursor-pointer"
         @click="closeModal"
       >
         <it-icon-close></it-icon-close>

client/src/components/ui/ItListRow.vue

@@ -2,7 +2,7 @@
 
 <template>
   <li
-    class="py-4 leading-[45px] border-b border-gray-500 last:border-0 flex flex-row justify-between"
+    class="flex flex-row justify-between border-b border-gray-500 py-4 leading-[45px] last:border-0"
   >
     <div class="flex flex-row">
       <slot name="left"></slot>

client/src/components/ui/ItModal.vue

@@ -22,11 +22,11 @@ function setIsOpen(value: boolean) {
     <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
     <div class="fixed inset-0 flex items-center justify-center p-4">
       <DialogPanel class="w-full max-w-2xl bg-white px-8 pt-8 pb-4">
-        <DialogTitle class="flex flex-row relative mb-8">
+        <DialogTitle class="relative mb-8 flex flex-row">
           <slot name="title"></slot>
           <button
             type="button"
-            class="w-4 h-4 absolute right-4 cursor-pointer"
+            class="absolute right-4 h-4 w-4 cursor-pointer"
             @click="setIsOpen(false)"
           >
             <it-icon-close></it-icon-close>

client/src/components/ui/ItPersonRow.vue

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

client/src/components/ui/ItProgress.vue

@@ -35,15 +35,15 @@ const notDone = computed(() => {
 </script>
 
 <template>
-  <span class="relative w-full h-2 bg-gray-300 inline-block">
+  <span class="relative inline-block h-2 w-full bg-gray-300">
     <span
       v-if="notDone !== done"
-      class="absolute bg-orange-500 h-full"
+      class="absolute h-full bg-orange-500"
       :style="{ width: `${notDone}%` }"
     ></span>
     <span
       v-if="done > 0"
-      class="absolute bg-green-500 h-full"
+      class="absolute h-full bg-green-500"
       :style="{ width: `${done}%` }"
     ></span>
   </span>

client/src/components/ui/ItRadioGroup.vue

@@ -7,7 +7,7 @@
       {{ label }}
     </RadioGroupLabel>
     <div
-      class="flex flex-col md:flex-row justify-between align-items-center justify-items-center space-y-6 md:space-y-0 md:space-x-6"
+      class="align-items-center flex flex-col justify-between justify-items-center space-y-6 md:flex-row md:space-y-0 md:space-x-6"
     >
       <RadioGroupOption
         v-for="item in items"
@@ -17,7 +17,7 @@
         :value="item.value"
       >
         <div
-          class="py-10 text-xl flex-1 text-center cursor-pointer font-bold ui-checked:bg-sky-500 ui-not-checked:border hover:border-gray-500 hover:bg-gray-200"
+          class="flex-1 cursor-pointer py-10 text-center text-xl font-bold hover:border-gray-500 hover:bg-gray-200 ui-checked:bg-sky-500 ui-not-checked:border"
         >
           <RadioGroupLabel as="span">
             {{ $t(item.name) }}

client/src/components/ui/ItTextarea.vue

@@ -3,7 +3,7 @@
     <h2 class="heading-1 mb-8 block">{{ label }}</h2>
     <textarea
       :value="modelValue"
-      class="w-full border-gray-500 h-40"
+      class="h-40 w-full border-gray-500"
       @input="onInput"
     />
   </div>

client/src/components/ui/RatingScale.vue

@@ -32,7 +32,7 @@
           'grid-in-mid before:left-0 md:grid-in-snd md:before:left-1/2':
             legend.index == 2,
           'hidden before:left-1/2 md:inline-flex md:grid-in-trd': legend.index == 3,
-          'items-end grid-in-fth before:right-0 after:left-0 after:absolute after:top-0 after:h-4 after:w-px after:bg-gray-500 md:before:left-1/2 md:before:right-auto md:after:hidden text-right':
+          'items-end text-right grid-in-fth before:right-0 after:absolute after:left-0 after:top-0 after:h-4 after:w-px after:bg-gray-500 md:before:left-1/2 md:before:right-auto md:after:hidden':
             legend.index == 4,
         }"
         class="legend relative inline-flex flex-col pt-4 before:absolute before:top-0 before:h-4 before:w-px before:bg-gray-500 md:items-center"

client/src/components/ui/VerticalBarChart.vue

@@ -13,7 +13,7 @@
         </span>
       </div>
       <div
-        class="background before:border-t before:border-t-gray-400 before:w-full before:absolute before:top-1/2 relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400"
+        class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400 before:absolute before:top-1/2 before:w-full before:border-t before:border-t-gray-400"
       ></div>
       <div
         class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"

client/src/pages/DashboardPage.vue

@@ -24,14 +24,14 @@ onMounted(async () => {
 <template>
   <div class="flex flex-col lg:flex-row">
     <main class="grow bg-gray-200 lg:order-2">
-      <div class="mt-14 container-medium">
+      <div class="container-medium mt-14">
         <h1 data-cy="welcome-message">
           {{ $t("dashboard.welcome", { name: userStore.first_name }) }}
         </h1>
         <div v-if="courseSessionsStore.courseSessions.length > 0" class="mb-14">
           <h2 class="mt-12 mb-3">Kurse</h2>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
+          <div class="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2">
             <div
               v-for="courseSession in courseSessionsStore.coursesFromCourseSessions"
               :key="courseSession.id"
@@ -55,7 +55,7 @@ onMounted(async () => {
         </div>
         <div>
           <h3 class="mb-6">Termine</h3>
-          <ul class="p-4 bg-white">
+          <ul class="bg-white p-4">
             <li class="flex flex-row border-b py-4">
               <p class="text-bold w-60">Prüfung</p>
               <p class="grow">Mo, 14. November 2022, 18 Uhr</p>
@@ -75,10 +75,10 @@ onMounted(async () => {
         </div>
       </div>
     </main>
-    <aside class="lg:w-[343px] m-8 lg:order-1">
-      <div class="mx-auto text-center pb-6 mb-6 border-b">
+    <aside class="m-8 lg:order-1 lg:w-[343px]">
+      <div class="mx-auto mb-6 border-b pb-6 text-center">
         <img
-          class="rounded-full inline-block max-w-[150px] mb-4"
+          class="mb-4 inline-block max-w-[150px] rounded-full"
           :src="userStore.avatar_url"
         />
         <div>
@@ -87,16 +87,16 @@ onMounted(async () => {
           <p class="mb-4">{{ employer() }}</p>
           <p>
             Profil bearbeiten
-            <it-icon-pen class="w-4 h-4"></it-icon-pen>
+            <it-icon-pen class="h-4 w-4"></it-icon-pen>
           </p>
         </div>
       </div>
       <div>
-        <div class="flex flex-row items-center mb-4 justify-start">
+        <div class="mb-4 flex flex-row items-center justify-start">
           <div class="w-20">
-            <div class="rounded-full bg-sky-200 h-12 w-12">
+            <div class="h-12 w-12 rounded-full bg-sky-200">
               <it-icon-certificate
-                class="h-6 w-6 block mx-auto pt-2"
+                class="mx-auto block h-6 w-6 pt-2"
               ></it-icon-certificate>
             </div>
           </div>
@@ -105,14 +105,14 @@ onMounted(async () => {
       </div>
       <div>
         <div>
-          <div class="flex flex-row justify-start mb-4">
+          <div class="mb-4 flex flex-row justify-start">
             <p class="text-bold w-20">2024</p>
             <div>
               <p class="text-bold">Check-up</p>
               <p>Vermittler/-in VBV</p>
               <p>
                 Gültig bis:
-                <span class="text-green-500 text-bold">31.12.2026</span>
+                <span class="text-bold text-green-500">31.12.2026</span>
               </p>
             </div>
           </div>

client/src/pages/LoginPage.vue

@@ -18,7 +18,7 @@ const userStore = useUserStore();
 </script>
 
 <template>
-  <main class="lg:px-12 lg:py-12 bg-gray-200">
+  <main class="bg-gray-200 lg:px-12 lg:py-12">
     <div class="container-medium">
       <h1 class="mb-8">Login</h1>
 
@@ -33,23 +33,23 @@ const userStore = useUserStore();
         "
       >
         <div class="mb-4">
-          <label class="block mb-1" for="email">Username</label>
+          <label class="mb-1 block" for="email">Username</label>
           <input
             id="username"
             v-model="state.username"
             type="text"
             name="username"
-            class="py-2 px-3 border mt-1 block w-96 max-w-full"
+            class="mt-1 block w-96 max-w-full border py-2 px-3"
           />
         </div>
         <div class="mb-4">
-          <label class="block mb-1" for="password">Password</label>
+          <label class="mb-1 block" for="password">Password</label>
           <input
             id="password"
             v-model="state.password"
             type="password"
             name="password"
-            class="py-2 px-3 border mt-1 block w-96 max-w-full"
+            class="mt-1 block w-96 max-w-full border py-2 px-3"
           />
         </div>
 

client/src/pages/NotificationsPage.vue

@@ -48,14 +48,14 @@ const fakeData = {
           >
             <template #left>
               <img
-                class="h-[45px] rounded-full mr-2"
+                class="mr-2 h-[45px] rounded-full"
                 :src="notification.source.avatar"
               />
               <div class="ml-1">
                 <p class="leading-6">
                   {{ `${notification.source.name} ${notification.title}` }}
                 </p>
-                <p class="leading-6 text-sm text-gray-800">
+                <p class="text-sm leading-6 text-gray-800">
                   {{ `${notification.source.title} &hyphen; ${notification.ago}` }}
                 </p>
               </div>
@@ -63,9 +63,9 @@ const fakeData = {
             <template #link>
               <div
                 v-if="notification.unread"
-                class="flex items-center h-[45px] flex-row"
+                class="flex h-[45px] flex-row items-center"
               >
-                <div class="w-[10px] h-[10px] bg-blue-500 rounded-full"></div>
+                <div class="h-[10px] w-[10px] rounded-full bg-blue-500"></div>
               </div>
             </template>
           </ItListRow>

client/src/pages/ProfilePage.vue

@@ -17,20 +17,20 @@ function setActiveClasses(isActive: boolean) {
           <span>{{ $t("general.back") }}</span>
         </router-link>
       </nav>
-      <header class="flex flex-row items-center mb-12">
-        <img class="w-44 h-44 rounded-full mr-8" src="https://picsum.photos/200" />
+      <header class="mb-12 flex flex-row items-center">
+        <img class="mr-8 h-44 w-44 rounded-full" src="https://picsum.photos/200" />
         <div>
           <h1 class="mb-2">Daniel Baumgartner</h1>
           <p class="mb-2">d.baumgartner@gmail.com</p>
-          <p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]">
+          <p class="bg-message bg-[center_left_-4px] bg-no-repeat pl-6">
             {{ $t("messages.sendMessage") }}
           </p>
         </div>
       </header>
       <main>
-        <div class="bg-white w-full mb-8">ich bin ein Lernpfad</div>
-        <ul class="flex flex-row border-b-2 mb-5">
-          <li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)">
+        <div class="mb-8 w-full bg-white">ich bin ein Lernpfad</div>
+        <ul class="mb-5 flex flex-row border-b-2">
+          <li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
             <button>{{ $t("competences.competences") }}</button>
           </li>
           <li class="mr-12">

client/src/pages/StyleGuidePage.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
-import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
+import HorizontalBarChart, {
+  type ChartItem,
+} from "@/components/ui/HorizontalBarChart.vue";
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
 import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
@@ -9,6 +11,7 @@ import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
 import ItTextarea from "@/components/ui/ItTextarea.vue";
 import RatingScale from "@/components/ui/RatingScale.vue";
+import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
 import logger from "loglevel";
 import { reactive, ref } from "vue";
 
@@ -99,6 +102,25 @@ const sourceItems = [
 
 const textValue = ref("abc");
 
+const barChartItems: ChartItem[] = [
+  {
+    percentage: 1,
+    label: "100%",
+  },
+  {
+    percentage: 0.9,
+    label: "Internet",
+  },
+  {
+    percentage: 0.1,
+    label: "Anderes",
+  },
+  {
+    percentage: 0,
+    label: "Anderes",
+  },
+];
+
 function log(data: any) {
   logger.info(data);
 }
@@ -108,7 +130,7 @@ function log(data: any) {
   <main class="px-8 py-4">
     <h1>Style Guide</h1>
 
-    <div class="border-b text-gray-700 pb-2 mt-12">
+    <div class="mt-12 border-b pb-2 text-gray-700">
       <h2 class="heading-1">Icons</h2>
     </div>
 
@@ -117,7 +139,7 @@ function log(data: any) {
       Use them like &lt;it-icon-message/&gt;
     </p>
 
-    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
+    <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
       <div class="inline-flex flex-col">
         message
         <it-icon-message class="it-icon" />
@@ -169,7 +191,7 @@ function log(data: any) {
       </div>
     </div>
 
-    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
+    <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
       <div class="inline-flex flex-col">
         ls-apply
         <it-icon-ls-apply />
@@ -206,7 +228,7 @@ function log(data: any) {
       </div>
     </div>
 
-    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
+    <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
       <div class="inline-flex flex-col">
         lc-assignment
         <it-icon-lc-assignment />
@@ -253,7 +275,7 @@ function log(data: any) {
       </div>
     </div>
 
-    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
+    <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
       <div class="inline-flex flex-col">
         smiley-happy
         <it-icon-smiley-happy />
@@ -270,55 +292,55 @@ function log(data: any) {
       </div>
     </div>
 
-    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
+    <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
       <div class="inline-flex flex-col text-orange-500">
         message big
-        <it-icon-message class="w-16 h-16 text-orange-500" />
+        <it-icon-message class="h-16 w-16 text-orange-500" />
       </div>
 
       <div class="inline-flex flex-col text-blue-400">
         ls-network big
-        <it-icon-ls-network class="w-16 h-16" />
+        <it-icon-ls-network class="h-16 w-16" />
       </div>
 
       <div class="inline-flex flex-col text-red-500">
         close small
-        <it-icon-close class="w-6 h-6" />
+        <it-icon-close class="h-6 w-6" />
       </div>
 
-      <div class="inline-flex flex-col text-white bg-blue-900">
+      <div class="inline-flex flex-col bg-blue-900 text-white">
         vbv
-        <it-icon-vbv class="w-24 h-24" />
+        <it-icon-vbv class="h-24 w-24" />
       </div>
 
       <div class="inline-flex flex-col">
         vbv-pos
-        <it-icon-vbv-pos class="w-24 h-24" />
+        <it-icon-vbv-pos class="h-24 w-24" />
       </div>
     </div>
 
-    <div class="border-b text-gray-700 pb-2 mt-8">
+    <div class="mt-8 border-b pb-2 text-gray-700">
       <h2 class="heading-1">Colors</h2>
     </div>
     <table class="text-gray-700">
-      <tr class="h-12 md:h-18 lg:h-24">
+      <tr class="md:h-18 h-12 lg:h-24">
         <td></td>
         <td v-for="value in colorValues" :key="value" class="text-center">
           {{ value }}
         </td>
       </tr>
-      <tr v-for="color in colors" :key="color" class="h-12 md:h-18 lg:h-24">
+      <tr v-for="color in colors" :key="color" class="md:h-18 h-12 lg:h-24">
         <td>{{ color }}</td>
         <td v-for="value in colorValues" :key="value" class="px-2">
           <div
-            class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 rounded-full"
+            class="h-8 w-8 rounded-full md:h-12 md:w-12 lg:h-16 lg:w-16"
             :class="[colorBgClass(color, value)]"
           ></div>
         </td>
       </tr>
     </table>
 
-    <div class="border-b text-gray-700 pb-2 mt-12">
+    <div class="mt-12 border-b pb-2 text-gray-700">
       <h2 class="heading-1">Typography</h2>
     </div>
 
@@ -328,20 +350,20 @@ function log(data: any) {
 
     <div class="mt-8 text-xl font-bold">Text Large Bold</div>
     <div class="mt-8 text-xl">Text Large</div>
-    <div class="mt-8 link text-xl">Link Large</div>
+    <div class="link mt-8 text-xl">Link Large</div>
     <div class="mt-8 font-bold">Text Bold</div>
     <div class="mt-8">Text</div>
-    <div class="mt-8 link">Link</div>
+    <div class="link mt-8">Link</div>
     <div class="mt-8 text-sm">Text Small</div>
-    <div class="mt-8 link text-sm">Link Small</div>
+    <div class="link mt-8 text-sm">Link Small</div>
 
-    <div class="border-b text-gray-700 pb-2 mt-12">
+    <div class="mt-12 border-b pb-2 text-gray-700">
       <h2 class="heading-1">Components</h2>
     </div>
 
     <h2 class="mt-8 mb-8">Buttons</h2>
 
-    <div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
+    <div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
       <button class="btn-primary">Primary</button>
       <button class="btn-secondary">Secondary</button>
       <button class="btn-blue">Blue</button>
@@ -349,18 +371,18 @@ function log(data: any) {
       <a class="btn-primary inline-block" href="/">Primary Link</a>
     </div>
 
-    <div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
+    <div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
       <button disabled class="btn-primary">Primary disabled</button>
       <button disabled class="btn-secondary">Secondary disabled</button>
       <button disabled class="btn-blue">Blue disabled</button>
     </div>
 
     <div
-      class="flex flex-col gap-4 flex-wrap lg:flex-row content-center lg:justify-start mb-16"
+      class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row lg:justify-start"
     >
       <button
         type="button"
-        class="btn-primary inline-flex items-center p-3 rounded-full"
+        class="btn-primary inline-flex items-center rounded-full p-3"
       >
         <it-icon-message class="h-5 w-5"></it-icon-message>
       </button>
@@ -385,7 +407,7 @@ function log(data: any) {
 
     <ItDropdownSelect
       v-model="state.dropdownSelected"
-      class="w-full lg:w-96 mt-4 lg:mt-0"
+      class="mt-4 w-full lg:mt-0 lg:w-96"
       :items="state.dropdownValues"
     ></ItDropdownSelect>
     {{ state.dropdownSelected }}
@@ -486,6 +508,7 @@ function log(data: any) {
       <VerticalBarChart title="Frage X" text="Fragentext" :ratio="0.2" />
       <VerticalBarChart title="Frage X" text="Fragentext" :ratio="2" />
       <VerticalBarChart title="Frage X" text="Fragentext" :ratio="0" />
+      <HorizontalBarChart title="Frage X" text="Fragentext" :items="barChartItems" />
     </div>
   </main>
 </template>

client/src/pages/cockpit/CockpitIndexPage.vue

@@ -73,16 +73,16 @@ function setActiveClasses(translationKey: string) {
 <template>
   <div class="bg-gray-200">
     <div class="container-large">
-      <div class="flex lg:flex-row items-center mb-9">
+      <div class="mb-9 flex items-center lg:flex-row">
         <h1 class="heading-3">{{ $t("general.circles") }}:</h1>
-        <ul class="flex flex-row leading-7 text-base font-bold ml-4">
+        <ul class="ml-4 flex flex-row text-base font-bold leading-7">
           <li
             v-for="circle in circles"
             :key="circle.translation_key"
             class="mr-4 last:mr-0"
           >
             <button
-              class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0"
+              class="mr-4 rounded-full border-2 border-blue-900 px-4 last:mr-0"
               :class="setActiveClasses(circle.translation_key)"
               @click="cockpitStore.toggleCourseSelection(circle.translation_key)"
             >
@@ -92,10 +92,10 @@ function setActiveClasses(translationKey: string) {
         </ul>
       </div>
       <!-- Status -->
-      <div class="grid gap-4 grid-rows-3 lg:grid-rows-none lg:grid-cols-3 mb-4">
-        <div class="px-6 py-5 bg-white">
+      <div class="mb-4 grid grid-rows-3 gap-4 lg:grid-cols-3 lg:grid-rows-none">
+        <div class="bg-white px-6 py-5">
           <h1
-            class="bg-assignment bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
+            class="heading-3 mb-4 bg-assignment bg-60 bg-no-repeat pl-[68px] leading-[60px]"
           >
             {{ $t("general.transferTask", 2) }}
           </h1>
@@ -104,9 +104,9 @@ function setActiveClasses(translationKey: string) {
           </div>
           <p>{{ $t("cockpit.tasksDone") }}</p>
         </div>
-        <div class="px-6 py-5 bg-white">
+        <div class="bg-white px-6 py-5">
           <h1
-            class="bg-feedback bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
+            class="heading-3 mb-4 bg-feedback bg-60 bg-no-repeat pl-[68px] leading-[60px]"
           >
             {{ $t("general.feedback", 2) }}
           </h1>
@@ -115,9 +115,9 @@ function setActiveClasses(translationKey: string) {
           </div>
           <p>{{ $t("cockpit.feedbacksDone") }}</p>
         </div>
-        <div class="px-6 py-5 bg-white">
+        <div class="bg-white px-6 py-5">
           <h1
-            class="bg-test bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
+            class="heading-3 mb-4 bg-test bg-60 bg-no-repeat pl-[68px] leading-[60px]"
           >
             {{ $t("general.examResult", 2) }}
           </h1>
@@ -168,17 +168,17 @@ function setActiveClasses(translationKey: string) {
                     </div>
                   </div>
                   <div class="ml-4 flex flex-row items-center">
-                    <div class="flex flex-row items-center mr-6">
+                    <div class="mr-6 flex flex-row items-center">
                       <it-icon-smiley-thinking
-                        class="w-8 h-8 mr-2 inline-block"
+                        class="mr-2 inline-block h-8 w-8"
                       ></it-icon-smiley-thinking>
                       <p class="text-bold inline-block">
                         {{ userCountStatus(csu.user_id).fail }}
                       </p>
                     </div>
-                    <li class="flex flex-row items-center mr-6">
+                    <li class="mr-6 flex flex-row items-center">
                       <it-icon-smiley-happy
-                        class="w-8 h-8 mr-2 inline-block"
+                        class="mr-2 inline-block h-8 w-8"
                       ></it-icon-smiley-happy>
                       <p class="text-bold inline-block">
                         {{ userCountStatus(csu.user_id).success }}
@@ -186,7 +186,7 @@ function setActiveClasses(translationKey: string) {
                     </li>
                     <li class="flex flex-row items-center">
                       <it-icon-smiley-neutral
-                        class="w-8 h-8 mr-2 inline-block"
+                        class="mr-2 inline-block h-8 w-8"
                       ></it-icon-smiley-neutral>
                       <p class="text-bold inline-block">
                         {{ userCountStatus(csu.user_id).unknown }}

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -50,28 +50,28 @@ function setActiveClasses(isActive: boolean) {
           <span>{{ $t("general.back") }}</span>
         </router-link>
       </nav>
-      <header class="flex flex-row items-center mb-12">
-        <img class="w-44 h-44 rounded-full mr-8" :src="user.avatar_url" />
+      <header class="mb-12 flex flex-row items-center">
+        <img class="mr-8 h-44 w-44 rounded-full" :src="user.avatar_url" />
         <div>
           <h1 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h1>
           <p class="mb-2">{{ user.email }}</p>
-          <p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]">
+          <p class="bg-message bg-[center_left_-4px] bg-no-repeat pl-6">
             {{ $t("messages.sendMessage") }}
           </p>
         </div>
       </header>
       <main>
-        <div v-if="learningPath" class="bg-white w-full pt-8 pb-4 mb-8">
+        <div v-if="learningPath" class="mb-8 w-full bg-white pt-8 pb-4">
           <LearningPathDiagram
-            class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
+            class="mx-auto max-h-[90px] w-full max-w-[1920px] px-4 lg:max-h-[380px]"
             diagram-type="horizontal"
             :learning-path="learningPath"
             :postfix="userId"
             :profile-user-id="userId"
           ></LearningPathDiagram>
         </div>
-        <ul class="flex flex-row border-b-2 mb-5">
-          <li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)">
+        <ul class="mb-5 flex flex-row border-b-2">
+          <li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
             <button>{{ $t("competences.competences") }}</button>
           </li>
           <li class="mr-12">
@@ -87,12 +87,12 @@ function setActiveClasses(isActive: boolean) {
         <div>
           <ul
             v-if="competenceStore.competenceProfilePage(user.user_id)"
-            class="px-8 bg-white"
+            class="bg-white px-8"
           >
             <li
               v-for="competence in competenceStore.competences(user.user_id)"
               :key="competence.id"
-              class="p-8 border-b last:border-0 border-gray-500"
+              class="border-b border-gray-500 p-8 last:border-0"
             >
               <CompetenceDetail
                 :competence="competence"

client/src/pages/competence/CompetenceIndexPage.vue

@@ -56,25 +56,25 @@ const countStatus = computed(() => {
   <div class="container-large lg:mt-4">
     <div
       v-if="competenceStore.competenceProfilePage()"
-      class="flex flex-col lg:flex-row lg:items-center justify-between mb-10"
+      class="mb-10 flex flex-col justify-between lg:flex-row lg:items-center"
     >
       <h1>{{ $t("competences.title") }}</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
-        class="w-full lg:w-96 mt-4 lg:mt-0"
+        class="mt-4 w-full lg:mt-0 lg:w-96"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>
-    <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
+    <div class="l mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
       <div>
-        <h3 class="pb-4 border-b">{{ $t("competences.lastImprovements") }}</h3>
+        <h3 class="border-b pb-4">{{ $t("competences.lastImprovements") }}</h3>
         <ul>
           <li
             v-for="competence in lastUpdatedCompetences"
             :key="competence.id"
-            class="py-4 flex flex-col lg:flex-row lg:items-center border-b last:mb-8"
+            class="flex flex-col border-b py-4 last:mb-8 lg:flex-row lg:items-center"
           >
-            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
+            <p class="mb-4 inline-block lg:mb-0 lg:mr-5 lg:w-1/4">
               {{ competence.competence_id }} {{ competence.title }}
             </p>
             <ItProgress
@@ -88,45 +88,45 @@ const countStatus = computed(() => {
         </ul>
         <router-link
           :to="`${competenceStore.competenceProfilePage()?.frontend_url}/competences`"
-          class="btn-text inline-flex items-center pl-0 py-2"
+          class="btn-text inline-flex items-center py-2 pl-0"
         >
           <span>{{ $t("competences.showAll") }}</span>
           <it-icon-arrow-right></it-icon-arrow-right>
         </router-link>
       </div>
     </div>
-    <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
-      <h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0">
+    <div class="l mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
+      <h3 class="mb-4 border-b pb-4 lg:border-0 lg:pb-0">
         {{ $t("competences.assessment") }}
       </h3>
       <ul
-        class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
+        class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
       >
         <li
-          class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
+          class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
         >
-          <h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.no") }}»</h5>
+          <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
           <div class="flex flex-row items-center">
-            <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
-            <p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p>
+            <it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
+            <p class="ml-4 inline-block text-7xl font-bold">{{ countStatus.fail }}</p>
           </div>
         </li>
         <li
-          class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
+          class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
         >
-          <h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.yes") }}»</h5>
+          <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
           <div class="flex flex-row items-center">
-            <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
-            <p class="text-7xl font-bold inline-block ml-4">
+            <it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
+            <p class="ml-4 inline-block text-7xl font-bold">
               {{ countStatus.success }}
             </p>
           </div>
         </li>
-        <li class="pb-4 lg:pb-0 border-b lg:border-b-0 lg:mb-0flex-1">
-          <h5 class="text-gray-700 mb-4">{{ $t("competences.notAssessed") }}</h5>
+        <li class="lg:mb-0flex-1 border-b pb-4 lg:border-b-0 lg:pb-0">
+          <h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
           <div class="flex flex-row items-center">
-            <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
-            <p class="text-7xl font-bold inline-block ml-4">
+            <it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
+            <p class="ml-4 inline-block text-7xl font-bold">
               {{ countStatus.unknown }}
             </p>
           </div>
@@ -134,7 +134,7 @@ const countStatus = computed(() => {
       </ul>
       <router-link
         :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
-        class="btn-text inline-flex items-center pl-0 py-2"
+        class="btn-text inline-flex items-center py-2 pl-0"
       >
         <span>{{ $t("competences.showAll") }}</span>
         <it-icon-arrow-right></it-icon-arrow-right>
@@ -142,17 +142,17 @@ const countStatus = computed(() => {
     </div>
     <div
       v-if="failedCriteria.length > 0"
-      class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8"
+      class="l mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8"
     >
-      <div class="border-b flex flex-row items-center pb-4 mb-4">
-        <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
+      <div class="mb-4 flex flex-row items-center border-b pb-4">
+        <it-icon-smiley-thinking class="mr-5 h-11 w-11"></it-icon-smiley-thinking>
         <h3>«{{ $t("selfEvaluation.no") }}»</h3>
       </div>
       <ul class="mb-6">
         <li
           v-for="criteria in failedCriteria"
           :key="criteria.id"
-          class="mb-4 pb-4 border-b"
+          class="mb-4 border-b pb-4"
         >
           <PerformanceCriteriaRow
             :criteria="criteria"
@@ -162,7 +162,7 @@ const countStatus = computed(() => {
       </ul>
       <router-link
         :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
-        class="btn-text inline-flex items-center pl-0 py-2"
+        class="btn-text inline-flex items-center py-2 pl-0"
       >
         <span>{{ $t("competences.showAll") }}</span>
         <it-icon-arrow-right></it-icon-arrow-right>

client/src/pages/competence/CompetenceListPage.vue

@@ -25,11 +25,11 @@ const competenceStore = useCompetenceStore();
         <span>{{ $t("general.back") }}</span>
       </router-link>
     </nav>
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+    <div class="mb-10 flex flex-col items-center justify-between lg:flex-row">
       <h1>Kompetenzen</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
-        class="w-full lg:w-96 mt-4 lg:mt-0"
+        class="mt-4 w-full lg:mt-0 lg:w-96"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>
@@ -37,7 +37,7 @@ const competenceStore = useCompetenceStore();
       <li
         v-for="competence in competenceStore.competences()"
         :key="competence.id"
-        class="bg-white p-8 mb-8"
+        class="mb-8 bg-white p-8"
       >
         <CompetenceDetail
           :competence="competence"

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -67,24 +67,24 @@ function updateActiveState(status: CourseCompletionStatus) {
         <span>zurück</span>
       </router-link>
     </nav>
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-4 lg:mb-10">
+    <div class="mb-4 flex flex-col items-center justify-between lg:mb-10 lg:flex-row">
       <h1>Einschätzungen</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
-        class="w-full lg:w-96 mt-4 lg:mt-0"
+        class="mt-4 w-full lg:mt-0 lg:w-96"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
-      <div class="lg:hidden w-full">
+      <div class="w-full lg:hidden">
         <ItDropdownSelect
           v-model="activeMenuItem"
-          class="w-full lg:w-96 mt-4 lg:mt-0"
+          class="mt-4 w-full lg:mt-0 lg:w-96"
           :items="mobileMenuItems"
         ></ItDropdownSelect>
       </div>
     </div>
     <div class="bg-white p-8">
       <div
-        class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4 hidden lg:block justify-between"
+        class="mb-4 flex hidden flex-col justify-between border-b pb-4 lg:block lg:flex-row lg:items-center"
       >
         <button
           v-for="item in mobileMenuItems"
@@ -93,11 +93,11 @@ function updateActiveState(status: CourseCompletionStatus) {
             'bg-gray-200': activeMenuItem.id === item.id,
             'mr-6': item.id !== 'unknown',
           }"
-          class="py-4 px-2 mr-6 inline-block"
+          class="mr-6 inline-block py-4 px-2"
           @click="updateActiveState(item.id)"
         >
           <div class="flex flex-row items-center">
-            <span class="inline-block mr-2">{{ item.name }}</span>
+            <span class="mr-2 inline-block">{{ item.name }}</span>
             <component :is="item.iconName"></component>
           </div>
         </button>
@@ -106,7 +106,7 @@ function updateActiveState(status: CourseCompletionStatus) {
         <li
           v-for="criteria in shownCriteria"
           :key="criteria.id"
-          class="mb-4 pb-4 border-b"
+          class="mb-4 border-b pb-4"
         >
           <PerformanceCriteriaRow
             :criteria="criteria"

client/src/pages/competence/SinglePerformanceCriteriaPage.vue

@@ -55,7 +55,7 @@ findCriteria();
 </script>
 
 <template>
-  <div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white">
+  <div v-if="competencePage" class="absolute top-0 bottom-0 w-full bg-white">
     <LearningContentContainer
       :title="''"
       :next-button-text="$t('general.save')"
@@ -63,14 +63,14 @@ findCriteria();
       @next="router.back()"
     >
       <div v-if="currentQuestion" class="container-medium">
-        <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
+        <div class="mt-4 border p-6 lg:mt-8 lg:p-12">
           <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 flex flex-col justify-between gap-6 lg:mt-8 lg:flex-row">
             <button
-              class="flex-1 inline-flex items-center text-left p-4 border"
+              class="inline-flex flex-1 items-center border p-4 text-left"
               :class="{
                 'border-green-500': currentQuestion.completion_status === 'success',
                 'border-2': currentQuestion.completion_status === 'success',
@@ -78,11 +78,11 @@ findCriteria();
               data-cy="success"
               @click="circleStore.markCompletion(currentQuestion, 'success')"
             >
-              <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
-              <span class="font-bold text-large">{{ $t("selfEvaluation.yes") }}</span>
+              <it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
+              <span class="text-large font-bold">{{ $t("selfEvaluation.yes") }}</span>
             </button>
             <button
-              class="flex-1 inline-flex items-center text-left p-4 border"
+              class="inline-flex flex-1 items-center border p-4 text-left"
               :class="{
                 'border-orange-500': currentQuestion.completion_status === 'fail',
                 'border-2': currentQuestion.completion_status === 'fail',
@@ -90,8 +90,8 @@ findCriteria();
               data-cy="fail"
               @click="circleStore.markCompletion(currentQuestion, 'fail')"
             >
-              <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
-              <span class="font-bold text-xl">{{ $t("selfEvaluation.no") }}</span>
+              <it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
+              <span class="text-xl font-bold">{{ $t("selfEvaluation.no") }}</span>
             </button>
           </div>
         </div>

client/src/pages/learningPath/CirclePage.vue

@@ -144,8 +144,8 @@ async function uploadDocument(data: DocumentUploadData) {
       <div>
         <div class="circle-container bg-gray-200">
           <div v-if="profileUser" class="user-profile">
-            <header class="flex flex-row items-center p-8 bg-white relative shadow-xl">
-              <img class="w-32 h-32 rounded-full mr-8" :src="profileUser.avatar_url" />
+            <header class="relative flex flex-row items-center bg-white p-8 shadow-xl">
+              <img class="mr-8 h-32 w-32 rounded-full" :src="profileUser.avatar_url" />
               <div>
                 <h1 class="mb-2">
                   {{ profileUser.first_name }} {{ profileUser.last_name }}
@@ -163,7 +163,7 @@ async function uploadDocument(data: DocumentUploadData) {
           </div>
           <div class="circle max-w-9xl">
             <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 bg-white">
+              <div class="flex-initial bg-white px-4 py-4 lg:w-128 lg:px-8 lg:pt-4">
                 <router-link
                   v-if="!props.readonly"
                   :to="`/course/${props.courseSlug}/learn`"
@@ -180,10 +180,10 @@ async function uploadDocument(data: DocumentUploadData) {
 
                 <div class="mt-2">{{ $t("circlePage.duration") }}: {{ duration }}</div>
 
-                <div class="w-full mt-8">
+                <div class="mt-8 w-full">
                   <CircleDiagram></CircleDiagram>
                 </div>
-                <div v-if="!props.readonly" class="border-t-2 mt-4 lg:hidden">
+                <div v-if="!props.readonly" class="mt-4 border-t-2 lg:hidden">
                   <div
                     class="mt-4 inline-flex items-center"
                     @click="circleStore.page = 'OVERVIEW'"
@@ -198,11 +198,11 @@ async function uploadDocument(data: DocumentUploadData) {
                 </div>
 
                 <div class="hidden lg:block">
-                  <div class="block border mt-8 p-6">
+                  <div class="mt-8 block border p-6">
                     <h3 class="text-blue-dark">
                       {{ $t("circlePage.circleContentBoxTitle") }}
                     </h3>
-                    <div class="leading-relaxed mt-4">
+                    <div class="mt-4 leading-relaxed">
                       {{ circleStore.circle?.description }}
                     </div>
 
@@ -213,12 +213,12 @@ async function uploadDocument(data: DocumentUploadData) {
                       {{ $t("circlePage.learnMore") }}
                     </button>
                   </div>
-                  <div v-if="!props.readonly" class="block border mt-8 p-6">
+                  <div v-if="!props.readonly" class="mt-8 block border p-6">
                     <h3 class="text-blue-dark">
                       {{ $t("circlePage.documents.title") }}
                     </h3>
                     <div v-if="!courseSessionsStore.canUploadCircleDocuments">
-                      <div class="leading-relaxed mt-4">
+                      <div class="mt-4 leading-relaxed">
                         {{ $t("circlePage.documents.userDescription") }}
                       </div>
                     </div>
@@ -245,17 +245,17 @@ async function uploadDocument(data: DocumentUploadData) {
                             <button
                               v-if="courseSessionsStore.canUploadCircleDocuments"
                               type="button"
-                              class="w-3 h-3 ml-2 leading-6 inline-block cursor-pointer relative top-[1px]"
+                              class="relative top-[1px] ml-2 inline-block h-3 w-3 cursor-pointer leading-6"
                               @click="courseSessionsStore.removeDocument(document.id)"
                             >
-                              <it-icon-close class="w-3 h-3"></it-icon-close>
+                              <it-icon-close class="h-3 w-3"></it-icon-close>
                             </button>
                           </li>
                         </ul>
                       </li>
                     </ol>
                     <div v-if="courseSessionsStore.canUploadCircleDocuments">
-                      <div class="leading-relaxed mt-4">
+                      <div class="mt-4 leading-relaxed">
                         {{ $t("circlePage.documents.expertDescription") }}
                       </div>
                       <button
@@ -267,9 +267,9 @@ async function uploadDocument(data: DocumentUploadData) {
                     </div>
                   </div>
 
-                  <div v-if="!props.readonly" class="expert border mt-8 p-6">
+                  <div v-if="!props.readonly" class="expert mt-8 border p-6">
                     <h3 class="text-blue-dark">{{ $t("circlePage.gotQuestions") }}</h3>
-                    <div class="leading-relaxed mt-4">
+                    <div class="mt-4 leading-relaxed">
                       {{
                         $t("circlePage.contactExpertDescription", {
                           circleName: circleStore.circle?.title,
@@ -280,9 +280,9 @@ async function uploadDocument(data: DocumentUploadData) {
                       v-for="expert in courseSessionsStore.circleExperts"
                       :key="expert.user_id"
                     >
-                      <div class="flex flex-row items-center mt-2 mb-2">
+                      <div class="mt-2 mb-2 flex flex-row items-center">
                         <img
-                          class="h-[45px] rounded-full mr-2"
+                          class="mr-2 h-[45px] rounded-full"
                           :src="expert.avatar_url"
                         />
                         <p class="lg:leading-[45px]">

client/src/pages/learningPath/LearningPathPage.vue

@@ -64,8 +64,8 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
     </Teleport>
 
     <div class="learningpath flex flex-col">
-      <div class="flex flex-col h-max">
-        <div class="bg-white lg:py-8 flex flex-col">
+      <div class="flex h-max flex-col">
+        <div class="flex flex-col bg-white lg:py-8">
           <div class="flex justify-end lg:p-4">
             <button
               class="btn-text inline-flex items-center px-3 lg:py-2"
@@ -77,33 +77,33 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
             </button>
           </div>
           <LearningPathDiagram
-            class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
+            class="mx-auto max-h-[90px] w-full max-w-[1920px] px-4 lg:max-h-[380px]"
             diagram-type="horizontal"
             :learning-path="learningPath"
           ></LearningPathDiagram>
         </div>
 
         <div class="container-large pt-0 lg:pt-4">
-          <h1 data-cy="learning-path-title" class="mt-6 lg:mt-12 mb-6">
+          <h1 data-cy="learning-path-title" class="mt-6 mb-6 lg:mt-12">
             {{ learningPath.title }}
           </h1>
           <div
-            class="bg-white p-4 lg:mb-16 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
+            class="flex flex-col justify-start divide-y divide-gray-500 bg-white p-4 lg:mb-16 lg:flex-row lg:divide-y-0 lg:divide-x"
           >
-            <div class="p-2 lg:p-8 flex-auto">
+            <div class="flex-auto p-2 lg:p-8">
               <h2>
                 {{ $t("learningPathPage.welcomeBack", { name: userStore.first_name }) }}
               </h2>
               <p class="mt-4 text-xl"></p>
             </div>
-            <div v-if="learningPath.nextLearningContent" class="p-4 lg:p-8 flex-2">
+            <div v-if="learningPath.nextLearningContent" class="flex-2 p-4 lg:p-8">
               {{ $t("learningPathPage.nextStep") }}
               <h3>
                 {{ learningPath.nextLearningContent.parentCircle.title }}:
                 {{ learningPath.nextLearningContent.parentLearningSequence?.title }}
               </h3>
               <router-link
-                class="mt-4 btn-blue"
+                class="btn-blue mt-4"
                 :to="createContinueUrl(learningPath)[0]"
                 data-cy="lp-continue-button"
                 translate

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -61,7 +61,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
 <template>
   <div
     v-if="mediaCategory"
-    class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
+    class="fixed top-0 h-full w-full overflow-y-scroll bg-white"
   >
     <div class="bg-gray-200 pb-4 lg:pb-12">
       <div class="container-large">
@@ -74,9 +74,9 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
             <span>{{ $t("general.back") }}</span>
           </router-link>
         </nav>
-        <div class="flex md:flex-col lg:flex-row justify-between">
+        <div class="flex justify-between md:flex-col lg:flex-row">
           <div class="lg:w-6/12">
-            <h3 class="font-normal text-large text-gray-900 mb-3">
+            <h3 class="text-large mb-3 font-normal text-gray-900">
               {{ $t("mediaLibrary.handlungsfelder.title", 1) }}
             </h3>
             <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
@@ -84,7 +84,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
           </div>
           <div>
             <img
-              class="hidden md:block float-left lg:float-right md:mt-8 lg:mt-0 lg:max-w-[505px]"
+              class="float-left hidden md:mt-8 md:block lg:float-right lg:mt-0 lg:max-w-[505px]"
               :src="`/static/icons/demo/${mediaCategory.detail_image}.png`"
               alt=""
             />
@@ -102,7 +102,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
             :key="item.id"
             class="mb-2 flex items-center"
           >
-            <it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
+            <it-icon-check class="mr-4 h-8 w-8 flex-none text-sky-500"></it-icon-check>
             {{ item.value }}
           </li>
         </ul>
@@ -119,7 +119,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
           </p>
           <ul
             :class="{
-              'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(
+              'grid grid-cols-1 gap-4 lg:grid-cols-2': displayAsCard(
                 content_collection.value.contents[0].type
               ),
               'border-t': !displayAsCard(content_collection.value.contents[0].type),
@@ -147,7 +147,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
               />
               <div
                 v-else
-                class="flex flex-col lg:flex-row lg:items-center justify-between border-b py-4"
+                class="flex flex-col justify-between border-b py-4 lg:flex-row lg:items-center"
               >
                 <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
                 <MediaLink
@@ -168,7 +168,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
               )
             "
             :to="`${mediaCategory.frontend_url}/media`"
-            class="btn-text inline-flex items-center pl-0 py-2"
+            class="btn-text inline-flex items-center py-2 pl-0"
           >
             <span>Alle anschauen</span>
             <it-icon-arrow-right></it-icon-arrow-right>

client/src/pages/mediaLibrary/MLCategoryIndexPage.vue

@@ -26,12 +26,12 @@ watch(dropdownSelected, (newValue) =>
 
 <template>
   <div class="container-large">
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10 mt-6">
+    <div class="mb-10 mt-6 flex flex-col items-center justify-between lg:flex-row">
       <h1>{{ $t("mediaLibrary.handlungsfelder.title", categories.length) }}</h1>
       <!--      <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <div v-if="mediaStore.mediaLibraryPage">
-      <ul class="grid gap-5 grid-cols-1 md:grid-cols-4">
+      <ul class="grid grid-cols-1 gap-5 md:grid-cols-4">
         <li v-for="cat in categories" :key="cat.id" class="bg-white p-4">
           <router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
             <img
@@ -39,7 +39,7 @@ watch(dropdownSelected, (newValue) =>
               :src="`/static/icons/handlungsfelder/${cat.overview_icon}.svg`"
               alt=""
             />
-            <h3 class="text-base text-center">{{ cat.title }}</h3>
+            <h3 class="text-center text-base">{{ cat.title }}</h3>
           </router-link>
         </li>
       </ul>

client/src/pages/mediaLibrary/MLIndexPage.vue

@@ -27,7 +27,7 @@ watch(dropdownSelected, (newValue) =>
 
 <template>
   <div class="container-large">
-    <div class="flex flex-col lg:flex-row justify-between mb-12 mt-6">
+    <div class="mb-12 mt-6 flex flex-col justify-between lg:flex-row">
       <h1>{{ $t("mediaLibrary.title") }}</h1>
       <!--      <ItDropdownSelect-->
       <!--        v-model="dropdownSelected"-->

client/src/pages/mediaLibrary/MLMediaListPage.vue

@@ -35,7 +35,7 @@ const mediaList = computed(() => {
 <template>
   <div
     v-if="mediaCategory && mediaStore.mediaLibraryPage && mediaList"
-    class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
+    class="fixed top-0 h-full w-full overflow-y-scroll bg-white"
   >
     <div class="bg-gray-200">
       <div class="container-large">

client/src/pages/mediaLibrary/MLParentPage.vue

@@ -24,26 +24,26 @@ onMounted(async () => {
 
 <template>
   <div class="bg-gray-200">
-    <nav class="px-6 py-4 border-b bg-white">
+    <nav class="border-b bg-white px-6 py-4">
       <ul
         v-if="mediaLibraryStore.mediaLibraryPage"
-        class="overflow-auto whitespace-nowrap scrollbar"
+        class="scrollbar overflow-auto whitespace-nowrap"
       >
-        <li class="lg:ml-12 inline-block">
+        <li class="inline-block lg:ml-12">
           <router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url">
             Übersicht
           </router-link>
         </li>
-        <li class="ml-6 lg:ml-12 inline-block">
+        <li class="ml-6 inline-block lg:ml-12">
           <router-link
             :to="`${mediaLibraryStore.mediaLibraryPage.frontend_url}/category`"
           >
             Handlungsfelder
           </router-link>
         </li>
-        <li class="ml-6 lg:ml-12 inline-block">Allgemeines zu Versicherungen</li>
-        <li class="ml-6 lg:ml-12 inline-block">Lernmedien</li>
-        <li class="ml-6 lg:ml-12 inline-block">
+        <li class="ml-6 inline-block lg:ml-12">Allgemeines zu Versicherungen</li>
+        <li class="ml-6 inline-block lg:ml-12">Lernmedien</li>
+        <li class="ml-6 inline-block lg:ml-12">
           <a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a>
         </li>
       </ul>

client/tailwind.config.js

@@ -43,11 +43,10 @@ module.exports = {
           "y-axis . left-label . right-label .",
         ],
         "rating-scale": [
-          '.   bar bar bar bar bar bar   .',
-          'fst fst snd snd trd trd fth fth'],
-        "rating-scale-slim": [
-          'bar bar bar',
-          'fst mid fth']
+          ".   bar bar bar bar bar bar   .",
+          "fst fst snd snd trd trd fth fth",
+        ],
+        "rating-scale-slim": ["bar bar bar", "fst mid fth"],
       },
       gridTemplateColumns: {
         "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",

client/tailwind.css

@@ -33,31 +33,31 @@ svg {
 
 @layer base {
   .it-icon {
-    @apply w-8 h-8 inline-block;
+    @apply inline-block h-8 w-8;
   }
 
   h1 {
-    @apply text-4xl md:text-5xl xl:text-7xl font-bold;
+    @apply text-4xl font-bold md:text-5xl xl:text-7xl;
   }
 
   .heading-1 {
-    @apply text-4xl md:text-5xl xl:text-7xl font-bold;
+    @apply text-4xl font-bold md:text-5xl xl:text-7xl;
   }
 
   h2 {
-    @apply text-2xl md:text-3xl xl:text-4xl font-bold;
+    @apply text-2xl font-bold md:text-3xl xl:text-4xl;
   }
 
   .heading-2 {
-    @apply text-2xl md:text-3xl xl:text-4xl font-bold;
+    @apply text-2xl font-bold md:text-3xl xl:text-4xl;
   }
 
   h3 {
-    @apply text-xl xl:text-2xl font-bold;
+    @apply text-xl font-bold xl:text-2xl;
   }
 
   .heading-3 {
-    @apply text-xl xl:text-2xl font-bold;
+    @apply text-xl font-bold xl:text-2xl;
   }
 
   .link {
@@ -77,11 +77,11 @@ svg {
   }
 
   .container-medium {
-    @apply mx-auto max-w-5xl w-full px-4 lg:px-8 py-4;
+    @apply mx-auto w-full max-w-5xl px-4 py-4 lg:px-8;
   }
 
   .container-large {
-    @apply mx-auto max-w-6xl w-full px-4 lg:px-8 py-4;
+    @apply mx-auto w-full max-w-6xl px-4 py-4 lg:px-8;
   }
 
   .filter-blue-900 {
@@ -96,31 +96,31 @@ svg {
   }
 
   .btn-primary {
-    @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;
+    @apply inline-block border-2 border-blue-900 bg-blue-900 py-2
+    px-4 align-middle font-semibold text-white
+    hover:border-blue-700 hover:bg-blue-700
+    disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   .btn-secondary {
-    @apply font-semibold py-2 px-4 align-middle inline-block
-    bg-white text-blue-900 border-2 border-blue-900
+    @apply inline-block border-2 border-blue-900 bg-white py-2
+    px-4 align-middle font-semibold text-blue-900
     hover:bg-gray-200
-    disabled:opacity-50 disabled:cursor-not-allowed;
+    disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   .btn-blue {
-    @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;
+    @apply inline-block border-2 border-sky-500 bg-sky-500 py-2
+    px-4 align-middle font-semibold text-blue-900
+    hover:border-sky-400 hover:bg-sky-400
+    disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   .btn-text {
-    @apply font-normal py-2 px-4 align-middle inline-block
+    @apply inline-block py-2 px-4 align-middle font-normal
     text-blue-900
     hover:text-gray-700
-    disabled:opacity-50 disabled:cursor-not-allowed;
+    disabled:cursor-not-allowed disabled:opacity-50;
   }
 }