From 14474d1799a7980d6a742ccde9044ce2f5efca7f Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 9 Apr 2024 16:34:27 +0200
Subject: [PATCH] WIP: Align widgets [skip ci]

---
 .../AssignmentProgressSummaryBox.vue          |  4 ++--
 .../dashboard/AssignmentSummary.vue           |  4 ++--
 .../dashboard/CompetenceSummary.vue           |  2 +-
 .../dashboard/CompetenceSummaryBox.vue        | 10 ++++++----
 .../src/components/dashboard/CoursePanel.vue  | 19 +++++++++++--------
 client/src/pages/dashboard/DashboardPage.vue  | 12 ++++++++++++
 6 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/client/src/components/dashboard/AssignmentProgressSummaryBox.vue b/client/src/components/dashboard/AssignmentProgressSummaryBox.vue
index b76e0b8b..07dcd27a 100644
--- a/client/src/components/dashboard/AssignmentProgressSummaryBox.vue
+++ b/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,
diff --git a/client/src/components/dashboard/AssignmentSummary.vue b/client/src/components/dashboard/AssignmentSummary.vue
index 5ce253e3..27839360 100644
--- a/client/src/components/dashboard/AssignmentSummary.vue
+++ b/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"
diff --git a/client/src/components/dashboard/CompetenceSummary.vue b/client/src/components/dashboard/CompetenceSummary.vue
index df9930ea..8de08f99 100644
--- a/client/src/components/dashboard/CompetenceSummary.vue
+++ b/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"
diff --git a/client/src/components/dashboard/CompetenceSummaryBox.vue b/client/src/components/dashboard/CompetenceSummaryBox.vue
index 6c2a7cca..d2166414 100644
--- a/client/src/components/dashboard/CompetenceSummaryBox.vue
+++ b/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 }}
diff --git a/client/src/components/dashboard/CoursePanel.vue b/client/src/components/dashboard/CoursePanel.vue
index db5e8054..ec096663 100644
--- a/client/src/components/dashboard/CoursePanel.vue
+++ b/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
diff --git a/client/src/pages/dashboard/DashboardPage.vue b/client/src/pages/dashboard/DashboardPage.vue
index 93bc5898..c8908aaa 100644
--- a/client/src/pages/dashboard/DashboardPage.vue
+++ b/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]">