WIP: Align widgets [skip ci]

client/src/components/dashboard/AssignmentProgressSummaryBox.vue

@@ -24,14 +24,14 @@ const progress = computed(() => ({
       <div class="flex items-center">
         <i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
           <template #NUMBER>
-            <span class="mr-3 text-4xl font-bold">{{ totalAssignments }}</span>
+            <span class="mr-3 text-xl font-bold">{{ totalAssignments }}</span>
           </template>
         </i18next>
       </div>
       <div class="flex items-center">
         <i18next :translation="$t('a.xOfY Punkten erreicht')">
           <template #xOfY>
-            <span class="mr-3 text-4xl font-bold">
+            <span class="mr-3 text-xl font-bold">
               {{
                 $t("a.VALUE von MAXIMUM", {
                   VALUE: props.achievedPointsCount,

client/src/components/dashboard/AssignmentSummary.vue

@@ -28,8 +28,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="assignment" class="mb-14 space-y-8">
-    <div class="flex flex-col space-y-7 bg-white p-6">
+  <div v-if="assignment">
+    <div class="w-[395px]">
       <AssignmentProgressSummaryBox
         :total-assignments="assignment.total_count"
         :achieved-points-count="assignment.points_achieved_count"

client/src/components/dashboard/CompetenceSummary.vue

@@ -24,7 +24,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="competence">
+  <div v-if="competence" class="w-[395px]">
     <CompetenceSummaryBox
       :fail-count="competence.fail_count"
       :success-count="competence.success_count"

client/src/components/dashboard/CompetenceSummaryBox.vue

@@ -13,11 +13,11 @@ defineProps<{
     <template #title>{{ $t("a.Selbsteinschätzungen") }}</template>
     <template #content>
       <div class="flex items-center">
-        <it-icon-smiley-happy class="mr-4 h-12 w-12"></it-icon-smiley-happy>
+        <it-icon-smiley-happy class="mr-4 h-[28px] w-[28px]"></it-icon-smiley-happy>
         <i18next :translation="$t('a.{NUMBER} Das kann ich')">
           <template #NUMBER>
             <span
-              class="mr-3 text-4xl font-bold"
+              class="mr-3 text-2xl font-bold"
               data-cy="dashboard.stats.competence.success"
             >
               {{ successCount }}
@@ -26,11 +26,13 @@ defineProps<{
         </i18next>
       </div>
       <div class="flex items-center">
-        <it-icon-smiley-thinking class="mr-4 h-12 w-12"></it-icon-smiley-thinking>
+        <it-icon-smiley-thinking
+          class="mr-4 h-[28px] w-[28px]"
+        ></it-icon-smiley-thinking>
         <i18next :translation="$t('a.{NUMBER} Das will ich nochmals anschauen')">
           <template #NUMBER>
             <span
-              class="mr-3 text-4xl font-bold"
+              class="mr-3 text-2xl font-bold"
               data-cy="dashboard.stats.competence.fail"
             >
               {{ failCount }}

client/src/components/dashboard/CoursePanel.vue

@@ -81,7 +81,7 @@ function hasActionButton(): boolean {
           courseConfig.session_to_continue_id &&
           courseSlug
         "
-        class="border-b border-gray-300 pb-8"
+        class="border-b border-gray-300 pb-8 last:border-0"
       >
         <LearningPathDiagram
           :key="courseSlug"
@@ -90,19 +90,22 @@ function hasActionButton(): boolean {
           diagram-type="horizontal"
         ></LearningPathDiagram>
       </div>
-      <div v-if="numberOfProgressWidgets" class="flex flex-col flex-wrap">
-        <CompetenceSummary
-          v-if="hasWidget('CompetenceWidget')"
-          :course-slug="courseSlug"
-          :session-to-continue-id="courseConfig.session_to_continue_id"
-          :course-id="courseConfig.course_id"
-        ></CompetenceSummary>
+      <div
+        v-if="numberOfProgressWidgets"
+        class="flex flex-col flex-wrap gap-x-[60px] border-b border-gray-300 pb-8 last:border-0 md:flex-row"
+      >
         <AssignmentSummary
           v-if="hasWidget('CompetenceCertificateWidget')"
           :course-slug="courseSlug"
           :session-to-continue-id="courseConfig.session_to_continue_id"
           :course-id="courseConfig.course_id"
         />
+        <CompetenceSummary
+          v-if="hasWidget('CompetenceWidget')"
+          :course-slug="courseSlug"
+          :session-to-continue-id="courseConfig.session_to_continue_id"
+          :course-id="courseConfig.course_id"
+        ></CompetenceSummary>
       </div>
       <div v-if="numberOfMentorWidgets > 0" class="flex flex-col flex-wrap md:flex-row">
         <MentorOpenTasksCount

client/src/pages/dashboard/DashboardPage.vue

@@ -65,11 +65,13 @@ function newDashboardConfigForId(id: string) {
             @update:model-value="dashboardStore.switchAndLoadDashboardConfig"
           ></ItDropdownSelect>
         </div>
+        <!-- new way of dashboard -->
         <ul>
           <li v-for="config in dashboardStore.dashboardConfigs" :key="config.id">
             <CoursePanel :course-config="newDashboardConfigForId(config.id)" />
           </li>
         </ul>
+        <!-- end of new way of dashboard -->
         <!-- keep until we unify the dashboard -->
         <CoursePanel
           v-if="
@@ -80,10 +82,20 @@ function newDashboardConfigForId(id: string) {
             newDashboardConfigForId(dashboardStore.currentDashboardConfig.id)
           "
         />
+        <CoursePanel
+          v-else-if="
+            dashboardStore.currentDashboardConfig.dashboard_type ===
+            'PROGRESS_DASHBOARD'
+          "
+          :course-config="
+            newDashboardConfigForId(dashboardStore.currentDashboardConfig.id)
+          "
+        />
         <component
           :is="boards[dashboardStore.currentDashboardConfig.dashboard_type].main"
           v-else
         ></component>
+        <!-- end of old way of dashboard -->
       </div>
     </main>
     <aside class="m-8 lg:order-1 lg:w-[343px]">