Refactor Styleing

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>

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>

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>

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>

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>