ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Styleing

This commit is contained in:
Lorenz Padberg 2023-06-29 10:52:10 +02:00
parent ea81fc15ef
commit 77aacfc01c
5 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/dueDates/DueDateSingle.vue
View File

@ -8,8 +8,8 @@ const props = defineProps<{
</script> </script>
<template> <template>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between py-4">
<div class="py-2"> <div class="space-y-1">
<a class="text-bold underline" :href="props.dueDate.url" target="_blank"> <a class="text-bold underline" :href="props.dueDate.url" target="_blank">
{{ props.dueDate.title }} {{ props.dueDate.title }}
</a> </a>

12
client/src/components/dueDates/DueDatesList.vue
View File

@ -1,11 +1,19 @@
<template> <template>
<div> <div>
<ul v-if="true"> <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> <DueDateSingle :due-date="dueDate"></DueDateSingle>
</li> </li>
</ul> </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 v-else>Keine Termine Vorhanden</div>
</div> </div>
</template> </template>

7
client/src/components/dueDates/DueDatesShortList.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<div>Nächste Termine</div> <DueDatesList :due-dates="allDueDates" :max-count="props.maxCount"></DueDatesList>
<DueDatesList :due-dates="allDueDates" max-count="3"></DueDatesList>
</div> </div>
</template> </template>
@ -9,6 +8,10 @@
import DueDatesList from "@/components/dueDates/DueDatesList.vue"; import DueDatesList from "@/components/dueDates/DueDatesList.vue";
import { useCurrentCourseSession } from "@/composables"; import { useCurrentCourseSession } from "@/composables";
const props = defineProps<{
maxCount: number;
}>();
const courseSession = useCurrentCourseSession(); const courseSession = useCurrentCourseSession();
const allDueDates = courseSession.value.duedates; const allDueDates = courseSession.value.duedates;
</script> </script>

2
client/src/pages/DashboardPage.vue
View File

@ -78,7 +78,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
<div> <div>
<h3 class="mb-6">Termine</h3> <h3 class="mb-6">Termine</h3>
<DueDatesList <DueDatesList
class="bg-white" class="bg-white p-6"
:due-dates="allDueDates" :due-dates="allDueDates"
:max-count="10" :max-count="10"
></DueDatesList> ></DueDatesList>

8
client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
View File

@ -74,7 +74,7 @@ const changeViewType = (viewType: ViewType) => {
<!-- Top --> <!-- Top -->
<div class="flex flex-row justify-between space-x-8 bg-gray-200 p-6 sm:p-12"> <div class="flex flex-row justify-between space-x-8 bg-gray-200 p-6 sm:p-12">
<!-- Left --> <!-- Left -->
<div class="flex flex-col justify-between"> <div class="flex w-1/2 flex-col justify-between">
<div> <div>
<p class="font-bold"> <p class="font-bold">
{{ $t("learningPathPage.welcomeBack") }} {{ $t("learningPathPage.welcomeBack") }}
@ -91,8 +91,10 @@ const changeViewType = (viewType: ViewType) => {
</div> </div>
<!-- Right --> <!-- Right -->
<div v-if="!useMobileLayout" class="max-w-md"> <div v-if="!useMobileLayout" class="flex-grow">
<DueDatesShortList :max-count="3"></DueDatesShortList> <div class="text-bold pb-3">Nächste Termine</div>
<DueDatesShortList :max-count="2"></DueDatesShortList>
</div> </div>
</div> </div>