ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile Anpassungen Kompetenzprofil

This commit is contained in:
Daniel Egger 2023-09-14 13:25:48 +02:00
parent dfa03baa25
commit 2c26a336ac
7 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/pages/competence/ActionCompetenceListPage.vue
View File

@ -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">

15
client/src/pages/competence/CompetenceAssignmentRow.vue
View File

@ -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>

13
client/src/pages/competence/CompetenceCertificateComponent.vue
View File

@ -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">

6
client/src/pages/competence/CompetenceCertificateListPage.vue
View File

@ -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">

6
client/src/pages/competence/CompetenceIndexPage.vue
View File

@ -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)

8
client/src/pages/competence/CompetenceParentPage.vue
View File

@ -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`">

6
client/src/pages/competence/PerformanceCriteriaPage.vue
View File

@ -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"