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

Cockpit Mobile Anpassungen

This commit is contained in:
Daniel Egger 2023-09-14 14:05:03 +02:00
parent 2c26a336ac
commit e7bbf961d5
9 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/AppFooter.vue
View File

@ -33,13 +33,13 @@ async function changeLocale(language: AvailableLanguages) {
<div class="flex-grow"></div> <div class="flex-grow"></div>
<div :class="{ hidden: hideVersion }">VBV_VERSION_BUILD_NUMBER_VBV</div> <div :class="{ hidden: hideVersion }">VBV_VERSION_BUILD_NUMBER_VBV</div>
<Menu> <Menu>
<MenuButton class="lg:ml-8" data-cy="language-switch-button"> <MenuButton class="text-left lg:ml-8" data-cy="language-switch-button">
<it-icon-globe class="relative top-[2px] h-4 w-4" /> <it-icon-globe class="relative top-[2px] h-4 w-4" />
<span class="ml-2 inline">{{ $t(`language.${userStore.language}`) }}</span> <span class="ml-2 inline">{{ $t(`language.${userStore.language}`) }}</span>
</MenuButton> </MenuButton>
<div class="relative"> <div class="relative">
<MenuItems <MenuItems
class="lg:right- absolute -right-2/3 -top-24 w-40 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" class="absolute bottom-0 w-40 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:right-0"
> >
<MenuItem v-for="locale in SUPPORT_LOCALES" :key="locale" class="py-1"> <MenuItem v-for="locale in SUPPORT_LOCALES" :key="locale" class="py-1">
<button <button

2
client/src/components/ui/ItPersonRow.vue
View File

@ -11,7 +11,7 @@ defineProps<{
<ItRow> <ItRow>
<template #firstRow> <template #firstRow>
<slot name="leading"></slot> <slot name="leading"></slot>
<img class="mr-2 h-[45px] rounded-full" :src="avatarUrl" /> <img class="mr-2 h-11 w-11 rounded-full" :src="avatarUrl" />
<p class="text-bold lg:leading-[45px]">{{ name }}</p> <p class="text-bold lg:leading-[45px]">{{ name }}</p>
</template> </template>
<template #center> <template #center>

4
client/src/components/ui/ItRow.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<li <li
class="flex flex-col justify-between border-t border-gray-500 py-4 leading-[45px] lg:flex-row" class="flex flex-col justify-between gap-2 border-t border-gray-500 py-4 leading-[45px] lg:flex-row lg:gap-4"
> >
<div class="flex flex-row items-center lg:w-1/3"> <div class="flex flex-row items-center lg:w-1/3">
<slot name="firstRow"></slot> <slot name="firstRow"></slot>
</div> </div>
<div class="flex flex-1 items-center"> <div class="flex flex-1 lg:items-center">
<slot name="center"></slot> <slot name="center"></slot>
</div> </div>
<div class="flex items-center lg:w-1/4"> <div class="flex items-center lg:w-1/4">

21
client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
View File

@ -13,6 +13,7 @@ import { useQuery } from "@urql/vue";
import log from "loglevel"; import log from "loglevel";
import { computed, onMounted, reactive } from "vue"; import { computed, onMounted, reactive } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { getPreviousRoute } from "@/router/history";
const props = defineProps<{ const props = defineProps<{
courseSlug: string; courseSlug: string;
@ -53,10 +54,16 @@ onMounted(async () => {
); );
}); });
const previousRoute = getPreviousRoute();
function close() { function close() {
router.push({ if (previousRoute) {
path: `/course/${props.courseSlug}/cockpit/assignment`, router.push(previousRoute);
}); } else {
router.push({
path: `/course/${props.courseSlug}/cockpit`,
});
}
} }
const assignmentCompletion = computed( const assignmentCompletion = computed(
@ -96,8 +103,8 @@ const assignment = computed(
v-if="assignment && assignmentCompletion && state.assignmentUser" v-if="assignment && assignmentCompletion && state.assignmentUser"
class="relative" class="relative"
> >
<div class="h-content flex flex-col sm:flex-row"> <div class="md:h-content flex flex-col md:flex-row">
<div class="h-full overflow-y-auto bg-white sm:w-1/2"> <div class="bg-white md:h-full md:w-1/2 md:overflow-y-auto">
<!-- Left part content goes here --> <!-- Left part content goes here -->
<div class="p-10" data-cy="student-submission"> <div class="p-10" data-cy="student-submission">
<h3>{{ $t("a.Ergebnisse") }}</h3> <h3>{{ $t("a.Ergebnisse") }}</h3>
@ -119,7 +126,9 @@ const assignment = computed(
></AssignmentSubmissionResponses> ></AssignmentSubmissionResponses>
</div> </div>
</div> </div>
<div class="overflow-y-auto bg-gray-200 sm:w-1/2"> <div
class="order-first bg-gray-200 md:order-last md:w-1/2 md:overflow-y-auto"
>
<EvaluationContainer <EvaluationContainer
:assignment-completion="assignmentCompletion" :assignment-completion="assignmentCompletion"
:assignment-user="state.assignmentUser" :assignment-user="state.assignmentUser"

8
client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue
View File

@ -95,7 +95,7 @@ const assignmentDetail = computed(() =>
:data-cy="csu.last_name" :data-cy="csu.last_name"
> >
<template #center> <template #center>
<section class="flex w-full justify-between px-8"> <section class="flex w-full justify-between">
<div <div
v-if=" v-if="
state.gradedUsers.map((gradedUser) => gradedUser.user).includes(csu) state.gradedUsers.map((gradedUser) => gradedUser.user).includes(csu)
@ -107,7 +107,7 @@ const assignmentDetail = computed(() =>
> >
<it-icon-check class="h-4/5 w-4/5"></it-icon-check> <it-icon-check class="h-4/5 w-4/5"></it-icon-check>
</div> </div>
<div class="ml-2">Bewertung freigegeben</div> <div class="ml-2">{{ $t("a.Bewertung freigegeben") }}</div>
</div> </div>
<div <div
v-else-if="state.assignmentSubmittedUsers.includes(csu)" v-else-if="state.assignmentSubmittedUsers.includes(csu)"
@ -118,7 +118,7 @@ const assignmentDetail = computed(() =>
> >
<it-icon-check class="h-6 w-6"></it-icon-check> <it-icon-check class="h-6 w-6"></it-icon-check>
</div> </div>
<div class="ml-2">Ergebnisse abgegeben</div> <div class="ml-2">{{ $t("a.Ergebnisse abgegeben") }}</div>
</div> </div>
<div <div
@ -137,7 +137,7 @@ const assignmentDetail = computed(() =>
<router-link <router-link
v-if="state.assignmentSubmittedUsers.includes(csu)" v-if="state.assignmentSubmittedUsers.includes(csu)"
:to="`/course/${props.courseSession.course.slug}/cockpit/assignment/${learningContentAssignment.content_assignment_id}/${csu.user_id}`" :to="`/course/${props.courseSession.course.slug}/cockpit/assignment/${learningContentAssignment.content_assignment_id}/${csu.user_id}`"
class="w-full text-right underline" class="link lg:w-full lg:text-right"
data-cy="show-results" data-cy="show-results"
> >
{{ $t("Ergebnisse anzeigen") }} {{ $t("Ergebnisse anzeigen") }}

12
client/src/pages/cockpit/cockpitPage/CockpitPage.vue
View File

@ -95,8 +95,8 @@ function setActiveClasses(translationKey: string) {
</div> </div>
</div> </div>
<!-- Status --> <!-- Status -->
<div class="mb-4 grid grid-rows-3 gap-4 lg:grid-cols-3 lg:grid-rows-none"> <div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
<div class="flex flex-col justify-between bg-white px-6 py-5"> <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
<div> <div>
<h3 class="heading-3 mb-4 flex items-center gap-2"> <h3 class="heading-3 mb-4 flex items-center gap-2">
{{ $t("Trainerunterlagen") }} {{ $t("Trainerunterlagen") }}
@ -115,7 +115,7 @@ function setActiveClasses(translationKey: string) {
</a> </a>
</div> </div>
</div> </div>
<div class="flex flex-col justify-between bg-white p-6"> <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
<div> <div>
<h3 class="heading-3 mb-4 flex items-center gap-2"> <h3 class="heading-3 mb-4 flex items-center gap-2">
{{ $t("Anwesenheitskontrolle Präsenzkurse") }} {{ $t("Anwesenheitskontrolle Präsenzkurse") }}
@ -158,13 +158,13 @@ function setActiveClasses(translationKey: string) {
> >
<template #center> <template #center>
<div <div
class="mt-2 flex w-full flex-row items-center justify-between lg:mt-0" class="mt-2 flex w-full flex-col items-center justify-between lg:mt-0 lg:flex-row"
> >
<ul class="w-full"> <ul class="w-full">
<li <li
v-for="(circle, i) of cockpitStore.selectedCircles" v-for="(circle, i) of cockpitStore.selectedCircles"
:key="i" :key="i"
class="flex h-12 items-center justify-between" class="flex flex-col justify-between lg:h-12 lg:flex-row lg:items-center"
> >
<LearningPathDiagram <LearningPathDiagram
v-if=" v-if="
@ -222,7 +222,7 @@ function setActiveClasses(translationKey: string) {
<template #link> <template #link>
<router-link <router-link
:to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`" :to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
class="w-full text-right underline" class="link w-full lg:text-right"
> >
{{ $t("general.profileLink") }} {{ $t("general.profileLink") }}
</router-link> </router-link>

13
client/src/pages/cockpit/cockpitPage/SubmissionsOverview.vue
View File

@ -132,10 +132,15 @@ const getIconName = (lc: LearningContent) => {
<div <div
v-for="submittable in submittables" v-for="submittable in submittables"
:key="submittable.id" :key="submittable.id"
class="flex flex-row justify-between py-4" class="flex flex-col justify-between gap-2 py-4 lg:flex-row lg:gap-4"
> >
<div class="flex w-1/3 flex-row items-center space-x-4 pr-2"> <div class="flex flex-row items-center gap-2 lg:w-1/3">
<component :is="getIconName(submittable.content)" class="h-9 w-9"></component> <div class="min-h-9 min-w-9">
<component
:is="getIconName(submittable.content)"
class="min-h-9 min-w-9"
></component>
</div>
<div class="flex flex-col"> <div class="flex flex-col">
<h3 class="text-bold flex items-center gap-2">{{ submittable.title }}</h3> <h3 class="text-bold flex items-center gap-2">{{ submittable.title }}</h3>
<p class="text-gray-800">Circle «{{ submittable.circleName }}»</p> <p class="text-gray-800">Circle «{{ submittable.circleName }}»</p>
@ -154,7 +159,7 @@ const getIconName = (lc: LearningContent) => {
:circle-id="submittable.content.parentCircle.id" :circle-id="submittable.content.parentCircle.id"
class="grow pr-8" class="grow pr-8"
></FeedbackSubmissionProgress> ></FeedbackSubmissionProgress>
<div class="flex w-1/4 items-center justify-end"> <div class="flex items-center lg:w-1/4 lg:justify-end">
<button class="btn-primary"> <button class="btn-primary">
<router-link <router-link
:to="submittable.detailsLink" :to="submittable.detailsLink"

26
client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
View File

@ -2,7 +2,6 @@
import { useCurrentCourseSession } from "@/composables"; import { useCurrentCourseSession } from "@/composables";
import { UPSERT_ASSIGNMENT_COMPLETION_MUTATION } from "@/graphql/mutations"; import { UPSERT_ASSIGNMENT_COMPLETION_MUTATION } from "@/graphql/mutations";
import { ASSIGNMENT_COMPLETION_QUERY } from "@/graphql/queries"; import { ASSIGNMENT_COMPLETION_QUERY } from "@/graphql/queries";
import EvaluationSummary from "@/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue";
import AssignmentIntroductionView from "@/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue"; import AssignmentIntroductionView from "@/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue";
import AssignmentSubmissionView from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue"; import AssignmentSubmissionView from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue";
import AssignmentTaskView from "@/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue"; import AssignmentTaskView from "@/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue";
@ -25,6 +24,7 @@ import { computed, onMounted, reactive } from "vue";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
import { bustItGetCache } from "@/fetchHelpers"; import { bustItGetCache } from "@/fetchHelpers";
import { learningContentTypeData } from "@/utils/typeMaps"; import { learningContentTypeData } from "@/utils/typeMaps";
import EvaluationSummary from "@/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue";
const { t } = useTranslation(); const { t } = useTranslation();
const courseSession = useCurrentCourseSession(); const courseSession = useCurrentCourseSession();
@ -194,7 +194,18 @@ const assignmentUser = computed(() => {
<div v-else-if="queryResult.error.value">{{ queryResult.error.value }}</div> <div v-else-if="queryResult.error.value">{{ queryResult.error.value }}</div>
<div v-else> <div v-else>
<div v-if="assignment && assignmentCompletion"> <div v-if="assignment && assignmentCompletion">
<div class="flex"> <div class="flex flex-col lg:flex-row">
<div
v-if="assignmentCompletion?.completion_status === 'EVALUATION_SUBMITTED'"
class="min-w-2/5 mr-4 bg-gray-200 px-6 py-6 lg:order-last"
>
<EvaluationSummary
:assignment-user="assignmentUser"
:assignment="assignment"
:assignment-completion="assignmentCompletion"
:show-evaluation-user="true"
></EvaluationSummary>
</div>
<LearningContentMultiLayout <LearningContentMultiLayout
:current-step="stepIndex" :current-step="stepIndex"
:sub-title="subTitle" :sub-title="subTitle"
@ -239,17 +250,6 @@ const assignmentUser = computed(() => {
</div> </div>
</div> </div>
</LearningContentMultiLayout> </LearningContentMultiLayout>
<div
v-if="assignmentCompletion?.completion_status === 'EVALUATION_SUBMITTED'"
class="min-w-2/5 mr-4 bg-gray-200 px-6 py-6"
>
<EvaluationSummary
:assignment-user="assignmentUser"
:assignment="assignment"
:assignment-completion="assignmentCompletion"
:show-evaluation-user="true"
></EvaluationSummary>
</div>
</div> </div>
</div> </div>
<div v-else>Could not load all data</div> <div v-else>Could not load all data</div>

2
client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
View File

@ -74,7 +74,7 @@ const changeViewType = (viewType: ViewType) => {
<!-- Top --> <!-- Top -->
<div class="flex flex-row justify-between space-x-8 bg-gray-200 p-6 sm:p-12"> <div class="flex flex-row justify-between space-x-8 bg-gray-200 p-6 sm:p-12">
<!-- Left --> <!-- Left -->
<div class="flex w-1/2 flex-col justify-between"> <div class="flex flex-col justify-between lg:w-1/2">
<div> <div>
<p class="font-bold"> <p class="font-bold">
{{ $t("learningPathPage.welcomeBack") }} {{ $t("learningPathPage.welcomeBack") }}