Merged in bugfix/VBV-760-responsiveness-verbessern (pull request #410)

VBV-760 Responsiveness verbessern Approved-by: Stéphanie Rotzetter
2024-11-05 16:11:02 +00:00 · 2024-11-05 16:11:02 +00:00 · a91a0f096c
parent c99fd7b17a e55a5e9e42
commit a91a0f096c
23 changed files with 60 additions and 33 deletions
--- 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>
--- a/client/src/components/dashboard/AssignmentSummary.vue
+++ b/client/src/components/dashboard/AssignmentSummary.vue
@ -31,7 +31,7 @@ onMounted(async () => {

 <template>
  <div v-if="assignment">
-    <div class="w-[395px]">
+    <div class="sm:w-[395px]">
      <AssignmentProgressSummaryBox
        :total-assignments="assignment.total_count"
        :achieved-points-count="assignment.points_achieved_count"
--- a/client/src/components/dashboard/AttendancePerChosenProfileChart.vue
+++ b/client/src/components/dashboard/AttendancePerChosenProfileChart.vue
@ -24,7 +24,7 @@ const data = computed(() => ({
 </script>
 w
 <template>
-  <div class="flex flex-row items-center space-x-8">
+  <div class="flex flex-row flex-wrap items-center gap-y-4 space-x-8 sm:gap-y-0">
    <div class="size-32">
      <Pie
        :data="data"
@ -39,7 +39,7 @@ w
        }"
      />
    </div>
-    <div class="flex flex-col space-y-2">
+    <div class="flex flex-col items-start">
      <div
        v-for="(value, key) in props.data"
        :key="key"
--- 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"
--- 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(() => {
@ -96,8 +100,10 @@ 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 items-start justify-between">
-          <h3 class="mb-4 text-3xl" data-cy="db-course-title">{{ courseName }}</h3>
+        <div class="flex flex-row flex-wrap items-start justify-between pb-3 sm:pb-0">
+          <h3 class="mb-4 text-xl sm:text-3xl" data-cy="db-course-title">
+            {{ courseName }}
+          </h3>
          <a
            v-if="hasActionButton()"
            :href="actionButtonProps.href"
@ -114,7 +120,7 @@ function hasActionButton(): boolean {
          <router-link
            v-if="courseConfig.has_preview"
            :to="getLearningPathUrl(courseConfig.course_slug)"
-            class="inline-block pl-6"
+            class="inline-block pt-3 sm:pl-6 sm:pt-0"
            target="_blank"
          >
            <div class="flex items-center">
@ -137,7 +143,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>

@ -179,7 +185,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')"
--- a/client/src/components/dashboard/MentorCompetenceSummary.vue
+++ b/client/src/components/dashboard/MentorCompetenceSummary.vue
@ -29,7 +29,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="`/statistic/${props.agentRole}/${courseSlug}/assignment`"
      data-cy="dashboard.mentor.competenceSummary"
--- 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"
          >
--- a/client/src/components/dashboard/TrainingResponsibleStatistics.vue
+++ b/client/src/components/dashboard/TrainingResponsibleStatistics.vue
@ -54,7 +54,7 @@ const attendanceCountPerChosenProfile = computed(() => {

 <template>
  <div class="flex flex-col">
-    <div class="flex flex-col flex-wrap items-stretch md:flex-row">
+    <div class="flex flex-col flex-wrap items-stretch gap-y-4 sm:gap-y-0 md:flex-row">
      <BaseBox
        :details-link="`/dashboard/cost/${courseSessionId}`"
        data-cy="dashboard.stats.trainingResponsible.cost"
--- a/client/src/components/dashboard/UkStatistics.vue
+++ b/client/src/components/dashboard/UkStatistics.vue
@ -64,7 +64,7 @@ onMounted(async () => {
 <template>
  <div v-if="statistics" class="space-y-8">
    <div
-      class="flex flex-col flex-wrap justify-between gap-x-5 border-b border-gray-300 pb-8 last:border-0 md:flex-row"
+      class="flex flex-col flex-wrap justify-between gap-x-5 gap-y-5 border-b border-gray-300 pb-8 last:border-0 md:flex-row"
    >
      <AttendanceSummaryBox
        class="flex-grow"
@ -80,7 +80,7 @@ onMounted(async () => {
      />
    </div>
    <div
-      class="flex flex-col flex-wrap gap-x-5 border-b border-gray-300 align-top last:border-0 md:flex-row"
+      class="flex flex-col flex-wrap gap-x-5 gap-y-5 border-b border-gray-300 align-top last:border-0 md:flex-row"
    >
      <FeedbackSummaryBox
        :feedback-count="feebackSummary.total_responses"
--- a/client/src/components/header/CoursePreviewBar.vue
+++ b/client/src/components/header/CoursePreviewBar.vue
@ -15,7 +15,7 @@ const { t } = useTranslation();
    <nav class="bg-yellow-500">
      <div class="mx-auto px-4 lg:px-8">
        <div
-          class="relative flex h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
+          class="relative flex h-auto min-h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
        >
          <span class="flex items-center px-1 pt-1 font-bold text-black">
            {{ t("a.Vorschau Teilnehmer") }} ({{ courseSession.title }})
--- 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"
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@ -37,6 +37,7 @@ const circles = computed(() => {
      (c) => props.showCircleSlugs?.includes(c.slug) ?? true
    );
  }
+
  return lpQueryResult.circles.value ?? [];
 });

@ -45,7 +46,10 @@ 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 +=
+      filteredCircles.value.length > 15
+        ? " flex-row h-3 space-x-[1.1px]"
+        : " flex-row h-4 space-x-[1.8px]";
  } else if (props.diagramType === "singleSmall") {
    classes += " h-8";
  }
--- a/client/src/components/userProfile/UserProfileContent.vue
+++ b/client/src/components/userProfile/UserProfileContent.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col sm:flex-row">
    <div class="flex-none border-r bg-white p-4 lg:p-8">
      <slot name="side"></slot>
    </div>
--- a/client/src/locales/de/translation.json
+++ b/client/src/locales/de/translation.json
@ -208,6 +208,7 @@
  "a.Nicht bestanden": "Nicht bestanden",
  "a.Nicht bewertet": "Nicht bewertet",
  "a.Nichtleben": "Nichtleben",
+  "a.Noch nicht bestätigt": "Noch nicht bestätigt",
  "a.Note": "Note",
  "a.NUMBER Elemente abgeschlossen": "{NUMBER} Elemente abgeschlossen",
  "a.NUMBER Präsenztage abgeschlossen": "{NUMBER} Präsenztage abgeschlossen",
--- a/client/src/locales/fr/translation.json
+++ b/client/src/locales/fr/translation.json
@ -208,6 +208,7 @@
  "a.Nicht bestanden": "Échoué",
  "a.Nicht bewertet": "Non évalué",
  "a.Nichtleben": "Non-vie",
+  "a.Noch nicht bestätigt": "Pas encore confirmé",
  "a.Note": "Note",
  "a.NUMBER Elemente abgeschlossen": "{NUMBER} éléments terminés",
  "a.NUMBER Präsenztage abgeschlossen": "{NUMBER} jours de présence complétés",
--- a/client/src/locales/it/translation.json
+++ b/client/src/locales/it/translation.json
@ -208,6 +208,7 @@
  "a.Nicht bestanden": "Non superato",
  "a.Nicht bewertet": "Non valutato",
  "a.Nichtleben": "Non vita",
+  "a.Noch nicht bestätigt": "Non ancora confermato",
  "a.Note": "Note",
  "a.NUMBER Elemente abgeschlossen": "{NUMBER} elementi completati",
  "a.NUMBER Präsenztage abgeschlossen": "{NUMBER} giorni di presenza completati",
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@ -177,12 +177,15 @@ watch(
        </button>
      </div>
      <section v-if="attendanceCourses.length && state.attendanceCourseSelected">
-        <div class="flex flex-row justify-between bg-white p-6">
+        <div class="flex flex-row flex-wrap justify-between bg-white p-6">
          <ItDropdownSelect
            v-model="state.attendanceCourseSelected"
            :items="presenceCoursesDropdownOptions ?? []"
          ></ItDropdownSelect>
-          <div v-if="!state.attendanceSaved" class="flex flex-row items-center">
+          <div
+            v-if="!state.attendanceSaved"
+            class="flex flex-row flex-wrap items-center space-y-2 md:space-y-0"
+          >
            <ItCheckbox
              :checkbox-item="{
                value: true,
--- a/client/src/pages/dashboard/statistic/AssignmentList.vue
+++ b/client/src/pages/dashboard/statistic/AssignmentList.vue
@ -63,9 +63,14 @@ const itemDetailUrl = (item: AssignmentStatisticsRecordType) => {

 <template>
  <main>
-    <div class="mb-10 flex items-center justify-between">
+    <div class="mb-10 flex flex-wrap items-center justify-between">
      <h3>{{ $t("a.Kompetenznachweis-Elemente") }}</h3>
-      <button v-if="true" class="flex" data-cy="export-button" @click="exportData">
+      <button
+        v-if="true"
+        class="flex pt-3 sm:pt-0"
+        data-cy="export-button"
+        @click="exportData"
+      >
        <it-icon-export></it-icon-export>
        <span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
      </button>
@ -78,7 +83,7 @@ const itemDetailUrl = (item: AssignmentStatisticsRecordType) => {
      >
        <template #default="{ item }">
          <div
-            class="flex justify-between"
+            class="flex flex-wrap justify-between"
            :data-cy="`${(item as AssignmentStatisticsRecordType).assignment_title}@${(item as AssignmentStatisticsRecordType).course_session_id}`"
          >
            <div>
@ -109,7 +114,7 @@ const itemDetailUrl = (item: AssignmentStatisticsRecordType) => {
                {{ total((item as AssignmentStatisticsRecordType).metrics) }}
                bestanden
              </div>
-              <div v-else>Noch nicht bestätigt</div>
+              <div v-else>{{ $t("a.Noch nicht bestätigt") }}</div>
              <ItProgress
                :status-count="
                  assignmentStats((item as AssignmentStatisticsRecordType).metrics)
--- a/client/src/pages/dashboard/statistic/AttendanceList.vue
+++ b/client/src/pages/dashboard/statistic/AttendanceList.vue
@ -64,7 +64,7 @@ async function exportData() {
        :items="courseStatistics.attendance_day_presences.records"
      >
        <template #default="{ item }">
-          <div class="flex justify-between">
+          <div class="flex flex-wrap justify-between">
            <div>
              <h4 class="font-bold">
                {{ $t("a.Präsenztag") }}: Circle «{{
--- a/client/src/pages/dashboard/statistic/CompetenceList.vue
+++ b/client/src/pages/dashboard/statistic/CompetenceList.vue
@ -25,7 +25,7 @@ const props = defineProps<{
        :items="courseStatistics.competences.records"
      >
        <template #default="{ item }">
-          <div class="flex justify-between">
+          <div class="flex flex-wrap justify-between space-y-2 md:space-y-0">
            <div>
              <h4 class="font-bold">
                {{ $t("a.Selbsteinschätzung") }}:
--- a/client/src/pages/dashboard/statistic/FeedbackList.vue
+++ b/client/src/pages/dashboard/statistic/FeedbackList.vue
@ -52,7 +52,7 @@ async function exportData() {
        :items="courseStatistics.feedback_responses.records"
      >
        <template #default="{ item }">
-          <div class="flex justify-between">
+          <div class="flex flex-wrap justify-between space-y-2 md:space-y-0">
            <div>
              <h4 class="font-bold">
                Feedback: Circle «{{ circleMeta(item.circle_id)?.name }}»
--- 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>
--- a/env_secrets/local_elia.env
+++ b/env_secrets/local_elia.env