WIP: Style components

client/src/components/dashboard/CompetenceSummary.vue

@@ -24,13 +24,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="competence" class="mb-14 space-y-8">
+  <div v-if="competence" class="mb-14">
-    <div class="flex flex-col space-y-7 bg-white p-6">
     <CompetenceSummaryBox
       :fail-count="competence.fail_count"
       :success-count="competence.success_count"
       :details-link="competenceCriteriaUrl"
     />
   </div>
-  </div>
 </template>

client/src/components/dashboard/CoursePanel.vue

@@ -37,11 +37,13 @@ function hasWidget(widget: WidgetType) {
 
 <template>
   <div v-if="courseConfig" class="mb-14 space-y-8">
-    <div class="flex flex-col space-y-4 bg-white p-6">
+    <div class="flex flex-col space-y-8 bg-white p-6">
+      <div class="border-b border-gray-300 pb-8">
         <h3 class="mb-4 text-3xl">{{ courseName }}</h3>
         <p>
           <span class="rounded bg-gray-300 px-2 py-1">{{ courseConfig.role_key }}</span>
         </p>
+      </div>
       <LearningPathDiagram
         v-if="
           hasWidget('ProgressWidget') &&

client/src/components/dashboard/MentorCompetenceSummary.vue

@@ -17,21 +17,22 @@ onMounted(async () => {
 
 <template>
   <div v-if="summary" class="w-[325px]">
+    <h3 class="mb-4 text-base">{{ $t("Kompetenznachweise") }}</h3>
     <div class="flex flex-row space-x-3 bg-white">
       <div
-        class="flex h-[74px] items-center justify-center px-3 py-1 text-3xl font-bold"
+        class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
       >
         <span>{{ summary.summary.total_passed }}</span>
       </div>
-      <p class="ml-3 mt-0 leading-[74px]">{{ $t("Bestanden") }}</p>
+      <p class="ml-3 mt-0 leading-[47px]">{{ $t("Bestanden") }}</p>
     </div>
     <div class="flex flex-row space-x-3 bg-white pb-6">
       <div
-        class="flex h-[74px] items-center justify-center px-3 py-1 text-3xl font-bold"
+        class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
       >
         <span>{{ summary.summary.total_failed }}</span>
       </div>
-      <p class="ml-3 mt-0 leading-[74px]">{{ $t("Nicht bestanden") }}</p>
+      <p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p>
     </div>
     <p>{{ $t("Details anschauen") }}</p>
   </div>

client/src/components/dashboard/MentorMenteeCount.vue

@@ -16,9 +16,10 @@ onMounted(async () => {
 
 <template>
   <div class="w-[325px]">
+    <h3 class="mb-4 text-base">{{ $t("Personen") }}</h3>
     <div class="flex flex-row space-x-3 bg-white pb-6">
       <div
-        class="flex h-[74px] items-center justify-center px-3 py-1 text-3xl font-bold"
+        class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
       >
         <span>{{ menteeCount }}</span>
       </div>

client/src/components/dashboard/MentorOpenTasksCount.vue

@@ -16,6 +16,7 @@ onMounted(async () => {
 
 <template>
   <div class="w-[325px]">
+    <h3 class="mb-4 text-base">{{ $t("Zu erledigen") }}</h3>
     <div class="flex flex-row space-x-3 bg-white pb-6">
       <div
         class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"

server/config/urls.py

@@ -10,9 +10,6 @@ from django.views import defaults as default_views
 from django.views.decorators.csrf import csrf_exempt
 from django_ratelimit.exceptions import Ratelimited
 from graphene_django.views import GraphQLView
-from wagtail import urls as wagtail_urls
-from wagtail.admin import urls as wagtailadmin_urls
-from wagtail.documents import urls as media_library_urls
 
 from vbv_lernwelt.api.directory import list_entities
 from vbv_lernwelt.api.user import get_profile, me_user_view, post_avatar
@@ -42,8 +39,12 @@ from vbv_lernwelt.course.views import (
     request_course_completion_for_user,
 )
 from vbv_lernwelt.course_session.views import get_course_session_documents
-from vbv_lernwelt.dashboard.views import get_dashboard_config, get_dashboard_persons, get_mentee_count, \
+from vbv_lernwelt.dashboard.views import (
-    get_mentor_open_tasks_count
+    get_dashboard_config,
+    get_dashboard_persons,
+    get_mentee_count,
+    get_mentor_open_tasks_count,
+)
 from vbv_lernwelt.edoniq_test.views import (
     export_students,
     export_students_and_trainers,
@@ -62,6 +63,9 @@ from vbv_lernwelt.importer.views import (
 )
 from vbv_lernwelt.media_files.views import user_image
 from vbv_lernwelt.notify.views import email_notification_settings
+from wagtail import urls as wagtail_urls
+from wagtail.admin import urls as wagtailadmin_urls
+from wagtail.documents import urls as media_library_urls
 
 
 class SignedIntConverter(IntConverter):

server/vbv_lernwelt/dashboard/graphql/types/assignment.py

@@ -59,7 +59,11 @@ def create_assignment_summary(course_id, metrics) -> AssignmentStatisticsSummary
 
     if not completed_metrics:
         return AssignmentStatisticsSummaryType(
-            _id=course_id, completed_count=0, average_passed=0, total_passed=0, total_failed=0  # noqa
+            _id=course_id,
+            completed_count=0,
+            average_passed=0,
+            total_passed=0,
+            total_failed=0,  # noqa
         )
 
     completed_count = len(completed_metrics)

server/vbv_lernwelt/dashboard/views.py

@@ -6,9 +6,16 @@ from rest_framework.decorators import api_view
 from rest_framework.exceptions import PermissionDenied
 from rest_framework.response import Response
 
-from vbv_lernwelt.assignment.models import AssignmentCompletion, AssignmentCompletionStatus
+from vbv_lernwelt.assignment.models import (
+    AssignmentCompletion,
+    AssignmentCompletionStatus,
+)
 from vbv_lernwelt.core.models import User
-from vbv_lernwelt.course.models import CourseSession, CourseSessionUser, CourseConfiguration
+from vbv_lernwelt.course.models import (
+    CourseConfiguration,
+    CourseSession,
+    CourseSessionUser,
+)
 from vbv_lernwelt.course.views import logger
 from vbv_lernwelt.course_session_group.models import CourseSessionGroup
 from vbv_lernwelt.learning_mentor.models import LearningMentor