From 2c26a336ac568078f53a53d39fec9339e95b40a5 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 14 Sep 2023 13:25:48 +0200
Subject: [PATCH] Mobile Anpassungen Kompetenzprofil

---
 .../pages/competence/ActionCompetenceListPage.vue |  4 ++--
 .../pages/competence/CompetenceAssignmentRow.vue  | 15 +++++++++------
 .../competence/CompetenceCertificateComponent.vue | 13 ++++++++-----
 .../competence/CompetenceCertificateListPage.vue  |  6 +++---
 .../src/pages/competence/CompetenceIndexPage.vue  |  6 +++---
 .../src/pages/competence/CompetenceParentPage.vue |  8 ++++----
 .../pages/competence/PerformanceCriteriaPage.vue  |  6 +++---
 7 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/competence/ActionCompetenceListPage.vue b/client/src/pages/competence/ActionCompetenceListPage.vue
index 0e5d4167..b4f782cd 100644
--- a/client/src/pages/competence/ActionCompetenceListPage.vue
+++ b/client/src/pages/competence/ActionCompetenceListPage.vue
@@ -24,8 +24,8 @@ function toggleOpen() {
   <div class="container-large">
     <h2 class="py-4">{{ $t("a.Handlungskompetenzen") }}</h2>
 
-    <div class="flex justify-between py-8">
-      <div class="w-3/4 text-xl">
+    <div class="flex flex-col justify-between gap-4 py-8 lg:flex-row">
+      <div class="text-xl lg:w-3/4">
         {{ $t("competence.listPageDescription") }}
       </div>
       <div class="whitespace-nowrap">
diff --git a/client/src/pages/competence/CompetenceAssignmentRow.vue b/client/src/pages/competence/CompetenceAssignmentRow.vue
index 099f225c..c471b9a1 100644
--- a/client/src/pages/competence/CompetenceAssignmentRow.vue
+++ b/client/src/pages/competence/CompetenceAssignmentRow.vue
@@ -22,8 +22,11 @@ const getIconName = () => {
 </script>
 
 <template>
-  <div class="flex items-center py-8" :class="{ 'border-b': props.addBorderBottom }">
-    <component :is="getIconName()" class="mr-4 h-9 w-9"></component>
+  <div
+    class="flex flex-col gap-4 py-8 lg:flex-row lg:items-center lg:gap-0"
+    :class="{ 'border-b': props.addBorderBottom }"
+  >
+    <component :is="getIconName()" class="mr-4 hidden h-9 w-9 lg:block"></component>
     <div class="flex w-[420px] flex-col">
       <h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
       <p class="text-gray-800">
@@ -41,7 +44,7 @@ const getIconName = () => {
         <span v-else>Fehler, Lerninhalt nicht korrekt verknüpft</span>
       </p>
     </div>
-    <div class="grow px-8">
+    <div class="grow lg:px-8">
       <div
         v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
         class="flex items-center"
@@ -72,9 +75,9 @@ const getIconName = () => {
     <div>
       <div
         v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
-        class="flex flex-col items-center"
+        class="flex flex-col lg:items-center"
       >
-        <div class="flex flex-col items-center">
+        <div class="flex flex-col lg:items-center">
           <div class="heading-2">
             {{ assignment.completion?.evaluation_points }}
           </div>
@@ -83,7 +86,7 @@ const getIconName = () => {
           </div>
         </div>
       </div>
-      <div v-else class="flex flex-col items-center">
+      <div v-else class="flex flex-col lg:items-center">
         <div>{{ $t("a.Höchstpunktzahl") }}</div>
         <div>{{ assignment.max_points }} {{ $t("a.Punkte") }}</div>
       </div>
diff --git a/client/src/pages/competence/CompetenceCertificateComponent.vue b/client/src/pages/competence/CompetenceCertificateComponent.vue
index 201637a7..6dac954a 100644
--- a/client/src/pages/competence/CompetenceCertificateComponent.vue
+++ b/client/src/pages/competence/CompetenceCertificateComponent.vue
@@ -45,16 +45,19 @@ const progressStatusCount = computed(() => {
 <template>
   <div>
     <div class="mb-4 bg-white p-8">
-      <div class="flex items-center">
-        <h3 :class="{ 'heading-2': props.detailView }">
-          {{ props.competenceCertificate.title }}
-        </h3>
+      <div class="flex flex-col lg:flex-row lg:items-center">
         <div
           v-if="numAssignmentsEvaluated < numAssignmentsTotal"
-          class="ml-2 rounded-full bg-gray-200 px-2.5 py-0.5 text-sm"
+          class="rounded-full bg-gray-200 px-2.5 py-0.5 text-sm lg:ml-2"
         >
           {{ $t("a.Zwischenstand") }}
         </div>
+        <h3
+          class="mt-2 lg:order-first lg:mt-0"
+          :class="{ 'heading-2': props.detailView }"
+        >
+          {{ props.competenceCertificate.title }}
+        </h3>
       </div>
 
       <section v-if="userPointsEvaluatedAssignments > 0" class="flex items-center">
diff --git a/client/src/pages/competence/CompetenceCertificateListPage.vue b/client/src/pages/competence/CompetenceCertificateListPage.vue
index 4acc9733..69d4d1b9 100644
--- a/client/src/pages/competence/CompetenceCertificateListPage.vue
+++ b/client/src/pages/competence/CompetenceCertificateListPage.vue
@@ -62,14 +62,14 @@ onMounted(async () => {
     <h2 class="mb-4 lg:py-4">{{ $t("a.Kompetenznachweise") }}</h2>
 
     <div class="mb-4 bg-white p-8">
-      <div class="flex items-center">
-        <h3>{{ $t("a.Gesamtpunktzahl") }}</h3>
+      <div class="flex flex-col lg:flex-row lg:items-center">
         <div
           v-if="numAssignmentsEvaluated < assignments.length"
-          class="ml-2 rounded-full bg-gray-200 px-2.5 py-0.5 text-sm"
+          class="rounded-full bg-gray-200 px-2.5 py-0.5 text-sm lg:ml-2"
         >
           {{ $t("a.Zwischenstand") }}
         </div>
+        <h3 class="mt-2 lg:order-first lg:mt-0">{{ $t("a.Gesamtpunktzahl") }}</h3>
       </div>
 
       <section v-if="userPointsEvaluatedAssignments > 0" class="flex items-center">
diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index e9f966b7..7a4fe486 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -81,12 +81,12 @@ const performanceCriteriaStatusCount = computed(() => {
           <div
             v-for="certificate in competenceCertificates"
             :key="certificate.id"
-            class="flex items-center justify-between border-b py-4 first:border-t"
+            class="flex flex-col justify-between border-b py-4 first:border-t lg:flex-row lg:items-center"
           >
             <div class="text-bold text-xl">
               {{ certificate.title }}
             </div>
-            <div>
+            <div class="mt-4 lg:mt-0">
               <span class="text-bold">
                 {{ assignmentsMaxEvaluationPoints(certificate.assignments) }}
               </span>
@@ -107,7 +107,7 @@ const performanceCriteriaStatusCount = computed(() => {
                   })
                 }}
               </div>
-              <div class="ml-2 w-40">
+              <div class="ml-2 hidden w-40 lg:block">
                 <ItProgress
                   :status-count="
                     competenceCertificateProgressStatusCount(certificate.assignments)
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index a69f90ad..1cdd8ca9 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -45,7 +45,7 @@ onMounted(async () => {
 <template>
   <div class="bg-gray-200">
     <nav class="border-b bg-white px-4 lg:px-8">
-      <ul class="scrollbar overflow-auto whitespace-nowrap">
+      <ul class="flex flex-col lg:flex-row">
         <li
           class="inline-block border-t-2 border-t-transparent py-3"
           :class="{ 'border-b-2 border-b-blue-900': routeInOverview() }"
@@ -55,7 +55,7 @@ onMounted(async () => {
           </router-link>
         </li>
         <li
-          class="ml-6 inline-block border-t-2 border-t-transparent py-3 lg:ml-12"
+          class="inline-block border-t-2 border-t-transparent py-3 lg:ml-12"
           :class="{ 'border-b-2 border-b-blue-900': routeInCompetenceCertificate() }"
         >
           <router-link :to="`/course/${courseSlug}/competence/certificates`">
@@ -63,7 +63,7 @@ onMounted(async () => {
           </router-link>
         </li>
         <li
-          class="ml-6 inline-block border-t-2 border-t-transparent py-3 lg:ml-12"
+          class="inline-block border-t-2 border-t-transparent py-3 lg:ml-12"
           :class="{ 'border-b-2 border-b-blue-900': routeInPerformanceCriteria() }"
         >
           <router-link :to="`/course/${courseSlug}/competence/criteria`">
@@ -72,7 +72,7 @@ onMounted(async () => {
         </li>
 
         <li
-          class="ml-6 inline-block border-t-2 border-t-transparent py-3 lg:ml-12"
+          class="inline-block border-t-2 border-t-transparent py-3 lg:ml-12"
           :class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
         >
           <router-link :to="`/course/${courseSlug}/competence/competences`">
diff --git a/client/src/pages/competence/PerformanceCriteriaPage.vue b/client/src/pages/competence/PerformanceCriteriaPage.vue
index 231f3cee..46172047 100644
--- a/client/src/pages/competence/PerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/PerformanceCriteriaPage.vue
@@ -60,15 +60,15 @@ const criteriaByLearningUnit = computed(() => {
       <div
         v-for="selfEvaluation in criteriaByLearningUnit"
         :key="selfEvaluation.luId"
-        class="flex items-center justify-between border-b py-4 last:border-b-0"
+        class="flex flex-col justify-between gap-4 border-b py-4 last:border-b-0 lg:flex-row lg:items-center"
       >
-        <div class="w-1/3">
+        <div class="lg:w-1/3">
           {{ $t("a.Circle") }}
           {{ selfEvaluation.circleTitle }}:
           {{ selfEvaluation.luTitle }}
         </div>
 
-        <div class="ml-4 flex w-1/3 flex-row items-center">
+        <div class="flex flex-row items-center lg:w-1/3">
           <div class="mr-6 flex flex-row items-center">
             <it-icon-smiley-thinking
               class="mr-2 inline-block h-8 w-8"