From 77aacfc01c3b2e90bd223a2041e583af85248bf3 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 29 Jun 2023 10:52:10 +0200
Subject: [PATCH] Refactor Styleing

---
 client/src/components/dueDates/DueDateSingle.vue     |  4 ++--
 client/src/components/dueDates/DueDatesList.vue      | 12 ++++++++++--
 client/src/components/dueDates/DueDatesShortList.vue |  7 +++++--
 client/src/pages/DashboardPage.vue                   |  2 +-
 .../learningPathPage/LearningPathPage.vue            |  8 +++++---
 5 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/client/src/components/dueDates/DueDateSingle.vue b/client/src/components/dueDates/DueDateSingle.vue
index b152a6e5..272b3d49 100644
--- a/client/src/components/dueDates/DueDateSingle.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -8,8 +8,8 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="flex items-center justify-between">
-    <div class="py-2">
+  <div class="flex items-center justify-between py-4">
+    <div class="space-y-1">
       <a class="text-bold underline" :href="props.dueDate.url" target="_blank">
         {{ props.dueDate.title }}
       </a>
diff --git a/client/src/components/dueDates/DueDatesList.vue b/client/src/components/dueDates/DueDatesList.vue
index ff988e22..1533c9d6 100644
--- a/client/src/components/dueDates/DueDatesList.vue
+++ b/client/src/components/dueDates/DueDatesList.vue
@@ -1,11 +1,19 @@
 <template>
   <div>
     <ul v-if="true">
-      <li v-for="dueDate in dueDatesDiplayed" :key="dueDate.id" class="border-b">
+      <li
+        v-for="dueDate in dueDatesDiplayed"
+        :key="dueDate.id"
+        class="border-t last:border-b"
+      >
         <DueDateSingle :due-date="dueDate"></DueDateSingle>
       </li>
     </ul>
-    <a v-if="allDueDates.length > props.maxCount" href="">Alle Termine anzeigen</a>
+    <div v-if="allDueDates.length > props.maxCount" class="flex items-center pt-6">
+      <a href="">Alle Termine anschauen</a>
+      <it-icon-arrow-right />
+    </div>
+
     <div v-else>Keine Termine Vorhanden</div>
   </div>
 </template>
diff --git a/client/src/components/dueDates/DueDatesShortList.vue b/client/src/components/dueDates/DueDatesShortList.vue
index 170814dc..b9aa4fbe 100644
--- a/client/src/components/dueDates/DueDatesShortList.vue
+++ b/client/src/components/dueDates/DueDatesShortList.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
-    <div>Nächste Termine</div>
-    <DueDatesList :due-dates="allDueDates" max-count="3"></DueDatesList>
+    <DueDatesList :due-dates="allDueDates" :max-count="props.maxCount"></DueDatesList>
   </div>
 </template>
 
@@ -9,6 +8,10 @@
 import DueDatesList from "@/components/dueDates/DueDatesList.vue";
 import { useCurrentCourseSession } from "@/composables";
 
+const props = defineProps<{
+  maxCount: number;
+}>();
+
 const courseSession = useCurrentCourseSession();
 const allDueDates = courseSession.value.duedates;
 </script>
diff --git a/client/src/pages/DashboardPage.vue b/client/src/pages/DashboardPage.vue
index d0eed038..6762d084 100644
--- a/client/src/pages/DashboardPage.vue
+++ b/client/src/pages/DashboardPage.vue
@@ -78,7 +78,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
         <div>
           <h3 class="mb-6">Termine</h3>
           <DueDatesList
-            class="bg-white"
+            class="bg-white p-6"
             :due-dates="allDueDates"
             :max-count="10"
           ></DueDatesList>
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
index 9b594552..e86ee1a4 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
@@ -74,7 +74,7 @@ const changeViewType = (viewType: ViewType) => {
     <!-- Top -->
     <div class="flex flex-row justify-between space-x-8 bg-gray-200 p-6 sm:p-12">
       <!-- Left -->
-      <div class="flex flex-col justify-between">
+      <div class="flex w-1/2 flex-col justify-between">
         <div>
           <p class="font-bold">
             {{ $t("learningPathPage.welcomeBack") }}
@@ -91,8 +91,10 @@ const changeViewType = (viewType: ViewType) => {
       </div>
 
       <!-- Right -->
-      <div v-if="!useMobileLayout" class="max-w-md">
-        <DueDatesShortList :max-count="3"></DueDatesShortList>
+      <div v-if="!useMobileLayout" class="flex-grow">
+        <div class="text-bold pb-3">Nächste Termine</div>
+
+        <DueDatesShortList :max-count="2"></DueDatesShortList>
       </div>
     </div>