From ffe1709e7f7a00d05c550a70ce983ef0659eb0da Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Tue, 22 Oct 2024 15:55:51 +0200
Subject: [PATCH] Make Lernbegleitung and Student responsive

---
 .../dashboard/AgentConnectionCount.vue        |   8 +++++---
 .../dashboard/CompetenceSummary.vue           |   2 +-
 .../src/components/dashboard/CoursePanel.vue  |  10 +++++++---
 .../dashboard/MentorCompetenceSummary.vue     |   2 +-
 .../dashboard/MentorOpenTasksCount.vue        |   4 ++--
 .../learningMentor/AssignmentItem.vue         |   8 ++++++--
 .../learningPath/LearningPathDiagram.vue      |   2 +-
 .../learningPathPage/LearningPathCircle.vue   |   2 +-
 env_secrets/local_elia.env                    | Bin 1529 -> 2069 bytes
 9 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/client/src/components/dashboard/AgentConnectionCount.vue b/client/src/components/dashboard/AgentConnectionCount.vue
index eca05793..68d36908 100644
--- a/client/src/components/dashboard/AgentConnectionCount.vue
+++ b/client/src/components/dashboard/AgentConnectionCount.vue
@@ -29,7 +29,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-[325px]">
+  <div class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/dashboard/persons?course=${props.courseId}`"
       data-cy="dashboard.mentor.menteeCount"
@@ -37,14 +37,16 @@ onMounted(async () => {
     >
       <template #title>{{ $t("a.Personen") }}</template>
       <template #content>
-        <div :class="['flex flex-row space-x-3 bg-white', slim ? '' : 'pb-6']">
+        <div
+          :class="['flex flex-row flex-wrap items-center bg-white', slim ? '' : 'pb-6']"
+        >
           <div
             class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
             data-cy="dashboard.mentor.menteeCountValue"
           >
             <span>{{ menteeCount }}</span>
           </div>
-          <p class="ml-3 mt-0 leading-[74px]">
+          <p class="mt-0">
             {{ $t("a.Personen, die du begleitest") }}
           </p>
         </div>
diff --git a/client/src/components/dashboard/CompetenceSummary.vue b/client/src/components/dashboard/CompetenceSummary.vue
index f463d5a9..31faee03 100644
--- a/client/src/components/dashboard/CompetenceSummary.vue
+++ b/client/src/components/dashboard/CompetenceSummary.vue
@@ -25,7 +25,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="competence" class="w-[395px]">
+  <div v-if="competence" class="sm:w-[395px]">
     <CompetenceSummaryBox
       :fail-count="competence.fail_count"
       :success-count="competence.success_count"
diff --git a/client/src/components/dashboard/CoursePanel.vue b/client/src/components/dashboard/CoursePanel.vue
index d57eb7a7..8b62a471 100644
--- a/client/src/components/dashboard/CoursePanel.vue
+++ b/client/src/components/dashboard/CoursePanel.vue
@@ -9,6 +9,7 @@ import UkStatistics from "@/components/dashboard/UkStatistics.vue";
 import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
 import type { DashboardCourseConfigType, WidgetType } from "@/services/dashboard";
 import { getCockpitUrl, getLearningMentorUrl, getLearningPathUrl } from "@/utils/utils";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed } from "vue";
 import TrainingResponsibleStatistics from "./TrainingResponsibleStatistics.vue";
 
@@ -23,6 +24,9 @@ const props = defineProps<{
   courseConfig: DashboardCourseConfigType | undefined;
 }>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const smAndLarger = breakpoints.greaterOrEqual("sm");
+
 const courseSlug = computed(() => props.courseConfig?.course_slug ?? "");
 const courseName = computed(() => props.courseConfig?.course_title ?? "");
 const numberOfMentorWidgets = computed(() => {
@@ -91,7 +95,7 @@ function hasActionButton(): boolean {
     <div class="flex flex-col space-y-8 bg-white p-6">
       <div class="border-b border-gray-300 pb-8">
         <div class="flex flex-row flex-wrap items-start justify-between pb-3 sm:pb-0">
-          <h3 class="mb-4 text-2xl sm:text-3xl" data-cy="db-course-title">
+          <h3 class="mb-4 text-xl sm:text-3xl" data-cy="db-course-title">
             {{ courseName }}
           </h3>
           <a
@@ -133,7 +137,7 @@ function hasActionButton(): boolean {
           :key="courseSlug"
           :course-slug="courseSlug"
           :course-session-id="courseConfig.session_to_continue_id"
-          diagram-type="horizontal"
+          :diagram-type="smAndLarger ? 'horizontal' : 'horizontalSmall'"
         ></LearningPathDiagram>
       </div>
 
@@ -175,7 +179,7 @@ function hasActionButton(): boolean {
 
       <div
         v-if="numberOfMentorWidgets > 0"
-        class="flex flex-col flex-wrap items-stretch md:flex-row"
+        class="flex flex-col flex-wrap items-stretch space-y-4 sm:space-y-0 md:flex-row"
       >
         <AgentConnectionCount
           v-if="hasWidget('MentorPersonWidget')"
diff --git a/client/src/components/dashboard/MentorCompetenceSummary.vue b/client/src/components/dashboard/MentorCompetenceSummary.vue
index d9983090..4102013d 100644
--- a/client/src/components/dashboard/MentorCompetenceSummary.vue
+++ b/client/src/components/dashboard/MentorCompetenceSummary.vue
@@ -27,7 +27,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="summary" class="w-[325px]">
+  <div v-if="summary" class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/dashboard/persons-competence?course=${props.courseId}`"
       data-cy="dashboard.mentor.competenceSummary"
diff --git a/client/src/components/dashboard/MentorOpenTasksCount.vue b/client/src/components/dashboard/MentorOpenTasksCount.vue
index efccbb48..390218b5 100644
--- a/client/src/components/dashboard/MentorOpenTasksCount.vue
+++ b/client/src/components/dashboard/MentorOpenTasksCount.vue
@@ -18,14 +18,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-[325px]">
+  <div class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/course/${props.courseSlug}/learning-mentor/tasks`"
       data-cy="dashboard.mentor.openTasksCount"
     >
       <template #title>{{ $t("a.Zu erledigen") }}</template>
       <template #content>
-        <div class="flex flex-row space-x-3 bg-white pb-6">
+        <div class="flex flex-row flex-wrap 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"
           >
diff --git a/client/src/components/learningMentor/AssignmentItem.vue b/client/src/components/learningMentor/AssignmentItem.vue
index d2eb9d6e..4a7022b4 100644
--- a/client/src/components/learningMentor/AssignmentItem.vue
+++ b/client/src/components/learningMentor/AssignmentItem.vue
@@ -26,14 +26,18 @@ const hasPendingTasks = computed(() => props.pendingTasks > 0);
   <div
     class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
   >
-    <div class="flex flex-grow flex-row items-center justify-start">
+    <div
+      class="flex flex-grow flex-row flex-wrap items-center justify-start space-y-4 sm:space-y-0"
+    >
       <div class="w-80">
         <div class="font-bold">{{ taskTitle }}</div>
         <div class="text-small text-gray-900">
           {{ $t("a.Circle") }} «{{ circleTitle }}»
         </div>
       </div>
-      <div class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20">
+      <div
+        class="flex flex-grow flex-row items-center justify-start space-x-2 sm:pl-20"
+      >
         <template v-if="hasPendingTasks">
           <div
             class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"
diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index 94ae34e3..25b61b51 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -45,7 +45,7 @@ const wrapperClasses = computed(() => {
   if (props.diagramType === "horizontal") {
     classes += " flex-row h-8 space-x-2";
   } else if (props.diagramType === "horizontalSmall") {
-    classes += " flex-row h-5 space-x-1";
+    classes += " flex-row h-4 space-x-[1.8px]";
   } else if (props.diagramType === "singleSmall") {
     classes += " h-8";
   }
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue b/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
index 7f497972..65c1726d 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
@@ -133,7 +133,7 @@ function render() {
   <div class="aspect-square content-center">
     <pre hidden>{{ pieData }}</pre>
     <pre hidden>{{ render() }}</pre>
-    <svg :id="svgId" class="h-full min-w-[20px]">
+    <svg :id="svgId" class="h-full">
       <circle :cx="width / 2" :cy="height / 2" :r="radius" :color="colors.gray[300]" />
       <circle :cx="width / 2" :cy="height / 2" :r="radius / 2.5" color="white" />
     </svg>
diff --git a/env_secrets/local_elia.env b/env_secrets/local_elia.env
index 2ea6b0a9781c4258b0a214dd0e8ecbfbe2f1e2ea..54bc2037e19e70a6f0a63eb957bf98071197da1f 100644
GIT binary patch
literal 2069
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

literal 1529
zcmV<V1qS*6M@dveQdv+`07xhzU=~hI7oI`3+b#}ldh}ZCcsragJdlA|77K!2FeU(5
zHyX%{1e(Ehjc*{?8A3aWUV}c_vAJ)NmFBW53%Um#A1kQn^8wSG;wpmEvCBf>1HJ>8
zFdRU_tW?eu6Vq7bRV9T(kZR^a>U1=Sy}-9?G4ok&Yu5`$mjsl%r&XmP>nfdjfkKw`
zF`^D4BfUp%*V?<#*>Sij^uL>@;hCeF+Rb#_@g47^cQw<x)=Z~SGMfKqYnT^!cAakq
zCQ*Asj@r6=U>TC>CjEjhcjnxEg?3TC(5*G=MS)3!7BU0Eo}jnr!9k+$Zl^ga)y%*Z
zSM4K4;k2>`EwstlRo~nSoQ<vS<|Zr>{rDmJdh$o+MdW*qhhQT=Sr+|90X(2TWXhG@
zJU2SVYg?*QTybxseDcH4pgav>7ttee>-HmjB0`R3ZJCt}(fa2iU>cBt8px5f>kU;g
zM0nC6;wv#Lj28KX5Qr3)Ia<SOzM#sR+J}>>*PUWd&BP(YR43m{qA`42pD2s9LgSwT
zdY`D^qcliq?>>x_)I$$@T(yMJFCOm7fESpyEzK&gNKUs5pyhrybQ0xd;b3FB$*Nnm
z_W(sJifq~V4-RSGwr&6LKQf($zygI74!RT^liS$G;z9@pkB$TkfKg)b#$|Veb(f30
z^6)GPwfI`cAB3%LCD7OgOiO^e=^4@|N)|W$Sh*z;9gj9D^!}<ptu^OU@m9$^IEBhw
zw+D;$$U!K|zc}7p1|(Twt#*Ea?vV?y_F$X#u(v8}Eq5}QW61;&tp{){tt_p|DQzlM
z;<5NK#h$eF$>^keUbpLBjhy15Q|lW^MV4BrCji{t2qd1dH-jYfeLIZ;K&?0rJz9q$
zSE%~M6mmH6g5z&wY;a_wi5Yk6%V7A${VAA}hX=J0tb8qLK5B*)bYGU&Yi7Ne=+k#}
z<s?&@Ee^@<6EAnyA4q0b5>tn(MAvJHqCb~<W_67Sop&)nZj-h(-(e&2SbX6s1?#}c
z4<QSmAzFOm6Ubj0_^(m8uzO?S1K)x~(L*{B_R>U73$)V$9LEB;MGV6pbQsviE9aic
zjw5@J>w*ys*@aVhuP@_fdF3qW*lCa4hI9AGJG1MlLR7Y$>s~}Qrc7%_B<0S8E5NI`
zShPc)s6z^)L)izt3%C@4cdfwPXAB?HLoe2q<G(Fs+JN}2Z5RD=3$To01_<9Eg+)ZE
zcvQ&6p~wn)XT`h1Cg_P0Bu5qZv@_KtL30GhSdu>kF!OXR4eAqN>O>gWNm|qP@JbWK
zz@?ZqbS`cEg0A$gu&$E=y^WEJ_z6CkAXrxH1@AP$LagS3vIz5pp&HL7_-V+H$NXx#
zn*wkn?x_=L1TB!MYy$*smkzOfoV1v^PHG1+Ej%2LgzuKkIMni-TzU_OW^{M9B(D9S
zy?3=d+$(C4%0%42N@a>tSCNOk>hE6-hP<&x1i?=H(pV`0?qj{@9%@9{AD`rO<HZVq
zzmm<;r0~C5kb`U4km_Ev%a7(Mtm9j+GF&)mp+aeWnmgu5zo{G(Q2t8i20q8+&~_@+
z(<Lu!LF<tp&pxb@DYgvYk5^>hq@>^|y^k*G9*XV3z2{H}3xr?&`NW0Vq&ef1hVK@G
zfR*4Ycfayif2Nx?45mv`G_Q>X%F?EOG{Lc#GagKS_l{|%kGhPz=uIT^+Z}53qUnHS
zyZ44wRvdr!ajk&L@<SAj?OS}M4zT76R50#~wwSuvGbB`z6Q}fJ84X;Q&NW&yZfnML
z-wJn&b5q#bzg`H0ld@Ngqm6=neBQmo&PqRM^4HykZL$el>QtW@$Bn@w@dwQg3QUu}
zVi)ZIgo?sV1&y+eALVdQRKU}jtksK@!i&}L*Quu1U(B%j*NV(>B4>|9Z}u92E8ndT
zPQ*kRq$u5;aBBsf79(tAC~!o?u-D4L5-g8*s==oLOAKYJm1rgio9!i181OGP-XmSg
f|HkC6PW94U&QNa=s+`5aLR@rEd=Lm5@2tK^z*qJM