From b7231fb1b790d62023cdf1bfca511215e4356a7d Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Sat, 27 Jul 2024 09:49:43 +0200
Subject: [PATCH] Styling

---
 .../AgentCompetenceGradeDetailPage.vue        | 39 ++++++++++++-------
 .../AgentCompetenceGradePage.vue              | 18 ++++-----
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradeDetailPage.vue b/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradeDetailPage.vue
index e6710669..a13f0775 100644
--- a/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradeDetailPage.vue
+++ b/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradeDetailPage.vue
@@ -27,6 +27,12 @@ const participantUserIds = computed(() => {
   return (participants.value ?? []).map((p) => p.user_id);
 });
 
+const courseSession = computed(() => {
+  return participants.value[0]?.course_sessions.find(
+    (cs) => cs.id === props.courseSessionId
+  );
+});
+
 const certificateData = ref<CompetenceCertificateObjectType | undefined>(undefined);
 
 function userGrade(userId: string) {
@@ -108,7 +114,7 @@ onMounted(async () => {
     <div v-if="loading" class="m-8 flex justify-center">
       <LoadingSpinner />
     </div>
-    <div v-else class="container-large flex flex-col space-y-8">
+    <div v-else class="container-large flex flex-col space-y-4">
       <router-link
         class="btn-text inline-flex items-center pl-0"
         :to="`/statistic/${props.agentRole}/${props.courseSlug}/competence-grade`"
@@ -117,18 +123,16 @@ onMounted(async () => {
         <span>{{ $t("general.back") }}</span>
       </router-link>
       <div>
-        <h2 class="text-2xl font-bold">{{ $t("a.Statistik") }}</h2>
-        <p class="text-gray-800">
-          {{ $t("a.Statistik für alle Lernenden") }}
-        </p>
-
-        <pre>{{ totalAverageGrade }}</pre>
+        <h2 class="mb-8">{{ certificateData?.title }}</h2>
 
+        <div class="border-b bg-white px-6 py-6">
+          {{ courseSession?.session_title }}
+        </div>
+        <div class="heading-3 border-b bg-white px-6 py-6">
+          {{ $t("a.Durchschnittsnote") }}:
+          {{ totalAverageGrade }}
+        </div>
         <div class="bg-white px-4 py-2">
-          <section
-            class="flex flex-col space-x-0 border-b bg-white lg:flex-row lg:space-x-3"
-          ></section>
-
           <div
             v-for="person in participants"
             :key="person.user_id"
@@ -155,10 +159,15 @@ onMounted(async () => {
               </div>
             </div>
 
-            <div class="flex w-full flex-auto items-start md:w-1/4">
-              <div class="flex">
-                <div>{{ $t("a.Note") }}:</div>
-                <div class="w-16 text-center">{{ userGrade(person.user_id) }}</div>
+            <div class="flex flex-auto items-center gap-2 md:w-1/4">
+              <div>{{ $t("a.Note") }}:</div>
+              <div class="min-w-12 text-center">
+                <div
+                  class="rounded px-2 py-1 font-bold"
+                  :class="{ 'bg-red-400': (userGrade(person.user_id) ?? 4) < 4 }"
+                >
+                  {{ userGrade(person.user_id) }}
+                </div>
               </div>
             </div>
 
diff --git a/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradePage.vue b/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradePage.vue
index 762f43fd..7e26558e 100644
--- a/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradePage.vue
+++ b/client/src/pages/dashboard/agentAssignment/AgentCompetenceGradePage.vue
@@ -123,16 +123,13 @@ const courseSessionCompetenceAssignments = computed(() => {
     <div v-if="loading" class="m-8 flex justify-center">
       <LoadingSpinner />
     </div>
-    <div v-else class="container-large flex flex-col space-y-8">
+    <div v-else class="container-large flex flex-col space-y-4">
       <router-link class="btn-text inline-flex items-center pl-0" to="/">
         <it-icon-arrow-left />
         <span>{{ $t("general.back") }}</span>
       </router-link>
       <div>
-        <h2 class="text-2xl font-bold">{{ $t("a.Statistik") }}</h2>
-        <p class="text-gray-800">
-          {{ $t("a.Statistik für alle Lernenden") }}
-        </p>
+        <h2>{{ $t("a.Kompetenznachweise") }}</h2>
 
         <div class="bg-white px-4 py-2">
           <section
@@ -152,10 +149,13 @@ const courseSessionCompetenceAssignments = computed(() => {
               }}»
             </div>
 
-            <div class="flex w-full flex-auto items-start md:w-1/4">
-              <div class="flex">
-                <div>{{ $t("a.Durchschnittsnote") }}:</div>
-                <div class="w-16 text-center">
+            <div class="flex flex-auto items-center gap-2 md:w-1/4">
+              <div>{{ $t("a.Durchschnittsnote") }}:</div>
+              <div class="min-w-12 text-center">
+                <div
+                  class="rounded px-2 py-1 font-bold"
+                  :class="{ 'bg-red-400': (entry.averageGrade ?? 4) < 4 }"
+                >
                   {{ entry.averageGrade }}
                 </div>
               </div>