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

Make trainer dashboard and cockpit responsive

This commit is contained in:
Elia Bieri 2024-10-22 11:36:41 +02:00
parent d4a941ab27
commit 37bac32999
8 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/dashboard/CoursePanel.vue
View File

@ -90,7 +90,7 @@ function hasActionButton(): boolean {
> >
<div class="flex flex-col space-y-8 bg-white p-6"> <div class="flex flex-col space-y-8 bg-white p-6">
<div class="border-b border-gray-300 pb-8"> <div class="border-b border-gray-300 pb-8">
<div class="flex flex-row items-start justify-between"> <div class="flex flex-row flex-wrap items-start justify-between pb-3 sm:pb-0">
<h3 class="mb-4 text-3xl" data-cy="db-course-title">{{ courseName }}</h3> <h3 class="mb-4 text-3xl" data-cy="db-course-title">{{ courseName }}</h3>
<a <a
v-if="hasActionButton()" v-if="hasActionButton()"

4
client/src/components/dashboard/UkStatistics.vue
View File

@ -64,7 +64,7 @@ onMounted(async () => {
<template> <template>
<div v-if="statistics" class="space-y-8"> <div v-if="statistics" class="space-y-8">
<div <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 <AttendanceSummaryBox
class="flex-grow" class="flex-grow"
@ -80,7 +80,7 @@ onMounted(async () => {
/> />
</div> </div>
<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 <FeedbackSummaryBox
:feedback-count="feebackSummary.total_responses" :feedback-count="feebackSummary.total_responses"

2
client/src/components/header/CoursePreviewBar.vue
View File

@ -15,7 +15,7 @@ const { t } = useTranslation();
<nav class="bg-yellow-500"> <nav class="bg-yellow-500">
<div class="mx-auto px-4 lg:px-8"> <div class="mx-auto px-4 lg:px-8">
<div <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"> <span class="flex items-center px-1 pt-1 font-bold text-black">
{{ t("a.Vorschau Teilnehmer") }} ({{ courseSession.title }}) {{ t("a.Vorschau Teilnehmer") }} ({{ courseSession.title }})

2
client/src/components/userProfile/UserProfileContent.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="flex flex-col sm:flex-row">
<div class="flex-none border-r bg-white p-4 lg:p-8"> <div class="flex-none border-r bg-white p-4 lg:p-8">
<slot name="side"></slot> <slot name="side"></slot>
</div> </div>

7
client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
View File

@ -177,12 +177,15 @@ watch(
</button> </button>
</div> </div>
<section v-if="attendanceCourses.length && state.attendanceCourseSelected"> <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 <ItDropdownSelect
v-model="state.attendanceCourseSelected" v-model="state.attendanceCourseSelected"
:items="presenceCoursesDropdownOptions ?? []" :items="presenceCoursesDropdownOptions ?? []"
></ItDropdownSelect> ></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 <ItCheckbox
:checkbox-item="{ :checkbox-item="{
value: true, value: true,

2
client/src/pages/dashboard/statistic/AttendanceList.vue
View File

@ -64,7 +64,7 @@ async function exportData() {
:items="courseStatistics.attendance_day_presences.records" :items="courseStatistics.attendance_day_presences.records"
> >
<template #default="{ item }"> <template #default="{ item }">
<div class="flex justify-between"> <div class="flex flex-wrap justify-between">
<div> <div>
<h4 class="font-bold"> <h4 class="font-bold">
{{ $t("a.Präsenztag") }}: Circle «{{ {{ $t("a.Präsenztag") }}: Circle «{{

2
client/src/pages/dashboard/statistic/CompetenceList.vue
View File

@ -25,7 +25,7 @@ const props = defineProps<{
:items="courseStatistics.competences.records" :items="courseStatistics.competences.records"
> >
<template #default="{ item }"> <template #default="{ item }">
<div class="flex justify-between"> <div class="flex flex-wrap justify-between space-y-2 md:space-y-0">
<div> <div>
<h4 class="font-bold"> <h4 class="font-bold">
{{ $t("a.Selbsteinschätzung") }}: {{ $t("a.Selbsteinschätzung") }}:

2
client/src/pages/dashboard/statistic/FeedbackList.vue
View File

@ -52,7 +52,7 @@ async function exportData() {
:items="courseStatistics.feedback_responses.records" :items="courseStatistics.feedback_responses.records"
> >
<template #default="{ item }"> <template #default="{ item }">
<div class="flex justify-between"> <div class="flex flex-wrap justify-between space-y-2 md:space-y-0">
<div> <div>
<h4 class="font-bold"> <h4 class="font-bold">
Feedback: Circle «{{ circleMeta(item.circle_id)?.name }}» Feedback: Circle «{{ circleMeta(item.circle_id)?.name }}»