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

Add component for horizontal bar charts

This commit is contained in:
Ramon Wenger 2023-01-23 17:50:42 +01:00 committed by Christian Cueni
parent 2fed11784c
commit ef0354ec5c
53 changed files with 369 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col min-h-full"> <div class="flex min-h-full flex-col">
<MainNavigationBar class="flex-none" /> <MainNavigationBar class="flex-none" />
<RouterView v-slot="{ Component }" class="flex-auto"> <RouterView v-slot="{ Component }" class="flex-auto">
<Transition mode="out-in" name="app"> <Transition mode="out-in" name="app">

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

@ -5,7 +5,7 @@ log.debug("AppFooter created");
</script> </script>
<template> <template>
<footer class="px-8 py-4 bg-gray-200 border-t flex flex-col lg:flex-row"> <footer class="flex flex-col border-t bg-gray-200 px-8 py-4 lg:flex-row">
<div>@ 2022 VBV</div> <div>@ 2022 VBV</div>
<div class="lg:ml-8">{{ $t("footer.faq") }}</div> <div class="lg:ml-8">{{ $t("footer.faq") }}</div>
<div class="lg:ml-8">{{ $t("footer.dataProtection") }}</div> <div class="lg:ml-8">{{ $t("footer.dataProtection") }}</div>

24
client/src/components/MainNavigationBar.vue
View File

@ -113,14 +113,14 @@ const profileDropdownData: DropdownListItem[] = [
</Teleport> </Teleport>
<Transition name="nav"> <Transition name="nav">
<div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900"> <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900">
<nav class="px-8 py-2 mx-auto lg:flex lg:justify-start lg:items-center lg:py-4"> <nav class="mx-auto px-8 py-2 lg:flex lg:items-center lg:justify-start lg:py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<router-link to="/" class="flex"> <router-link to="/" class="flex">
<it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3" /> <it-icon-vbv class="mr-3 -mt-6 -ml-3 h-8 w-16" />
</router-link> </router-link>
<router-link to="/" class="flex"> <router-link to="/" class="flex">
<div class="text-white text-2xl pr-10 pl-3 ml-1 border-l border-white"> <div class="ml-1 border-l border-white pr-10 pl-3 text-2xl text-white">
myVBV myVBV
</div> </div>
</router-link> </router-link>
@ -133,7 +133,7 @@ const profileDropdownData: DropdownListItem[] = [
class="nav-item flex flex-row items-center" class="nav-item flex flex-row items-center"
data-cy="messages-link" data-cy="messages-link"
> >
<it-icon-bell class="w-6 h-6 mr-6" /> <it-icon-bell class="mr-6 h-6 w-6" />
</router-link> </router-link>
<router-link <router-link
v-if="userStore.loggedIn" v-if="userStore.loggedIn"
@ -141,13 +141,13 @@ const profileDropdownData: DropdownListItem[] = [
class="nav-item flex flex-row items-center" class="nav-item flex flex-row items-center"
data-cy="messages-link" data-cy="messages-link"
> >
<it-icon-persons class="w-6 h-6 mr-6" /> <it-icon-persons class="mr-6 h-6 w-6" />
</router-link> </router-link>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex" @click="toggleNav"> <div class="flex" @click="toggleNav">
<button <button
type="button" type="button"
class="w-8 h-8 text-white hover:text-sky-500 focus:outline-none focus:text-sky-500" class="h-8 w-8 text-white hover:text-sky-500 focus:text-sky-500 focus:outline-none"
> >
<it-icon-menu class="h-8 w-8" /> <it-icon-menu class="h-8 w-8" />
</button> </button>
@ -159,7 +159,7 @@ const profileDropdownData: DropdownListItem[] = [
<div <div
v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn" v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn"
:class="state.showMenu ? 'flex' : 'hidden'" :class="state.showMenu ? 'flex' : 'hidden'"
class="flex-auto mt-8 lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0" class="mt-8 flex-auto lg:mt-0 lg:flex lg:flex-row lg:items-center lg:space-y-0 lg:space-x-10"
> >
<!-- <router-link--> <!-- <router-link-->
<!-- v-if="inCourse() && courseSessionsStore.courseSessionForRoute"--> <!-- v-if="inCourse() && courseSessionsStore.courseSessionForRoute"-->
@ -201,7 +201,7 @@ const profileDropdownData: DropdownListItem[] = [
{{ $t("competences.title") }} {{ $t("competences.title") }}
</router-link> </router-link>
<div class="hidden lg:block flex-auto"></div> <div class="hidden flex-auto lg:block"></div>
<a <a
class="nav-item" class="nav-item"
target="_blank" target="_blank"
@ -223,14 +223,14 @@ const profileDropdownData: DropdownListItem[] = [
class="nav-item flex flex-row items-center" class="nav-item flex flex-row items-center"
data-cy="messages-link" data-cy="messages-link"
> >
<it-icon-bell class="w-6 h-6 mr-6" /> <it-icon-bell class="mr-6 h-6 w-6" />
</router-link> </router-link>
<router-link <router-link
to="/messages" to="/messages"
class="nav-item flex flex-row items-center" class="nav-item flex flex-row items-center"
data-cy="messages-link" data-cy="messages-link"
> >
<it-icon-persons class="w-6 h-6 mr-6" /> <it-icon-persons class="mr-6 h-6 w-6" />
</router-link> </router-link>
<div v-if="userStore.loggedIn" class="nav-item flex items-center"> <div v-if="userStore.loggedIn" class="nav-item flex items-center">
<ItDropdown <ItDropdown
@ -261,11 +261,11 @@ const profileDropdownData: DropdownListItem[] = [
<style lang="postcss" scoped> <style lang="postcss" scoped>
.nav-item { .nav-item {
@apply text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal; @apply text-2xl font-bold text-white hover:text-sky-500 lg:text-base lg:font-normal;
} }
.nav-item--active { .nav-item--active {
@apply underline underline-offset-[21px] decoration-sky-500 decoration-4; @apply underline decoration-sky-500 decoration-4 underline-offset-[21px];
} }
.nav-enter-active, .nav-enter-active,

10
client/src/components/MobileMenu.vue
View File

@ -30,7 +30,7 @@ const clickLink = (to: string | undefined) => {
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')"> <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
<div> <div>
<div> <div>
<div v-if="userStore.loggedIn" class="border-b -mx-4 px-8 pb-4"> <div v-if="userStore.loggedIn" class="-mx-4 border-b px-8 pb-4">
<div class="-ml-4 flex"> <div class="-ml-4 flex">
<div v-if="userStore.avatar_url"> <div v-if="userStore.avatar_url">
<img <img
@ -52,8 +52,8 @@ const clickLink = (to: string | undefined) => {
</div> </div>
</div> </div>
<div> <div>
<div v-if="courseSession" class="mt-6 pb-6 border-b"> <div v-if="courseSession" class="mt-6 border-b pb-6">
<h4 class="text-gray-900 text-sm">{{ courseSession?.course.title }}</h4> <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
<ul class="mt-6"> <ul class="mt-6">
<li> <li>
<button @click="clickLink(courseSession?.learning_path_url)"> <button @click="clickLink(courseSession?.learning_path_url)">
@ -67,7 +67,7 @@ const clickLink = (to: string | undefined) => {
</li> </li>
</ul> </ul>
</div> </div>
<div class="mt-6 pb-6 border-b"> <div class="mt-6 border-b pb-6">
<ul> <ul>
<li> <li>
<a <a
@ -95,7 +95,7 @@ const clickLink = (to: string | undefined) => {
<button <button
v-if="userStore.loggedIn" v-if="userStore.loggedIn"
type="button" type="button"
class="mt-6 items-center flex" class="mt-6 flex items-center"
@click="userStore.handleLogout()" @click="userStore.handleLogout()"
> >
<IconLogout class="inline-block" /> <IconLogout class="inline-block" />

6
client/src/components/competences/CompetenceDetail.vue
View File

@ -29,9 +29,9 @@ const togglePerformanceCriteria = () => {
<template> <template>
<div> <div>
<div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8"> <div :class="{ 'mb-4 border-b pb-8': isOpen }" class="-mx-8 px-8">
<div <div
class="flex flex-row justify-between items-center" class="flex flex-row items-center justify-between"
:class="props.isInline ? '' : 'mb-4'" :class="props.isInline ? '' : 'mb-4'"
role="button" role="button"
aria-pressed="false" aria-pressed="false"
@ -64,7 +64,7 @@ const togglePerformanceCriteria = () => {
<li <li
v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)" v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
:key="performanceCriteria.id" :key="performanceCriteria.id"
class="mb-4 pb-4 border-b last:border-0" class="mb-4 border-b pb-4 last:border-0"
> >
<PerformanceCriteriaRow <PerformanceCriteriaRow
:criteria="performanceCriteria" :criteria="performanceCriteria"

8
client/src/components/competences/PerformanceCriteriaRow.vue
View File

@ -15,9 +15,9 @@ const props = withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<div class="flex flex-col lg:flex-row lg:items-center justify-between"> <div class="flex flex-col justify-between lg:flex-row lg:items-center">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div v-if="showState" class="h-8 w-8 mr-4"> <div v-if="showState" class="mr-4 h-8 w-8">
<it-icon-smiley-happy <it-icon-smiley-happy
v-if="criteria.completion_status === 'success'" v-if="criteria.completion_status === 'success'"
></it-icon-smiley-happy> ></it-icon-smiley-happy>
@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
></it-icon-smiley-thinking> ></it-icon-smiley-thinking>
<it-icon-smiley-neutral v-else></it-icon-smiley-neutral> <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
</div> </div>
<div class="pr-5 lg:mr-10 mb-4 lg:mb-0"> <div class="mb-4 pr-5 lg:mr-10 lg:mb-0">
<h4 class="text-bold mb-2"> <h4 class="text-bold mb-2">
{{ criteria.competence_id }} {{ criteria.title }} {{ criteria.competence_id }} {{ criteria.title }}
</h4> </h4>
@ -38,7 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
</p> </p>
</div> </div>
</div> </div>
<p class="lg:hidden mb-2"> <p class="mb-2 lg:hidden">
{{ $t("general.learningUnit") }}: {{ $t("general.learningUnit") }}:
<router-link class="link" :to="criteria.learning_unit.frontend_url"> <router-link class="link" :to="criteria.learning_unit.frontend_url">
{{ criteria.learning_unit.title }} {{ criteria.learning_unit.title }}

10
client/src/components/learningPath/CircleOverview.vue
View File

@ -15,11 +15,11 @@ const props = defineProps<{
<div v-if="circle" class="container-medium"> <div v-if="circle" class="container-medium">
<h1 class="">Überblick: Circle «{{ circle.title }}»</h1> <h1 class="">Überblick: Circle «{{ circle.title }}»</h1>
<p class="mt-8 text-large"> <p class="text-large mt-8">
Hier zeigen wir dir, was du in diesem Circle lernen wirst. Hier zeigen wir dir, was du in diesem Circle lernen wirst.
</p> </p>
<div v-show="circle.goals.length" class="mt-8 p-4 border"> <div v-show="circle.goals.length" class="mt-8 border p-4">
<h3>{{ circle.goal_description }}</h3> <h3>{{ circle.goal_description }}</h3>
<ul class="mt-4"> <ul class="mt-4">
@ -29,7 +29,7 @@ const props = defineProps<{
class="text-large flex items-center" class="text-large flex items-center"
> >
<it-icon-check <it-icon-check
class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none" class="mt-4 hidden h-12 w-12 flex-none text-sky-500 lg:block"
></it-icon-check> ></it-icon-check>
<div class="mt-4">{{ goal.value }}</div> <div class="mt-4">{{ goal.value }}</div>
</li> </li>
@ -41,11 +41,11 @@ const props = defineProps<{
{{ circle.job_situation_description }} {{ circle.job_situation_description }}
</h3> </h3>
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8"> <ul class="mt-8 grid auto-rows-fr grid-cols-1 gap-6 lg:grid-cols-3">
<li <li
v-for="jobSituation in circle.job_situations" v-for="jobSituation in circle.job_situations"
:key="jobSituation.id" :key="jobSituation.id"
class="job-situation border p-4 text-large flex items-center" class="job-situation text-large flex items-center border p-4"
> >
{{ jobSituation.value }} {{ jobSituation.value }}
</li> </li>

18
client/src/components/learningPath/DocumentUploadForm.vue
View File

@ -80,10 +80,10 @@ function showFileInformation() {
<template> <template>
<form @submit.prevent="submitForm()"> <form @submit.prevent="submitForm()">
<label class="block text-bold" for="upload"> <label class="text-bold block" for="upload">
{{ $t("circlePage.documents.fileLabel") }} {{ $t("circlePage.documents.fileLabel") }}
</label> </label>
<div class="mb-4 btn-secondary mt-4 text-xl relative cursor-pointer"> <div class="btn-secondary relative mb-4 mt-4 cursor-pointer text-xl">
<input id="upload" type="file" class="absolute opacity-0" @change="fileChange" /> <input id="upload" type="file" class="absolute opacity-0" @change="fileChange" />
{{ $t("circlePage.documents.modalAction") }} {{ $t("circlePage.documents.modalAction") }}
</div> </div>
@ -97,22 +97,22 @@ function showFileInformation() {
</div> </div>
<p class="mb-8">{{ $t("circlePage.documents.maxFileSize") }}</p> <p class="mb-8">{{ $t("circlePage.documents.maxFileSize") }}</p>
<div class="mb-8"> <div class="mb-8">
<label class="block text-bold mb-4" for="name"> <label class="text-bold mb-4 block" for="name">
{{ $t("circlePage.documents.modalFileName") }} {{ $t("circlePage.documents.modalFileName") }}
</label> </label>
<input id="name" v-model="formData.name" type="text" class="w-1/2 mb-2" /> <input id="name" v-model="formData.name" type="text" class="mb-2 w-1/2" />
<p>{{ $t("circlePage.documents.modalNameInformation") }}</p> <p>{{ $t("circlePage.documents.modalNameInformation") }}</p>
<div v-if="formErrors.name"> <div v-if="formErrors.name">
<p class="text-red-700">{{ $t("circlePage.documents.chooseName") }}</p> <p class="text-red-700">{{ $t("circlePage.documents.chooseName") }}</p>
</div> </div>
</div> </div>
<div class="mb-8"> <div class="mb-8">
<label class="block text-bold mb-4" for="learningsequnce"> <label class="text-bold mb-4 block" for="learningsequnce">
{{ $t("general.learningSequence") }} {{ $t("general.learningSequence") }}
</label> </label>
<ItDropdownSelect <ItDropdownSelect
v-model="formData.learningSequence" v-model="formData.learningSequence"
class="w-full lg:w-96 mt-4 lg:mt-0" class="mt-4 w-full lg:mt-0 lg:w-96"
:items="props.learningSequences" :items="props.learningSequences"
></ItDropdownSelect> ></ItDropdownSelect>
<div v-if="formErrors.learningSequence"> <div v-if="formErrors.learningSequence">
@ -122,12 +122,12 @@ function showFileInformation() {
</div> </div>
</div> </div>
<div v-if="showUploadErrorMessage"> <div v-if="showUploadErrorMessage">
<p class="text-red-700 mb-4"> <p class="mb-4 text-red-700">
{{ $t("circlePage.documents.uploadErrorMessage") }} {{ $t("circlePage.documents.uploadErrorMessage") }}
</p> </p>
</div> </div>
<div class="-mx-8 px-8 pt-4 border-t"> <div class="-mx-8 border-t px-8 pt-4">
<button class="btn-primary text-xl mb-0" :disabled="isUploading"> <button class="btn-primary mb-0 text-xl" :disabled="isUploading">
{{ $t("general.save") }} {{ $t("general.save") }}
</button> </button>
</div> </div>

12
client/src/components/learningPath/FeedbackCompletition.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<div> <div>
<h1 class="hidden lg:block lg:mb-12">{{ title }}</h1> <h1 class="hidden lg:mb-12 lg:block">{{ title }}</h1>
<div <div
class="b-0 lg:border lg:border-gray-400 lg:p-8 flex flex-col lg:items-center lg:flex-row" class="b-0 flex flex-col lg:flex-row lg:items-center lg:border lg:border-gray-400 lg:p-8"
> >
<img :src="avatarUrl" class="w-16 h-16 rounded-full mb-6 lg:mr-12" /> <img :src="avatarUrl" class="mb-6 h-16 w-16 rounded-full lg:mr-12" />
<h1 class="block lg:hidden mb-8">{{ title }}</h1> <h1 class="mb-8 block lg:hidden">{{ title }}</h1>
<div> <div>
<p class="mb-6">{{ description }}</p> <p class="mb-6">{{ description }}</p>
<button v-if="!feedbackSent" class="btn-primary" @click="$emit('sendFeedback')"> <button v-if="!feedbackSent" class="btn-primary" @click="$emit('sendFeedback')">
{{ $t("feedback.sendFeedback") }} {{ $t("feedback.sendFeedback") }}
</button> </button>
<p v-else class="bg-green-200 px-6 py-4 flex items-center"> <p v-else class="flex items-center bg-green-200 px-6 py-4">
<it-icon-check <it-icon-check
class="text-green-800 w-7 h-7 mr-2 inline-block" class="mr-2 inline-block h-7 w-7 text-green-800"
></it-icon-check> ></it-icon-check>
{{ $t("feedback.feedbackSent") }} {{ $t("feedback.feedbackSent") }}
</p> </p>

10
client/src/components/learningPath/LearningContentContainer.vue
View File

@ -26,14 +26,14 @@ defineEmits(["next", "exit"]);
<div> <div>
<div class="h-full"></div> <div class="h-full"></div>
<!-- just here to not make the footer jump during the transition --> <!-- just here to not make the footer jump during the transition -->
<div class="absolute w-full top-0 bottom-0 bg-white"> <div class="absolute top-0 bottom-0 w-full bg-white">
<div class="h-content overflow-y-scroll"> <div class="h-content overflow-y-scroll">
<header <header
class="px-4 lg:px-8 py-4 flex justify-between items-center bg-white absolute w-full h-12" class="absolute flex h-12 w-full items-center justify-between bg-white px-4 py-4 lg:px-8"
> >
<button <button
type="button" type="button"
class="w-8 h-8 absolute right-4 top-4 cursor-pointer" class="absolute right-4 top-4 h-8 w-8 cursor-pointer"
data-cy="close-learning-content" data-cy="close-learning-content"
@click="$emit('exit')" @click="$emit('exit')"
> >
@ -43,7 +43,7 @@ defineEmits(["next", "exit"]);
<slot></slot> <slot></slot>
</div> </div>
<nav <nav
class="nav flex justify-between px-4 items-center bg-white" class="nav flex items-center justify-between bg-white px-4"
:class="{ 'border-t': showBorder }" :class="{ 'border-t': showBorder }"
> >
<div class="flex justify-between"> <div class="flex justify-between">
@ -52,7 +52,7 @@ defineEmits(["next", "exit"]);
:learning-content-type="learningContentBlock.type" :learning-content-type="learningContentBlock.type"
class="mr-2" class="mr-2"
/> />
<h1 class="text-base font-normal hidden lg:inline-block" data-cy="ln-title"> <h1 class="hidden text-base font-normal lg:inline-block" data-cy="ln-title">
{{ title }} {{ title }}
</h1> </h1>
</div> </div>

8
client/src/components/learningPath/LearningContentNavigation.vue
View File

@ -21,11 +21,11 @@ defineEmits(["back", "continue"]);
<nav class="mt-16 flex lg:justify-between"> <nav class="mt-16 flex lg:justify-between">
<button <button
v-if="showBackButton" v-if="showBackButton"
class="btn-secondary flex items-center mr-2" class="btn-secondary mr-2 flex items-center"
data-cy="previous-step" data-cy="previous-step"
@click="$emit('back')" @click="$emit('back')"
> >
<it-icon-arrow-left class="w-6 h-6 mr-2"></it-icon-arrow-left> <it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
{{ $t("general.backCapitalized") }} {{ $t("general.backCapitalized") }}
</button> </button>
<button <button
@ -35,7 +35,7 @@ defineEmits(["back", "continue"]);
@click="$emit('continue')" @click="$emit('continue')"
> >
{{ $t("general.next") }} {{ $t("general.next") }}
<it-icon-arrow-right class="w-6 h-6 ml-2"></it-icon-arrow-right> <it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
</button> </button>
</nav> </nav>
<div <div
@ -43,7 +43,7 @@ defineEmits(["back", "continue"]);
:aria-valuenow="questionIndex + 1" :aria-valuenow="questionIndex + 1"
:aria-valuemax="maxQuestionIndex" :aria-valuemax="maxQuestionIndex"
:aria-valuemin="1" :aria-valuemin="1"
class="absolute bottom-[86px] h-1 left-0 right-0 lg:left-4 lg:right-4 inline-flex gap-1" class="absolute bottom-[86px] left-0 right-0 inline-flex h-1 gap-1 lg:left-4 lg:right-4"
> >
<span <span
v-for="i in maxQuestionIndex" v-for="i in maxQuestionIndex"

4
client/src/components/learningPath/LearningContentTypeBadge.vue
View File

@ -10,11 +10,11 @@ const props = defineProps<{
<template> <template>
<div <div
v-if="props.learningContentType !== 'placeholder'" v-if="props.learningContentType !== 'placeholder'"
class="flex bg-gray-200 rounded-full px-2.5 py-0.5 gap-2 items-center w-min h-min" class="flex h-min w-min items-center gap-2 rounded-full bg-gray-200 px-2.5 py-0.5"
> >
<component <component
:is="learningContentTypeData(props.learningContentType).icon" :is="learningContentTypeData(props.learningContentType).icon"
class="w-6 h-6" class="h-6 w-6"
></component> ></component>
<p class="whitespace-nowrap"> <p class="whitespace-nowrap">
{{ learningContentTypeData(props.learningContentType).title }} {{ learningContentTypeData(props.learningContentType).title }}

2
client/src/components/learningPath/LearningPathDiagram.vue
View File

@ -466,7 +466,7 @@ function render() {
<div class="svg-container h-full content-start"> <div class="svg-container h-full content-start">
<svg <svg
:id="svgId" :id="svgId"
class="learning-path-visualization h-full mx-auto -mt-6 lg:mt-0" class="learning-path-visualization mx-auto -mt-6 h-full lg:mt-0"
:class="{ :class="{
'max-h-[90px]': ['horizontalSmall'].includes(diagramType), 'max-h-[90px]': ['horizontalSmall'].includes(diagramType),
'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType), 'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType),

2
client/src/components/learningPath/LearningPathViewVertical.vue
View File

@ -19,7 +19,7 @@ const emits = defineEmits(["closemodal"]);
<div v-if="learningPath" class="container-medium"> <div v-if="learningPath" class="container-medium">
<h1>{{ learningPath.title }}</h1> <h1>{{ learningPath.title }}</h1>
<div class="learningpath flex flex-col"> <div class="learningpath flex flex-col">
<div class="flex flex-col h-max"> <div class="flex h-max flex-col">
<LearningPathDiagram <LearningPathDiagram
v-if="learningPath" v-if="learningPath"
class="w-full" class="w-full"

34
client/src/components/learningPath/LearningSequence.vue
View File

@ -89,8 +89,8 @@ const learningSequenceBorderClass = computed(() => {
</script> </script>
<template> <template>
<div :id="learningSequence.slug" class="mb-8 learning-sequence"> <div :id="learningSequence.slug" class="learning-sequence mb-8">
<div class="flex items-center gap-4 mb-2 text-blue-900"> <div class="mb-2 flex items-center gap-4 text-blue-900">
<component :is="learningSequence.icon" /> <component :is="learningSequence.icon" />
<h3 class="text-large font-semibold"> <h3 class="text-large font-semibold">
{{ learningSequence.title }} {{ learningSequence.title }}
@ -98,14 +98,14 @@ const learningSequenceBorderClass = computed(() => {
<div>{{ humanizeDuration(learningSequence.minutes) }}</div> <div>{{ humanizeDuration(learningSequence.minutes) }}</div>
</div> </div>
<ol class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass"> <ol class="border bg-white px-4 lg:px-6" :class="learningSequenceBorderClass">
<li <li
v-for="learningUnit in learningSequence.learningUnits" v-for="learningUnit in learningSequence.learningUnits"
:id="learningUnit.slug" :id="learningUnit.slug"
:key="learningUnit.id" :key="learningUnit.id"
class="pt-3 lg:pt-6" class="pt-3 lg:pt-6"
> >
<div v-if="learningUnit.title" class="pb-3 lg:pg-6 flex gap-4 text-blue-900"> <div v-if="learningUnit.title" class="lg:pg-6 flex gap-4 pb-3 text-blue-900">
<div class="font-semibold">{{ learningUnit.title }}</div> <div class="font-semibold">{{ learningUnit.title }}</div>
<div class="whitespace-nowrap"> <div class="whitespace-nowrap">
{{ humanizeDuration(learningUnit.minutes) }} {{ humanizeDuration(learningUnit.minutes) }}
@ -115,14 +115,14 @@ const learningSequenceBorderClass = computed(() => {
<li <li
v-for="learningContent in learningUnit.learningContents" v-for="learningContent in learningUnit.learningContents"
:key="learningContent.id" :key="learningContent.id"
class="flex gap-4 pb-3 lg:pb-6 items-center" class="flex items-center gap-4 pb-3 lg:pb-6"
> >
<div v-if="props.readonly"> <div v-if="props.readonly">
<it-icon-check <it-icon-check
v-if="learningContent.completion_status === 'success'" v-if="learningContent.completion_status === 'success'"
class="block w-8 h-8" class="block h-8 w-8"
></it-icon-check> ></it-icon-check>
<div v-else class="w-8 h-8"></div> <div v-else class="h-8 w-8"></div>
</div> </div>
<ItCheckbox <ItCheckbox
v-else v-else
@ -131,13 +131,13 @@ const learningSequenceBorderClass = computed(() => {
@toggle="toggleCompleted(learningContent)" @toggle="toggleCompleted(learningContent)"
/> />
<div class="flex-auto pt-1 sm:pt-0"> <div class="flex-auto pt-1 sm:pt-0">
<span class="flex gap-4 items-center xl:h-10"> <span class="flex items-center gap-4 xl:h-10">
<div v-if="props.readonly" class="w-full sm:w-auto text-left"> <div v-if="props.readonly" class="w-full text-left sm:w-auto">
{{ learningContent.title }} {{ learningContent.title }}
</div> </div>
<button <button
v-else v-else
class="cursor-pointer w-full sm:w-auto text-left" class="w-full cursor-pointer text-left sm:w-auto"
:data-cy="`${learningContent.slug}`" :data-cy="`${learningContent.slug}`"
@click.stop="circleStore.openLearningContent(learningContent)" @click.stop="circleStore.openLearningContent(learningContent)"
> >
@ -145,7 +145,7 @@ const learningSequenceBorderClass = computed(() => {
</button> </button>
<div <div
class="flex items-center gap-4 flex-col justify-between md:flex-row sm:grow lg:flex-col xl:flex-row" class="flex flex-col items-center justify-between gap-4 sm:grow md:flex-row lg:flex-col xl:flex-row"
> >
<button <button
v-if=" v-if="
@ -186,23 +186,23 @@ const learningSequenceBorderClass = computed(() => {
> >
<div <div
v-if="circleStore.calcSelfEvaluationStatus(learningUnit) === 'success'" v-if="circleStore.calcSelfEvaluationStatus(learningUnit) === 'success'"
class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-success" class="self-evaluation-success flex items-center gap-4 pb-3 lg:pb-6"
> >
<it-icon-smiley-happy class="w-8 h-8 flex-none" data-cy="success" /> <it-icon-smiley-happy class="h-8 w-8 flex-none" data-cy="success" />
<div>{{ $t("selfEvaluation.selfEvaluationYes") }}</div> <div>{{ $t("selfEvaluation.selfEvaluationYes") }}</div>
</div> </div>
<div <div
v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === 'fail'" v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === 'fail'"
class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-fail" class="self-evaluation-fail flex items-center gap-4 pb-3 lg:pb-6"
> >
<it-icon-smiley-thinking class="w-8 h-8 flex-none" data-cy="fail" /> <it-icon-smiley-thinking class="h-8 w-8 flex-none" data-cy="fail" />
<div>{{ $t("selfEvaluation.selfEvaluationNo") }}</div> <div>{{ $t("selfEvaluation.selfEvaluationNo") }}</div>
</div> </div>
<div <div
v-else v-else
class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-unknown" class="self-evaluation-unknown flex items-center gap-4 pb-3 lg:pb-6"
> >
<it-icon-smiley-neutral class="w-8 h-8 flex-none" data-cy="unknown" /> <it-icon-smiley-neutral class="h-8 w-8 flex-none" data-cy="unknown" />
<div>{{ $t("selfEvaluation.selfEvaluation") }}</div> <div>{{ $t("selfEvaluation.selfEvaluation") }}</div>
</div> </div>
</div> </div>

14
client/src/components/learningPath/SelfEvaluation.vue
View File

@ -61,10 +61,10 @@ function handleBack() {
</h2> </h2>
<div <div
class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-8 lg:gap-12" class="mt-4 flex flex-col justify-between gap-8 lg:mt-8 lg:flex-row lg:gap-12"
> >
<button <button
class="flex-1 inline-flex items-center text-left p-4 border" class="inline-flex flex-1 items-center border p-4 text-left"
:class="{ :class="{
'border-green-500': currentQuestion.completion_status === 'success', 'border-green-500': currentQuestion.completion_status === 'success',
'border-2': currentQuestion.completion_status === 'success', 'border-2': currentQuestion.completion_status === 'success',
@ -72,11 +72,11 @@ function handleBack() {
data-cy="success" data-cy="success"
@click="circleStore.markCompletion(currentQuestion, COMPLETION_SUCCESS)" @click="circleStore.markCompletion(currentQuestion, COMPLETION_SUCCESS)"
> >
<it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy> <it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
<span class="font-bold text-large">{{ $t("selfEvaluation.yes") }}.</span> <span class="text-large font-bold">{{ $t("selfEvaluation.yes") }}.</span>
</button> </button>
<button <button
class="flex-1 inline-flex items-center text-left p-4 border" class="inline-flex flex-1 items-center border p-4 text-left"
:class="{ :class="{
'border-orange-500': 'border-orange-500':
currentQuestion.completion_status === COMPLETION_FAILURE, currentQuestion.completion_status === COMPLETION_FAILURE,
@ -85,8 +85,8 @@ function handleBack() {
data-cy="fail" data-cy="fail"
@click="circleStore.markCompletion(currentQuestion, 'fail')" @click="circleStore.markCompletion(currentQuestion, 'fail')"
> >
<it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
<span class="font-bold text-xl">{{ $t("selfEvaluation.no") }}.</span> <span class="text-xl font-bold">{{ $t("selfEvaluation.no") }}.</span>
</button> </button>
</div> </div>

2
client/src/components/learningPath/blocks/VideoBlock.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="container-medium"> <div class="container-medium">
<iframe <iframe
class="mt-8 w-full aspect-video" class="mt-8 aspect-video w-full"
:src="value.url" :src="value.url"
:title="content.title" :title="content.title"
frameborder="0" frameborder="0"

4
client/src/components/mediaLibrary/LinkCard.vue
View File

@ -18,10 +18,10 @@ const props = withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<div class="border flex flex-col lg:flex-row p-4 items-center"> <div class="flex flex-col items-center border p-4 lg:flex-row">
<img class="mr-6" :src="icon" alt="" /> <img class="mr-6" :src="icon" alt="" />
<div> <div>
<h4 class="mb-2 text-bold">{{ title }}</h4> <h4 class="text-bold mb-2">{{ title }}</h4>
<p class="mb-2">{{ description }}</p> <p class="mb-2">{{ description }}</p>
<MediaLink :to="url" :blank="openWindow" class="link"> <MediaLink :to="url" :blank="openWindow" class="link">
<span class="inline">{{ linkText }}</span> <span class="inline">{{ linkText }}</span>

6
client/src/components/mediaLibrary/OverviewCard.vue
View File

@ -13,13 +13,13 @@ const props = withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<div class="bg-white lg:pb-8 pb-4 p-8 flex justify-between flex-col lg:flex-row"> <div class="flex flex-col justify-between bg-white p-8 pb-4 lg:flex-row lg:pb-8">
<div class="mb-4 lg:mb-0"> <div class="mb-4 lg:mb-0">
<h3 class="mb-4">{{ title }}</h3> <h3 class="mb-4">{{ title }}</h3>
<p class="mb-4">{{ description }}</p> <p class="mb-4">{{ description }}</p>
<router-link <router-link
:to="link" :to="link"
class="btn-text inline-flex items-center pl-0 pr-3 py-2" class="btn-text inline-flex items-center py-2 pl-0 pr-3"
:data-cy="`${title}-link`" :data-cy="`${title}-link`"
> >
<span class="inline">{{ call2Action }}</span> <span class="inline">{{ call2Action }}</span>
@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
<div <div
v-if="icon" v-if="icon"
:class="[`bg-${icon}`]" :class="[`bg-${icon}`]"
class="lg:block bg-contain bg-no-repeat bg-left lg:bg-right h-32 lg:w-2/6 -ml-8 lg:ml-0 lg:-mr-8" class="-ml-8 h-32 bg-contain bg-left bg-no-repeat lg:ml-0 lg:-mr-8 lg:block lg:w-2/6 lg:bg-right"
></div> ></div>
</div> </div>
</template> </template>

31
client/src/components/ui/HorizontalBarChart.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<QuestionSummary :title="props.title" :text="props.text">
<div
v-for="{ label, percentage } in props.items"
:key="label"
class="mb-6 flex flex-row flex-wrap items-center gap-3 gap-y-2"
>
<div class="w-full text-base font-bold">{{ label }}</div>
<div
class="h-8 bg-sky-500"
:style="{ width: `${percentage * 100 * 0.8}%` }"
></div>
<div class="text-sm">{{ percentage * 100 }}%</div>
</div>
</QuestionSummary>
</template>
<script setup lang="ts">
import QuestionSummary from "@/components/ui/QuestionSummary.vue";
export interface ChartItem {
percentage: number;
label: string;
}
const props = defineProps<{
title: string;
text: string;
items: ChartItem[];
}>();
</script>

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

@ -37,10 +37,10 @@ const input = (e: Event) => {
'opacity-50': disabled, 'opacity-50': disabled,
'cursor-not-allowed': disabled, 'cursor-not-allowed': disabled,
}" }"
class="cursor-pointer inline-flex" class="inline-flex cursor-pointer"
> >
<label <label
class="block bg-contain disabled:opacity-50 cy-checkbox cy-checkbox-checked bg-no-repeat pl-8 h-8 flex items-center" class="cy-checkbox cy-checkbox-checked block flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50"
:class=" :class="
checked checked
? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]' ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'

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

@ -3,8 +3,8 @@
:model-value="modelValue" :model-value="modelValue"
@update:modelValue="$emit('update:modelValue', $event)" @update:modelValue="$emit('update:modelValue', $event)"
> >
<h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2> <h2 class="mb-12 block text-5xl font-bold leading-normal">{{ label }}</h2>
<div class="flex flex-col justify-start align-items-start justify-items-start"> <div class="align-items-start flex flex-col justify-start justify-items-start">
<ItCheckbox <ItCheckbox
v-for="item in items" v-for="item in items"
:key="item.value" :key="item.value"

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

@ -30,13 +30,13 @@ const emit = defineEmits<{
leave-to-class="transform scale-95 opacity-0" leave-to-class="transform scale-95 opacity-0"
> >
<MenuItems <MenuItems
class="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" class="w-max-full absolute mt-2 w-56 origin-top-right divide-y divide-gray-500 bg-white px-6 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
:class="[align === 'left' ? 'left-0' : 'right-0']" :class="[align === 'left' ? 'left-0' : 'right-0']"
> >
<div v-for="item in listItems" :key="item.title" class="px-1 py-1"> <div v-for="item in listItems" :key="item.title" class="px-1 py-1">
<MenuItem> <MenuItem>
<button <button
class="text-black group flex w-full items-center px-0 py-2 text-sm" class="group flex w-full items-center px-0 py-2 text-sm text-black"
@click="$emit('select', item.data)" @click="$emit('select', item.data)"
> >
<span class="inline-block pr-2"> <span class="inline-block pr-2">

14
client/src/components/ui/ItDropdownSelect.vue
View File

@ -34,16 +34,16 @@ const dropdownSelected = computed<DropdownSelectable>({
<template> <template>
<Listbox v-model="dropdownSelected" as="div"> <Listbox v-model="dropdownSelected" as="div">
<div class="mt-1 relative w-full"> <div class="relative mt-1 w-full">
<ListboxButton <ListboxButton
class="bg-white relative w-full border pl-5 pr-10 py-3 text-left cursor-default font-bold flex flex-row items-center" class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left font-bold"
> >
<span v-if="dropdownSelected.iconName" class="mr-4"> <span v-if="dropdownSelected.iconName" class="mr-4">
<component :is="dropdownSelected.iconName"></component> <component :is="dropdownSelected.iconName"></component>
</span> </span>
<span class="block truncate">{{ dropdownSelected.name }}</span> <span class="block truncate">{{ dropdownSelected.name }}</span>
<span <span
class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
> >
<it-icon-arrow-down class="h-5 w-5" aria-hidden="true" /> <it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
</span> </span>
@ -55,7 +55,7 @@ const dropdownSelected = computed<DropdownSelectable>({
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <ListboxOptions
class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
> >
<ListboxOption <ListboxOption
v-for="item in items" v-for="item in items"
@ -66,8 +66,8 @@ const dropdownSelected = computed<DropdownSelectable>({
> >
<li <li
:class="[ :class="[
active ? 'text-white bg-blue-900' : 'text-black', active ? 'bg-blue-900 text-white' : 'text-black',
'cursor-default select-none relative py-2 pl-3 pr-9', 'relative cursor-default select-none py-2 pl-3 pr-9',
]" ]"
class="flex flex-row items-center" class="flex flex-row items-center"
> >
@ -85,7 +85,7 @@ const dropdownSelected = computed<DropdownSelectable>({
<span <span
v-if="dropdownSelected" v-if="dropdownSelected"
class="text-blue-900 absolute inset-y-0 right-0 flex items-center pr-4" class="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-900"
> >
<it-icon-check v-if="selected" class="h-5 w-5" aria-hidden="true" /> <it-icon-check v-if="selected" class="h-5 w-5" aria-hidden="true" />
</span> </span>

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

@ -39,11 +39,11 @@ const removeNoScroll = () => {
<div <div
v-if="show" v-if="show"
data-cy="full-screen-modal" data-cy="full-screen-modal"
class="px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full" class="fixed top-0 h-full w-full overflow-y-scroll bg-white px-4 py-16 lg:px-16 lg:py-24"
> >
<button <button
type="button" type="button"
class="w-8 h-8 absolute right-4 top-4 cursor-pointer" class="absolute right-4 top-4 h-8 w-8 cursor-pointer"
@click="closeModal" @click="closeModal"
> >
<it-icon-close></it-icon-close> <it-icon-close></it-icon-close>

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

@ -2,7 +2,7 @@
<template> <template>
<li <li
class="py-4 leading-[45px] border-b border-gray-500 last:border-0 flex flex-row justify-between" class="flex flex-row justify-between border-b border-gray-500 py-4 leading-[45px] last:border-0"
> >
<div class="flex flex-row"> <div class="flex flex-row">
<slot name="left"></slot> <slot name="left"></slot>

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

@ -22,11 +22,11 @@ function setIsOpen(value: boolean) {
<div class="fixed inset-0 bg-black/30" aria-hidden="true"></div> <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
<div class="fixed inset-0 flex items-center justify-center p-4"> <div class="fixed inset-0 flex items-center justify-center p-4">
<DialogPanel class="w-full max-w-2xl bg-white px-8 pt-8 pb-4"> <DialogPanel class="w-full max-w-2xl bg-white px-8 pt-8 pb-4">
<DialogTitle class="flex flex-row relative mb-8"> <DialogTitle class="relative mb-8 flex flex-row">
<slot name="title"></slot> <slot name="title"></slot>
<button <button
type="button" type="button"
class="w-4 h-4 absolute right-4 cursor-pointer" class="absolute right-4 h-4 w-4 cursor-pointer"
@click="setIsOpen(false)" @click="setIsOpen(false)"
> >
<it-icon-close></it-icon-close> <it-icon-close></it-icon-close>

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

@ -7,13 +7,13 @@ const props = defineProps<{
<template> <template>
<li <li
class="py-4 leading-[45px] border-t border-gray-500 flex flex-col lg:flex-row justify-between" class="flex flex-col justify-between border-t border-gray-500 py-4 leading-[45px] lg:flex-row"
> >
<div class="flex flex-row md:w-1/4 items-center"> <div class="flex flex-row items-center md:w-1/4">
<img class="h-[45px] rounded-full mr-2" :src="avatarUrl" /> <img class="mr-2 h-[45px] rounded-full" :src="avatarUrl" />
<p class="text-bold lg:leading-[45px]">{{ name }}</p> <p class="text-bold lg:leading-[45px]">{{ name }}</p>
</div> </div>
<div class="flex-1 flex items-center"> <div class="flex flex-1 items-center">
<slot name="center"></slot> <slot name="center"></slot>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">

6
client/src/components/ui/ItProgress.vue
View File

@ -35,15 +35,15 @@ const notDone = computed(() => {
</script> </script>
<template> <template>
<span class="relative w-full h-2 bg-gray-300 inline-block"> <span class="relative inline-block h-2 w-full bg-gray-300">
<span <span
v-if="notDone !== done" v-if="notDone !== done"
class="absolute bg-orange-500 h-full" class="absolute h-full bg-orange-500"
:style="{ width: `${notDone}%` }" :style="{ width: `${notDone}%` }"
></span> ></span>
<span <span
v-if="done > 0" v-if="done > 0"
class="absolute bg-green-500 h-full" class="absolute h-full bg-green-500"
:style="{ width: `${done}%` }" :style="{ width: `${done}%` }"
></span> ></span>
</span> </span>

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

@ -7,7 +7,7 @@
{{ label }} {{ label }}
</RadioGroupLabel> </RadioGroupLabel>
<div <div
class="flex flex-col md:flex-row justify-between align-items-center justify-items-center space-y-6 md:space-y-0 md:space-x-6" class="align-items-center flex flex-col justify-between justify-items-center space-y-6 md:flex-row md:space-y-0 md:space-x-6"
> >
<RadioGroupOption <RadioGroupOption
v-for="item in items" v-for="item in items"
@ -17,7 +17,7 @@
:value="item.value" :value="item.value"
> >
<div <div
class="py-10 text-xl flex-1 text-center cursor-pointer font-bold ui-checked:bg-sky-500 ui-not-checked:border hover:border-gray-500 hover:bg-gray-200" class="flex-1 cursor-pointer py-10 text-center text-xl font-bold hover:border-gray-500 hover:bg-gray-200 ui-checked:bg-sky-500 ui-not-checked:border"
> >
<RadioGroupLabel as="span"> <RadioGroupLabel as="span">
{{ $t(item.name) }} {{ $t(item.name) }}

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

@ -3,7 +3,7 @@
<h2 class="heading-1 mb-8 block">{{ label }}</h2> <h2 class="heading-1 mb-8 block">{{ label }}</h2>
<textarea <textarea
:value="modelValue" :value="modelValue"
class="w-full border-gray-500 h-40" class="h-40 w-full border-gray-500"
@input="onInput" @input="onInput"
/> />
</div> </div>

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

@ -32,7 +32,7 @@
'grid-in-mid before:left-0 md:grid-in-snd md:before:left-1/2': 'grid-in-mid before:left-0 md:grid-in-snd md:before:left-1/2':
legend.index == 2, legend.index == 2,
'hidden before:left-1/2 md:inline-flex md:grid-in-trd': legend.index == 3, 'hidden before:left-1/2 md:inline-flex md:grid-in-trd': legend.index == 3,
'items-end grid-in-fth before:right-0 after:left-0 after:absolute after:top-0 after:h-4 after:w-px after:bg-gray-500 md:before:left-1/2 md:before:right-auto md:after:hidden text-right': 'items-end text-right grid-in-fth before:right-0 after:absolute after:left-0 after:top-0 after:h-4 after:w-px after:bg-gray-500 md:before:left-1/2 md:before:right-auto md:after:hidden':
legend.index == 4, legend.index == 4,
}" }"
class="legend relative inline-flex flex-col pt-4 before:absolute before:top-0 before:h-4 before:w-px before:bg-gray-500 md:items-center" class="legend relative inline-flex flex-col pt-4 before:absolute before:top-0 before:h-4 before:w-px before:bg-gray-500 md:items-center"

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

@ -13,7 +13,7 @@
</span> </span>
</div> </div>
<div <div
class="background before:border-t before:border-t-gray-400 before:w-full before:absolute before:top-1/2 relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400" class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400 before:absolute before:top-1/2 before:w-full before:border-t before:border-t-gray-400"
></div> ></div>
<div <div
class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400" class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"

24
client/src/pages/DashboardPage.vue
View File

@ -24,14 +24,14 @@ onMounted(async () => {
<template> <template>
<div class="flex flex-col lg:flex-row"> <div class="flex flex-col lg:flex-row">
<main class="grow bg-gray-200 lg:order-2"> <main class="grow bg-gray-200 lg:order-2">
<div class="mt-14 container-medium"> <div class="container-medium mt-14">
<h1 data-cy="welcome-message"> <h1 data-cy="welcome-message">
{{ $t("dashboard.welcome", { name: userStore.first_name }) }} {{ $t("dashboard.welcome", { name: userStore.first_name }) }}
</h1> </h1>
<div v-if="courseSessionsStore.courseSessions.length > 0" class="mb-14"> <div v-if="courseSessionsStore.courseSessions.length > 0" class="mb-14">
<h2 class="mt-12 mb-3">Kurse</h2> <h2 class="mt-12 mb-3">Kurse</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr"> <div class="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2">
<div <div
v-for="courseSession in courseSessionsStore.coursesFromCourseSessions" v-for="courseSession in courseSessionsStore.coursesFromCourseSessions"
:key="courseSession.id" :key="courseSession.id"
@ -55,7 +55,7 @@ onMounted(async () => {
</div> </div>
<div> <div>
<h3 class="mb-6">Termine</h3> <h3 class="mb-6">Termine</h3>
<ul class="p-4 bg-white"> <ul class="bg-white p-4">
<li class="flex flex-row border-b py-4"> <li class="flex flex-row border-b py-4">
<p class="text-bold w-60">Prüfung</p> <p class="text-bold w-60">Prüfung</p>
<p class="grow">Mo, 14. November 2022, 18 Uhr</p> <p class="grow">Mo, 14. November 2022, 18 Uhr</p>
@ -75,10 +75,10 @@ onMounted(async () => {
</div> </div>
</div> </div>
</main> </main>
<aside class="lg:w-[343px] m-8 lg:order-1"> <aside class="m-8 lg:order-1 lg:w-[343px]">
<div class="mx-auto text-center pb-6 mb-6 border-b"> <div class="mx-auto mb-6 border-b pb-6 text-center">
<img <img
class="rounded-full inline-block max-w-[150px] mb-4" class="mb-4 inline-block max-w-[150px] rounded-full"
:src="userStore.avatar_url" :src="userStore.avatar_url"
/> />
<div> <div>
@ -87,16 +87,16 @@ onMounted(async () => {
<p class="mb-4">{{ employer() }}</p> <p class="mb-4">{{ employer() }}</p>
<p> <p>
Profil bearbeiten Profil bearbeiten
<it-icon-pen class="w-4 h-4"></it-icon-pen> <it-icon-pen class="h-4 w-4"></it-icon-pen>
</p> </p>
</div> </div>
</div> </div>
<div> <div>
<div class="flex flex-row items-center mb-4 justify-start"> <div class="mb-4 flex flex-row items-center justify-start">
<div class="w-20"> <div class="w-20">
<div class="rounded-full bg-sky-200 h-12 w-12"> <div class="h-12 w-12 rounded-full bg-sky-200">
<it-icon-certificate <it-icon-certificate
class="h-6 w-6 block mx-auto pt-2" class="mx-auto block h-6 w-6 pt-2"
></it-icon-certificate> ></it-icon-certificate>
</div> </div>
</div> </div>
@ -105,14 +105,14 @@ onMounted(async () => {
</div> </div>
<div> <div>
<div> <div>
<div class="flex flex-row justify-start mb-4"> <div class="mb-4 flex flex-row justify-start">
<p class="text-bold w-20">2024</p> <p class="text-bold w-20">2024</p>
<div> <div>
<p class="text-bold">Check-up</p> <p class="text-bold">Check-up</p>
<p>Vermittler/-in VBV</p> <p>Vermittler/-in VBV</p>
<p> <p>
Gültig bis: Gültig bis:
<span class="text-green-500 text-bold">31.12.2026</span> <span class="text-bold text-green-500">31.12.2026</span>
</p> </p>
</div> </div>
</div> </div>

10
client/src/pages/LoginPage.vue
View File

@ -18,7 +18,7 @@ const userStore = useUserStore();
</script> </script>
<template> <template>
<main class="lg:px-12 lg:py-12 bg-gray-200"> <main class="bg-gray-200 lg:px-12 lg:py-12">
<div class="container-medium"> <div class="container-medium">
<h1 class="mb-8">Login</h1> <h1 class="mb-8">Login</h1>
@ -33,23 +33,23 @@ const userStore = useUserStore();
" "
> >
<div class="mb-4"> <div class="mb-4">
<label class="block mb-1" for="email">Username</label> <label class="mb-1 block" for="email">Username</label>
<input <input
id="username" id="username"
v-model="state.username" v-model="state.username"
type="text" type="text"
name="username" name="username"
class="py-2 px-3 border mt-1 block w-96 max-w-full" class="mt-1 block w-96 max-w-full border py-2 px-3"
/> />
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label class="block mb-1" for="password">Password</label> <label class="mb-1 block" for="password">Password</label>
<input <input
id="password" id="password"
v-model="state.password" v-model="state.password"
type="password" type="password"
name="password" name="password"
class="py-2 px-3 border mt-1 block w-96 max-w-full" class="mt-1 block w-96 max-w-full border py-2 px-3"
/> />
</div> </div>

8
client/src/pages/NotificationsPage.vue
View File

@ -48,14 +48,14 @@ const fakeData = {
> >
<template #left> <template #left>
<img <img
class="h-[45px] rounded-full mr-2" class="mr-2 h-[45px] rounded-full"
:src="notification.source.avatar" :src="notification.source.avatar"
/> />
<div class="ml-1"> <div class="ml-1">
<p class="leading-6"> <p class="leading-6">
{{ `${notification.source.name} ${notification.title}` }} {{ `${notification.source.name} ${notification.title}` }}
</p> </p>
<p class="leading-6 text-sm text-gray-800"> <p class="text-sm leading-6 text-gray-800">
{{ `${notification.source.title} &hyphen; ${notification.ago}` }} {{ `${notification.source.title} &hyphen; ${notification.ago}` }}
</p> </p>
</div> </div>
@ -63,9 +63,9 @@ const fakeData = {
<template #link> <template #link>
<div <div
v-if="notification.unread" v-if="notification.unread"
class="flex items-center h-[45px] flex-row" class="flex h-[45px] flex-row items-center"
> >
<div class="w-[10px] h-[10px] bg-blue-500 rounded-full"></div> <div class="h-[10px] w-[10px] rounded-full bg-blue-500"></div>
</div> </div>
</template> </template>
</ItListRow> </ItListRow>

12
client/src/pages/ProfilePage.vue
View File

@ -17,20 +17,20 @@ function setActiveClasses(isActive: boolean) {
<span>{{ $t("general.back") }}</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
</nav> </nav>
<header class="flex flex-row items-center mb-12"> <header class="mb-12 flex flex-row items-center">
<img class="w-44 h-44 rounded-full mr-8" src="https://picsum.photos/200" /> <img class="mr-8 h-44 w-44 rounded-full" src="https://picsum.photos/200" />
<div> <div>
<h1 class="mb-2">Daniel Baumgartner</h1> <h1 class="mb-2">Daniel Baumgartner</h1>
<p class="mb-2">d.baumgartner@gmail.com</p> <p class="mb-2">d.baumgartner@gmail.com</p>
<p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]"> <p class="bg-message bg-[center_left_-4px] bg-no-repeat pl-6">
{{ $t("messages.sendMessage") }} {{ $t("messages.sendMessage") }}
</p> </p>
</div> </div>
</header> </header>
<main> <main>
<div class="bg-white w-full mb-8">ich bin ein Lernpfad</div> <div class="mb-8 w-full bg-white">ich bin ein Lernpfad</div>
<ul class="flex flex-row border-b-2 mb-5"> <ul class="mb-5 flex flex-row border-b-2">
<li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)"> <li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
<button>{{ $t("competences.competences") }}</button> <button>{{ $t("competences.competences") }}</button>
</li> </li>
<li class="mr-12"> <li class="mr-12">

77
client/src/pages/StyleGuidePage.vue
View File

@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import IconLogout from "@/components/icons/IconLogout.vue"; import IconLogout from "@/components/icons/IconLogout.vue";
import IconSettings from "@/components/icons/IconSettings.vue"; import IconSettings from "@/components/icons/IconSettings.vue";
import VerticalBarChart from "@/components/ui/VerticalBarChart.vue"; import HorizontalBarChart, {
type ChartItem,
} from "@/components/ui/HorizontalBarChart.vue";
import ItCheckbox from "@/components/ui/ItCheckbox.vue"; import ItCheckbox from "@/components/ui/ItCheckbox.vue";
import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue"; import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
import ItDropdown from "@/components/ui/ItDropdown.vue"; import ItDropdown from "@/components/ui/ItDropdown.vue";
@ -9,6 +11,7 @@ import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import ItRadioGroup from "@/components/ui/ItRadioGroup.vue"; import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
import ItTextarea from "@/components/ui/ItTextarea.vue"; import ItTextarea from "@/components/ui/ItTextarea.vue";
import RatingScale from "@/components/ui/RatingScale.vue"; import RatingScale from "@/components/ui/RatingScale.vue";
import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
import logger from "loglevel"; import logger from "loglevel";
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
@ -99,6 +102,25 @@ const sourceItems = [
const textValue = ref("abc"); const textValue = ref("abc");
const barChartItems: ChartItem[] = [
{
percentage: 1,
label: "100%",
},
{
percentage: 0.9,
label: "Internet",
},
{
percentage: 0.1,
label: "Anderes",
},
{
percentage: 0,
label: "Anderes",
},
];
function log(data: any) { function log(data: any) {
logger.info(data); logger.info(data);
} }
@ -108,7 +130,7 @@ function log(data: any) {
<main class="px-8 py-4"> <main class="px-8 py-4">
<h1>Style Guide</h1> <h1>Style Guide</h1>
<div class="border-b text-gray-700 pb-2 mt-12"> <div class="mt-12 border-b pb-2 text-gray-700">
<h2 class="heading-1">Icons</h2> <h2 class="heading-1">Icons</h2>
</div> </div>
@ -117,7 +139,7 @@ function log(data: any) {
Use them like &lt;it-icon-message/&gt; Use them like &lt;it-icon-message/&gt;
</p> </p>
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row"> <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
<div class="inline-flex flex-col"> <div class="inline-flex flex-col">
message message
<it-icon-message class="it-icon" /> <it-icon-message class="it-icon" />
@ -169,7 +191,7 @@ function log(data: any) {
</div> </div>
</div> </div>
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row"> <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
<div class="inline-flex flex-col"> <div class="inline-flex flex-col">
ls-apply ls-apply
<it-icon-ls-apply /> <it-icon-ls-apply />
@ -206,7 +228,7 @@ function log(data: any) {
</div> </div>
</div> </div>
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row"> <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
<div class="inline-flex flex-col"> <div class="inline-flex flex-col">
lc-assignment lc-assignment
<it-icon-lc-assignment /> <it-icon-lc-assignment />
@ -253,7 +275,7 @@ function log(data: any) {
</div> </div>
</div> </div>
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row"> <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
<div class="inline-flex flex-col"> <div class="inline-flex flex-col">
smiley-happy smiley-happy
<it-icon-smiley-happy /> <it-icon-smiley-happy />
@ -270,55 +292,55 @@ function log(data: any) {
</div> </div>
</div> </div>
<div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row"> <div class="mt-8 mb-8 flex flex-col flex-wrap gap-4 lg:flex-row">
<div class="inline-flex flex-col text-orange-500"> <div class="inline-flex flex-col text-orange-500">
message big message big
<it-icon-message class="w-16 h-16 text-orange-500" /> <it-icon-message class="h-16 w-16 text-orange-500" />
</div> </div>
<div class="inline-flex flex-col text-blue-400"> <div class="inline-flex flex-col text-blue-400">
ls-network big ls-network big
<it-icon-ls-network class="w-16 h-16" /> <it-icon-ls-network class="h-16 w-16" />
</div> </div>
<div class="inline-flex flex-col text-red-500"> <div class="inline-flex flex-col text-red-500">
close small close small
<it-icon-close class="w-6 h-6" /> <it-icon-close class="h-6 w-6" />
</div> </div>
<div class="inline-flex flex-col text-white bg-blue-900"> <div class="inline-flex flex-col bg-blue-900 text-white">
vbv vbv
<it-icon-vbv class="w-24 h-24" /> <it-icon-vbv class="h-24 w-24" />
</div> </div>
<div class="inline-flex flex-col"> <div class="inline-flex flex-col">
vbv-pos vbv-pos
<it-icon-vbv-pos class="w-24 h-24" /> <it-icon-vbv-pos class="h-24 w-24" />
</div> </div>
</div> </div>
<div class="border-b text-gray-700 pb-2 mt-8"> <div class="mt-8 border-b pb-2 text-gray-700">
<h2 class="heading-1">Colors</h2> <h2 class="heading-1">Colors</h2>
</div> </div>
<table class="text-gray-700"> <table class="text-gray-700">
<tr class="h-12 md:h-18 lg:h-24"> <tr class="md:h-18 h-12 lg:h-24">
<td></td> <td></td>
<td v-for="value in colorValues" :key="value" class="text-center"> <td v-for="value in colorValues" :key="value" class="text-center">
{{ value }} {{ value }}
</td> </td>
</tr> </tr>
<tr v-for="color in colors" :key="color" class="h-12 md:h-18 lg:h-24"> <tr v-for="color in colors" :key="color" class="md:h-18 h-12 lg:h-24">
<td>{{ color }}</td> <td>{{ color }}</td>
<td v-for="value in colorValues" :key="value" class="px-2"> <td v-for="value in colorValues" :key="value" class="px-2">
<div <div
class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 rounded-full" class="h-8 w-8 rounded-full md:h-12 md:w-12 lg:h-16 lg:w-16"
:class="[colorBgClass(color, value)]" :class="[colorBgClass(color, value)]"
></div> ></div>
</td> </td>
</tr> </tr>
</table> </table>
<div class="border-b text-gray-700 pb-2 mt-12"> <div class="mt-12 border-b pb-2 text-gray-700">
<h2 class="heading-1">Typography</h2> <h2 class="heading-1">Typography</h2>
</div> </div>
@ -328,20 +350,20 @@ function log(data: any) {
<div class="mt-8 text-xl font-bold">Text Large Bold</div> <div class="mt-8 text-xl font-bold">Text Large Bold</div>
<div class="mt-8 text-xl">Text Large</div> <div class="mt-8 text-xl">Text Large</div>
<div class="mt-8 link text-xl">Link Large</div> <div class="link mt-8 text-xl">Link Large</div>
<div class="mt-8 font-bold">Text Bold</div> <div class="mt-8 font-bold">Text Bold</div>
<div class="mt-8">Text</div> <div class="mt-8">Text</div>
<div class="mt-8 link">Link</div> <div class="link mt-8">Link</div>
<div class="mt-8 text-sm">Text Small</div> <div class="mt-8 text-sm">Text Small</div>
<div class="mt-8 link text-sm">Link Small</div> <div class="link mt-8 text-sm">Link Small</div>
<div class="border-b text-gray-700 pb-2 mt-12"> <div class="mt-12 border-b pb-2 text-gray-700">
<h2 class="heading-1">Components</h2> <h2 class="heading-1">Components</h2>
</div> </div>
<h2 class="mt-8 mb-8">Buttons</h2> <h2 class="mt-8 mb-8">Buttons</h2>
<div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16"> <div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
<button class="btn-primary">Primary</button> <button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button> <button class="btn-secondary">Secondary</button>
<button class="btn-blue">Blue</button> <button class="btn-blue">Blue</button>
@ -349,18 +371,18 @@ function log(data: any) {
<a class="btn-primary inline-block" href="/">Primary Link</a> <a class="btn-primary inline-block" href="/">Primary Link</a>
</div> </div>
<div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16"> <div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
<button disabled class="btn-primary">Primary disabled</button> <button disabled class="btn-primary">Primary disabled</button>
<button disabled class="btn-secondary">Secondary disabled</button> <button disabled class="btn-secondary">Secondary disabled</button>
<button disabled class="btn-blue">Blue disabled</button> <button disabled class="btn-blue">Blue disabled</button>
</div> </div>
<div <div
class="flex flex-col gap-4 flex-wrap lg:flex-row content-center lg:justify-start mb-16" class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row lg:justify-start"
> >
<button <button
type="button" type="button"
class="btn-primary inline-flex items-center p-3 rounded-full" class="btn-primary inline-flex items-center rounded-full p-3"
> >
<it-icon-message class="h-5 w-5"></it-icon-message> <it-icon-message class="h-5 w-5"></it-icon-message>
</button> </button>
@ -385,7 +407,7 @@ function log(data: any) {
<ItDropdownSelect <ItDropdownSelect
v-model="state.dropdownSelected" v-model="state.dropdownSelected"
class="w-full lg:w-96 mt-4 lg:mt-0" class="mt-4 w-full lg:mt-0 lg:w-96"
:items="state.dropdownValues" :items="state.dropdownValues"
></ItDropdownSelect> ></ItDropdownSelect>
{{ state.dropdownSelected }} {{ state.dropdownSelected }}
@ -486,6 +508,7 @@ function log(data: any) {
<VerticalBarChart title="Frage X" text="Fragentext" :ratio="0.2" /> <VerticalBarChart title="Frage X" text="Fragentext" :ratio="0.2" />
<VerticalBarChart title="Frage X" text="Fragentext" :ratio="2" /> <VerticalBarChart title="Frage X" text="Fragentext" :ratio="2" />
<VerticalBarChart title="Frage X" text="Fragentext" :ratio="0" /> <VerticalBarChart title="Frage X" text="Fragentext" :ratio="0" />
<HorizontalBarChart title="Frage X" text="Fragentext" :items="barChartItems" />
</div> </div>
</main> </main>
</template> </template>

30
client/src/pages/cockpit/CockpitIndexPage.vue
View File

@ -73,16 +73,16 @@ function setActiveClasses(translationKey: string) {
<template> <template>
<div class="bg-gray-200"> <div class="bg-gray-200">
<div class="container-large"> <div class="container-large">
<div class="flex lg:flex-row items-center mb-9"> <div class="mb-9 flex items-center lg:flex-row">
<h1 class="heading-3">{{ $t("general.circles") }}:</h1> <h1 class="heading-3">{{ $t("general.circles") }}:</h1>
<ul class="flex flex-row leading-7 text-base font-bold ml-4"> <ul class="ml-4 flex flex-row text-base font-bold leading-7">
<li <li
v-for="circle in circles" v-for="circle in circles"
:key="circle.translation_key" :key="circle.translation_key"
class="mr-4 last:mr-0" class="mr-4 last:mr-0"
> >
<button <button
class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0" class="mr-4 rounded-full border-2 border-blue-900 px-4 last:mr-0"
:class="setActiveClasses(circle.translation_key)" :class="setActiveClasses(circle.translation_key)"
@click="cockpitStore.toggleCourseSelection(circle.translation_key)" @click="cockpitStore.toggleCourseSelection(circle.translation_key)"
> >
@ -92,10 +92,10 @@ function setActiveClasses(translationKey: string) {
</ul> </ul>
</div> </div>
<!-- Status --> <!-- Status -->
<div class="grid gap-4 grid-rows-3 lg:grid-rows-none lg:grid-cols-3 mb-4"> <div class="mb-4 grid grid-rows-3 gap-4 lg:grid-cols-3 lg:grid-rows-none">
<div class="px-6 py-5 bg-white"> <div class="bg-white px-6 py-5">
<h1 <h1
class="bg-assignment bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4" class="heading-3 mb-4 bg-assignment bg-60 bg-no-repeat pl-[68px] leading-[60px]"
> >
{{ $t("general.transferTask", 2) }} {{ $t("general.transferTask", 2) }}
</h1> </h1>
@ -104,9 +104,9 @@ function setActiveClasses(translationKey: string) {
</div> </div>
<p>{{ $t("cockpit.tasksDone") }}</p> <p>{{ $t("cockpit.tasksDone") }}</p>
</div> </div>
<div class="px-6 py-5 bg-white"> <div class="bg-white px-6 py-5">
<h1 <h1
class="bg-feedback bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4" class="heading-3 mb-4 bg-feedback bg-60 bg-no-repeat pl-[68px] leading-[60px]"
> >
{{ $t("general.feedback", 2) }} {{ $t("general.feedback", 2) }}
</h1> </h1>
@ -115,9 +115,9 @@ function setActiveClasses(translationKey: string) {
</div> </div>
<p>{{ $t("cockpit.feedbacksDone") }}</p> <p>{{ $t("cockpit.feedbacksDone") }}</p>
</div> </div>
<div class="px-6 py-5 bg-white"> <div class="bg-white px-6 py-5">
<h1 <h1
class="bg-test bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4" class="heading-3 mb-4 bg-test bg-60 bg-no-repeat pl-[68px] leading-[60px]"
> >
{{ $t("general.examResult", 2) }} {{ $t("general.examResult", 2) }}
</h1> </h1>
@ -168,17 +168,17 @@ function setActiveClasses(translationKey: string) {
</div> </div>
</div> </div>
<div class="ml-4 flex flex-row items-center"> <div class="ml-4 flex flex-row items-center">
<div class="flex flex-row items-center mr-6"> <div class="mr-6 flex flex-row items-center">
<it-icon-smiley-thinking <it-icon-smiley-thinking
class="w-8 h-8 mr-2 inline-block" class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-thinking> ></it-icon-smiley-thinking>
<p class="text-bold inline-block"> <p class="text-bold inline-block">
{{ userCountStatus(csu.user_id).fail }} {{ userCountStatus(csu.user_id).fail }}
</p> </p>
</div> </div>
<li class="flex flex-row items-center mr-6"> <li class="mr-6 flex flex-row items-center">
<it-icon-smiley-happy <it-icon-smiley-happy
class="w-8 h-8 mr-2 inline-block" class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-happy> ></it-icon-smiley-happy>
<p class="text-bold inline-block"> <p class="text-bold inline-block">
{{ userCountStatus(csu.user_id).success }} {{ userCountStatus(csu.user_id).success }}
@ -186,7 +186,7 @@ function setActiveClasses(translationKey: string) {
</li> </li>
<li class="flex flex-row items-center"> <li class="flex flex-row items-center">
<it-icon-smiley-neutral <it-icon-smiley-neutral
class="w-8 h-8 mr-2 inline-block" class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-neutral> ></it-icon-smiley-neutral>
<p class="text-bold inline-block"> <p class="text-bold inline-block">
{{ userCountStatus(csu.user_id).unknown }} {{ userCountStatus(csu.user_id).unknown }}

18
client/src/pages/cockpit/CockpitUserProfilePage.vue
View File

@ -50,28 +50,28 @@ function setActiveClasses(isActive: boolean) {
<span>{{ $t("general.back") }}</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
</nav> </nav>
<header class="flex flex-row items-center mb-12"> <header class="mb-12 flex flex-row items-center">
<img class="w-44 h-44 rounded-full mr-8" :src="user.avatar_url" /> <img class="mr-8 h-44 w-44 rounded-full" :src="user.avatar_url" />
<div> <div>
<h1 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h1> <h1 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h1>
<p class="mb-2">{{ user.email }}</p> <p class="mb-2">{{ user.email }}</p>
<p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]"> <p class="bg-message bg-[center_left_-4px] bg-no-repeat pl-6">
{{ $t("messages.sendMessage") }} {{ $t("messages.sendMessage") }}
</p> </p>
</div> </div>
</header> </header>
<main> <main>
<div v-if="learningPath" class="bg-white w-full pt-8 pb-4 mb-8"> <div v-if="learningPath" class="mb-8 w-full bg-white pt-8 pb-4">
<LearningPathDiagram <LearningPathDiagram
class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4" class="mx-auto max-h-[90px] w-full max-w-[1920px] px-4 lg:max-h-[380px]"
diagram-type="horizontal" diagram-type="horizontal"
:learning-path="learningPath" :learning-path="learningPath"
:postfix="userId" :postfix="userId"
:profile-user-id="userId" :profile-user-id="userId"
></LearningPathDiagram> ></LearningPathDiagram>
</div> </div>
<ul class="flex flex-row border-b-2 mb-5"> <ul class="mb-5 flex flex-row border-b-2">
<li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)"> <li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
<button>{{ $t("competences.competences") }}</button> <button>{{ $t("competences.competences") }}</button>
</li> </li>
<li class="mr-12"> <li class="mr-12">
@ -87,12 +87,12 @@ function setActiveClasses(isActive: boolean) {
<div> <div>
<ul <ul
v-if="competenceStore.competenceProfilePage(user.user_id)" v-if="competenceStore.competenceProfilePage(user.user_id)"
class="px-8 bg-white" class="bg-white px-8"
> >
<li <li
v-for="competence in competenceStore.competences(user.user_id)" v-for="competence in competenceStore.competences(user.user_id)"
:key="competence.id" :key="competence.id"
class="p-8 border-b last:border-0 border-gray-500" class="border-b border-gray-500 p-8 last:border-0"
> >
<CompetenceDetail <CompetenceDetail
:competence="competence" :competence="competence"

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

@ -56,25 +56,25 @@ const countStatus = computed(() => {
<div class="container-large lg:mt-4"> <div class="container-large lg:mt-4">
<div <div
v-if="competenceStore.competenceProfilePage()" v-if="competenceStore.competenceProfilePage()"
class="flex flex-col lg:flex-row lg:items-center justify-between mb-10" class="mb-10 flex flex-col justify-between lg:flex-row lg:items-center"
> >
<h1>{{ $t("competences.title") }}</h1> <h1>{{ $t("competences.title") }}</h1>
<ItDropdownSelect <ItDropdownSelect
v-model="competenceStore.selectedCircle" v-model="competenceStore.selectedCircle"
class="w-full lg:w-96 mt-4 lg:mt-0" class="mt-4 w-full lg:mt-0 lg:w-96"
:items="competenceStore.availableCircles" :items="competenceStore.availableCircles"
></ItDropdownSelect> ></ItDropdownSelect>
</div> </div>
<div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8"> <div class="l mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
<div> <div>
<h3 class="pb-4 border-b">{{ $t("competences.lastImprovements") }}</h3> <h3 class="border-b pb-4">{{ $t("competences.lastImprovements") }}</h3>
<ul> <ul>
<li <li
v-for="competence in lastUpdatedCompetences" v-for="competence in lastUpdatedCompetences"
:key="competence.id" :key="competence.id"
class="py-4 flex flex-col lg:flex-row lg:items-center border-b last:mb-8" class="flex flex-col border-b py-4 last:mb-8 lg:flex-row lg:items-center"
> >
<p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5"> <p class="mb-4 inline-block lg:mb-0 lg:mr-5 lg:w-1/4">
{{ competence.competence_id }} {{ competence.title }} {{ competence.competence_id }} {{ competence.title }}
</p> </p>
<ItProgress <ItProgress
@ -88,45 +88,45 @@ const countStatus = computed(() => {
</ul> </ul>
<router-link <router-link
:to="`${competenceStore.competenceProfilePage()?.frontend_url}/competences`" :to="`${competenceStore.competenceProfilePage()?.frontend_url}/competences`"
class="btn-text inline-flex items-center pl-0 py-2" class="btn-text inline-flex items-center py-2 pl-0"
> >
<span>{{ $t("competences.showAll") }}</span> <span>{{ $t("competences.showAll") }}</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>
</div> </div>
</div> </div>
<div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8"> <div class="l mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
<h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0"> <h3 class="mb-4 border-b pb-4 lg:border-0 lg:pb-0">
{{ $t("competences.assessment") }} {{ $t("competences.assessment") }}
</h3> </h3>
<ul <ul
class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6" class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
> >
<li <li
class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1" class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
> >
<h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.no") }}»</h5> <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
<p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p> <p class="ml-4 inline-block text-7xl font-bold">{{ countStatus.fail }}</p>
</div> </div>
</li> </li>
<li <li
class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1" class="mb-4 inline-block flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
> >
<h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.yes") }}»</h5> <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy> <it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
<p class="text-7xl font-bold inline-block ml-4"> <p class="ml-4 inline-block text-7xl font-bold">
{{ countStatus.success }} {{ countStatus.success }}
</p> </p>
</div> </div>
</li> </li>
<li class="pb-4 lg:pb-0 border-b lg:border-b-0 lg:mb-0flex-1"> <li class="lg:mb-0flex-1 border-b pb-4 lg:border-b-0 lg:pb-0">
<h5 class="text-gray-700 mb-4">{{ $t("competences.notAssessed") }}</h5> <h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral> <it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
<p class="text-7xl font-bold inline-block ml-4"> <p class="ml-4 inline-block text-7xl font-bold">
{{ countStatus.unknown }} {{ countStatus.unknown }}
</p> </p>
</div> </div>
@ -134,7 +134,7 @@ const countStatus = computed(() => {
</ul> </ul>
<router-link <router-link
:to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`" :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
class="btn-text inline-flex items-center pl-0 py-2" class="btn-text inline-flex items-center py-2 pl-0"
> >
<span>{{ $t("competences.showAll") }}</span> <span>{{ $t("competences.showAll") }}</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
@ -142,17 +142,17 @@ const countStatus = computed(() => {
</div> </div>
<div <div
v-if="failedCriteria.length > 0" v-if="failedCriteria.length > 0"
class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8" class="l mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8"
> >
<div class="border-b flex flex-row items-center pb-4 mb-4"> <div class="mb-4 flex flex-row items-center border-b pb-4">
<it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="mr-5 h-11 w-11"></it-icon-smiley-thinking>
<h3>«{{ $t("selfEvaluation.no") }}»</h3> <h3>«{{ $t("selfEvaluation.no") }}»</h3>
</div> </div>
<ul class="mb-6"> <ul class="mb-6">
<li <li
v-for="criteria in failedCriteria" v-for="criteria in failedCriteria"
:key="criteria.id" :key="criteria.id"
class="mb-4 pb-4 border-b" class="mb-4 border-b pb-4"
> >
<PerformanceCriteriaRow <PerformanceCriteriaRow
:criteria="criteria" :criteria="criteria"
@ -162,7 +162,7 @@ const countStatus = computed(() => {
</ul> </ul>
<router-link <router-link
:to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`" :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
class="btn-text inline-flex items-center pl-0 py-2" class="btn-text inline-flex items-center py-2 pl-0"
> >
<span>{{ $t("competences.showAll") }}</span> <span>{{ $t("competences.showAll") }}</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>

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

@ -25,11 +25,11 @@ const competenceStore = useCompetenceStore();
<span>{{ $t("general.back") }}</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
</nav> </nav>
<div class="flex flex-col lg:flex-row items-center justify-between mb-10"> <div class="mb-10 flex flex-col items-center justify-between lg:flex-row">
<h1>Kompetenzen</h1> <h1>Kompetenzen</h1>
<ItDropdownSelect <ItDropdownSelect
v-model="competenceStore.selectedCircle" v-model="competenceStore.selectedCircle"
class="w-full lg:w-96 mt-4 lg:mt-0" class="mt-4 w-full lg:mt-0 lg:w-96"
:items="competenceStore.availableCircles" :items="competenceStore.availableCircles"
></ItDropdownSelect> ></ItDropdownSelect>
</div> </div>
@ -37,7 +37,7 @@ const competenceStore = useCompetenceStore();
<li <li
v-for="competence in competenceStore.competences()" v-for="competence in competenceStore.competences()"
:key="competence.id" :key="competence.id"
class="bg-white p-8 mb-8" class="mb-8 bg-white p-8"
> >
<CompetenceDetail <CompetenceDetail
:competence="competence" :competence="competence"

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

@ -67,24 +67,24 @@ function updateActiveState(status: CourseCompletionStatus) {
<span>zurück</span> <span>zurück</span>
</router-link> </router-link>
</nav> </nav>
<div class="flex flex-col lg:flex-row items-center justify-between mb-4 lg:mb-10"> <div class="mb-4 flex flex-col items-center justify-between lg:mb-10 lg:flex-row">
<h1>Einschätzungen</h1> <h1>Einschätzungen</h1>
<ItDropdownSelect <ItDropdownSelect
v-model="competenceStore.selectedCircle" v-model="competenceStore.selectedCircle"
class="w-full lg:w-96 mt-4 lg:mt-0" class="mt-4 w-full lg:mt-0 lg:w-96"
:items="competenceStore.availableCircles" :items="competenceStore.availableCircles"
></ItDropdownSelect> ></ItDropdownSelect>
<div class="lg:hidden w-full"> <div class="w-full lg:hidden">
<ItDropdownSelect <ItDropdownSelect
v-model="activeMenuItem" v-model="activeMenuItem"
class="w-full lg:w-96 mt-4 lg:mt-0" class="mt-4 w-full lg:mt-0 lg:w-96"
:items="mobileMenuItems" :items="mobileMenuItems"
></ItDropdownSelect> ></ItDropdownSelect>
</div> </div>
</div> </div>
<div class="bg-white p-8"> <div class="bg-white p-8">
<div <div
class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4 hidden lg:block justify-between" class="mb-4 flex hidden flex-col justify-between border-b pb-4 lg:block lg:flex-row lg:items-center"
> >
<button <button
v-for="item in mobileMenuItems" v-for="item in mobileMenuItems"
@ -93,11 +93,11 @@ function updateActiveState(status: CourseCompletionStatus) {
'bg-gray-200': activeMenuItem.id === item.id, 'bg-gray-200': activeMenuItem.id === item.id,
'mr-6': item.id !== 'unknown', 'mr-6': item.id !== 'unknown',
}" }"
class="py-4 px-2 mr-6 inline-block" class="mr-6 inline-block py-4 px-2"
@click="updateActiveState(item.id)" @click="updateActiveState(item.id)"
> >
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<span class="inline-block mr-2">{{ item.name }}</span> <span class="mr-2 inline-block">{{ item.name }}</span>
<component :is="item.iconName"></component> <component :is="item.iconName"></component>
</div> </div>
</button> </button>
@ -106,7 +106,7 @@ function updateActiveState(status: CourseCompletionStatus) {
<li <li
v-for="criteria in shownCriteria" v-for="criteria in shownCriteria"
:key="criteria.id" :key="criteria.id"
class="mb-4 pb-4 border-b" class="mb-4 border-b pb-4"
> >
<PerformanceCriteriaRow <PerformanceCriteriaRow
:criteria="criteria" :criteria="criteria"

18
client/src/pages/competence/SinglePerformanceCriteriaPage.vue
View File

@ -55,7 +55,7 @@ findCriteria();
</script> </script>
<template> <template>
<div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white"> <div v-if="competencePage" class="absolute top-0 bottom-0 w-full bg-white">
<LearningContentContainer <LearningContentContainer
:title="''" :title="''"
:next-button-text="$t('general.save')" :next-button-text="$t('general.save')"
@ -63,14 +63,14 @@ findCriteria();
@next="router.back()" @next="router.back()"
> >
<div v-if="currentQuestion" class="container-medium"> <div v-if="currentQuestion" class="container-medium">
<div class="mt-4 lg:mt-8 p-6 lg:p-12 border"> <div class="mt-4 border p-6 lg:mt-8 lg:p-12">
<h2 class="heading-2"> <h2 class="heading-2">
{{ currentQuestion.competence_id }} {{ currentQuestion.title }} {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
</h2> </h2>
<div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6"> <div class="mt-4 flex flex-col justify-between gap-6 lg:mt-8 lg:flex-row">
<button <button
class="flex-1 inline-flex items-center text-left p-4 border" class="inline-flex flex-1 items-center border p-4 text-left"
:class="{ :class="{
'border-green-500': currentQuestion.completion_status === 'success', 'border-green-500': currentQuestion.completion_status === 'success',
'border-2': currentQuestion.completion_status === 'success', 'border-2': currentQuestion.completion_status === 'success',
@ -78,11 +78,11 @@ findCriteria();
data-cy="success" data-cy="success"
@click="circleStore.markCompletion(currentQuestion, 'success')" @click="circleStore.markCompletion(currentQuestion, 'success')"
> >
<it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy> <it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
<span class="font-bold text-large">{{ $t("selfEvaluation.yes") }}</span> <span class="text-large font-bold">{{ $t("selfEvaluation.yes") }}</span>
</button> </button>
<button <button
class="flex-1 inline-flex items-center text-left p-4 border" class="inline-flex flex-1 items-center border p-4 text-left"
:class="{ :class="{
'border-orange-500': currentQuestion.completion_status === 'fail', 'border-orange-500': currentQuestion.completion_status === 'fail',
'border-2': currentQuestion.completion_status === 'fail', 'border-2': currentQuestion.completion_status === 'fail',
@ -90,8 +90,8 @@ findCriteria();
data-cy="fail" data-cy="fail"
@click="circleStore.markCompletion(currentQuestion, 'fail')" @click="circleStore.markCompletion(currentQuestion, 'fail')"
> >
<it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
<span class="font-bold text-xl">{{ $t("selfEvaluation.no") }}</span> <span class="text-xl font-bold">{{ $t("selfEvaluation.no") }}</span>
</button> </button>
</div> </div>
</div> </div>

32
client/src/pages/learningPath/CirclePage.vue
View File

@ -144,8 +144,8 @@ async function uploadDocument(data: DocumentUploadData) {
<div> <div>
<div class="circle-container bg-gray-200"> <div class="circle-container bg-gray-200">
<div v-if="profileUser" class="user-profile"> <div v-if="profileUser" class="user-profile">
<header class="flex flex-row items-center p-8 bg-white relative shadow-xl"> <header class="relative flex flex-row items-center bg-white p-8 shadow-xl">
<img class="w-32 h-32 rounded-full mr-8" :src="profileUser.avatar_url" /> <img class="mr-8 h-32 w-32 rounded-full" :src="profileUser.avatar_url" />
<div> <div>
<h1 class="mb-2"> <h1 class="mb-2">
{{ profileUser.first_name }} {{ profileUser.last_name }} {{ profileUser.first_name }} {{ profileUser.last_name }}
@ -163,7 +163,7 @@ async function uploadDocument(data: DocumentUploadData) {
</div> </div>
<div class="circle max-w-9xl"> <div class="circle max-w-9xl">
<div class="flex flex-col lg:flex-row"> <div class="flex flex-col lg:flex-row">
<div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white"> <div class="flex-initial bg-white px-4 py-4 lg:w-128 lg:px-8 lg:pt-4">
<router-link <router-link
v-if="!props.readonly" v-if="!props.readonly"
:to="`/course/${props.courseSlug}/learn`" :to="`/course/${props.courseSlug}/learn`"
@ -180,10 +180,10 @@ async function uploadDocument(data: DocumentUploadData) {
<div class="mt-2">{{ $t("circlePage.duration") }}: {{ duration }}</div> <div class="mt-2">{{ $t("circlePage.duration") }}: {{ duration }}</div>
<div class="w-full mt-8"> <div class="mt-8 w-full">
<CircleDiagram></CircleDiagram> <CircleDiagram></CircleDiagram>
</div> </div>
<div v-if="!props.readonly" class="border-t-2 mt-4 lg:hidden"> <div v-if="!props.readonly" class="mt-4 border-t-2 lg:hidden">
<div <div
class="mt-4 inline-flex items-center" class="mt-4 inline-flex items-center"
@click="circleStore.page = 'OVERVIEW'" @click="circleStore.page = 'OVERVIEW'"
@ -198,11 +198,11 @@ async function uploadDocument(data: DocumentUploadData) {
</div> </div>
<div class="hidden lg:block"> <div class="hidden lg:block">
<div class="block border mt-8 p-6"> <div class="mt-8 block border p-6">
<h3 class="text-blue-dark"> <h3 class="text-blue-dark">
{{ $t("circlePage.circleContentBoxTitle") }} {{ $t("circlePage.circleContentBoxTitle") }}
</h3> </h3>
<div class="leading-relaxed mt-4"> <div class="mt-4 leading-relaxed">
{{ circleStore.circle?.description }} {{ circleStore.circle?.description }}
</div> </div>
@ -213,12 +213,12 @@ async function uploadDocument(data: DocumentUploadData) {
{{ $t("circlePage.learnMore") }} {{ $t("circlePage.learnMore") }}
</button> </button>
</div> </div>
<div v-if="!props.readonly" class="block border mt-8 p-6"> <div v-if="!props.readonly" class="mt-8 block border p-6">
<h3 class="text-blue-dark"> <h3 class="text-blue-dark">
{{ $t("circlePage.documents.title") }} {{ $t("circlePage.documents.title") }}
</h3> </h3>
<div v-if="!courseSessionsStore.canUploadCircleDocuments"> <div v-if="!courseSessionsStore.canUploadCircleDocuments">
<div class="leading-relaxed mt-4"> <div class="mt-4 leading-relaxed">
{{ $t("circlePage.documents.userDescription") }} {{ $t("circlePage.documents.userDescription") }}
</div> </div>
</div> </div>
@ -245,17 +245,17 @@ async function uploadDocument(data: DocumentUploadData) {
<button <button
v-if="courseSessionsStore.canUploadCircleDocuments" v-if="courseSessionsStore.canUploadCircleDocuments"
type="button" type="button"
class="w-3 h-3 ml-2 leading-6 inline-block cursor-pointer relative top-[1px]" class="relative top-[1px] ml-2 inline-block h-3 w-3 cursor-pointer leading-6"
@click="courseSessionsStore.removeDocument(document.id)" @click="courseSessionsStore.removeDocument(document.id)"
> >
<it-icon-close class="w-3 h-3"></it-icon-close> <it-icon-close class="h-3 w-3"></it-icon-close>
</button> </button>
</li> </li>
</ul> </ul>
</li> </li>
</ol> </ol>
<div v-if="courseSessionsStore.canUploadCircleDocuments"> <div v-if="courseSessionsStore.canUploadCircleDocuments">
<div class="leading-relaxed mt-4"> <div class="mt-4 leading-relaxed">
{{ $t("circlePage.documents.expertDescription") }} {{ $t("circlePage.documents.expertDescription") }}
</div> </div>
<button <button
@ -267,9 +267,9 @@ async function uploadDocument(data: DocumentUploadData) {
</div> </div>
</div> </div>
<div v-if="!props.readonly" class="expert border mt-8 p-6"> <div v-if="!props.readonly" class="expert mt-8 border p-6">
<h3 class="text-blue-dark">{{ $t("circlePage.gotQuestions") }}</h3> <h3 class="text-blue-dark">{{ $t("circlePage.gotQuestions") }}</h3>
<div class="leading-relaxed mt-4"> <div class="mt-4 leading-relaxed">
{{ {{
$t("circlePage.contactExpertDescription", { $t("circlePage.contactExpertDescription", {
circleName: circleStore.circle?.title, circleName: circleStore.circle?.title,
@ -280,9 +280,9 @@ async function uploadDocument(data: DocumentUploadData) {
v-for="expert in courseSessionsStore.circleExperts" v-for="expert in courseSessionsStore.circleExperts"
:key="expert.user_id" :key="expert.user_id"
> >
<div class="flex flex-row items-center mt-2 mb-2"> <div class="mt-2 mb-2 flex flex-row items-center">
<img <img
class="h-[45px] rounded-full mr-2" class="mr-2 h-[45px] rounded-full"
:src="expert.avatar_url" :src="expert.avatar_url"
/> />
<p class="lg:leading-[45px]"> <p class="lg:leading-[45px]">

16
client/src/pages/learningPath/LearningPathPage.vue
View File

@ -64,8 +64,8 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
</Teleport> </Teleport>
<div class="learningpath flex flex-col"> <div class="learningpath flex flex-col">
<div class="flex flex-col h-max"> <div class="flex h-max flex-col">
<div class="bg-white lg:py-8 flex flex-col"> <div class="flex flex-col bg-white lg:py-8">
<div class="flex justify-end lg:p-4"> <div class="flex justify-end lg:p-4">
<button <button
class="btn-text inline-flex items-center px-3 lg:py-2" class="btn-text inline-flex items-center px-3 lg:py-2"
@ -77,33 +77,33 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
</button> </button>
</div> </div>
<LearningPathDiagram <LearningPathDiagram
class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4" class="mx-auto max-h-[90px] w-full max-w-[1920px] px-4 lg:max-h-[380px]"
diagram-type="horizontal" diagram-type="horizontal"
:learning-path="learningPath" :learning-path="learningPath"
></LearningPathDiagram> ></LearningPathDiagram>
</div> </div>
<div class="container-large pt-0 lg:pt-4"> <div class="container-large pt-0 lg:pt-4">
<h1 data-cy="learning-path-title" class="mt-6 lg:mt-12 mb-6"> <h1 data-cy="learning-path-title" class="mt-6 mb-6 lg:mt-12">
{{ learningPath.title }} {{ learningPath.title }}
</h1> </h1>
<div <div
class="bg-white p-4 lg:mb-16 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start" class="flex flex-col justify-start divide-y divide-gray-500 bg-white p-4 lg:mb-16 lg:flex-row lg:divide-y-0 lg:divide-x"
> >
<div class="p-2 lg:p-8 flex-auto"> <div class="flex-auto p-2 lg:p-8">
<h2> <h2>
{{ $t("learningPathPage.welcomeBack", { name: userStore.first_name }) }} {{ $t("learningPathPage.welcomeBack", { name: userStore.first_name }) }}
</h2> </h2>
<p class="mt-4 text-xl"></p> <p class="mt-4 text-xl"></p>
</div> </div>
<div v-if="learningPath.nextLearningContent" class="p-4 lg:p-8 flex-2"> <div v-if="learningPath.nextLearningContent" class="flex-2 p-4 lg:p-8">
{{ $t("learningPathPage.nextStep") }} {{ $t("learningPathPage.nextStep") }}
<h3> <h3>
{{ learningPath.nextLearningContent.parentCircle.title }}: {{ learningPath.nextLearningContent.parentCircle.title }}:
{{ learningPath.nextLearningContent.parentLearningSequence?.title }} {{ learningPath.nextLearningContent.parentLearningSequence?.title }}
</h3> </h3>
<router-link <router-link
class="mt-4 btn-blue" class="btn-blue mt-4"
:to="createContinueUrl(learningPath)[0]" :to="createContinueUrl(learningPath)[0]"
data-cy="lp-continue-button" data-cy="lp-continue-button"
translate translate

16
client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
View File

@ -61,7 +61,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
<template> <template>
<div <div
v-if="mediaCategory" v-if="mediaCategory"
class="fixed top-0 overflow-y-scroll bg-white h-full w-full" class="fixed top-0 h-full w-full overflow-y-scroll bg-white"
> >
<div class="bg-gray-200 pb-4 lg:pb-12"> <div class="bg-gray-200 pb-4 lg:pb-12">
<div class="container-large"> <div class="container-large">
@ -74,9 +74,9 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
<span>{{ $t("general.back") }}</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
</nav> </nav>
<div class="flex md:flex-col lg:flex-row justify-between"> <div class="flex justify-between md:flex-col lg:flex-row">
<div class="lg:w-6/12"> <div class="lg:w-6/12">
<h3 class="font-normal text-large text-gray-900 mb-3"> <h3 class="text-large mb-3 font-normal text-gray-900">
{{ $t("mediaLibrary.handlungsfelder.title", 1) }} {{ $t("mediaLibrary.handlungsfelder.title", 1) }}
</h3> </h3>
<h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1> <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
@ -84,7 +84,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
</div> </div>
<div> <div>
<img <img
class="hidden md:block float-left lg:float-right md:mt-8 lg:mt-0 lg:max-w-[505px]" class="float-left hidden md:mt-8 md:block lg:float-right lg:mt-0 lg:max-w-[505px]"
:src="`/static/icons/demo/${mediaCategory.detail_image}.png`" :src="`/static/icons/demo/${mediaCategory.detail_image}.png`"
alt="" alt=""
/> />
@ -102,7 +102,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
:key="item.id" :key="item.id"
class="mb-2 flex items-center" class="mb-2 flex items-center"
> >
<it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check> <it-icon-check class="mr-4 h-8 w-8 flex-none text-sky-500"></it-icon-check>
{{ item.value }} {{ item.value }}
</li> </li>
</ul> </ul>
@ -119,7 +119,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
</p> </p>
<ul <ul
:class="{ :class="{
'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard( 'grid grid-cols-1 gap-4 lg:grid-cols-2': displayAsCard(
content_collection.value.contents[0].type content_collection.value.contents[0].type
), ),
'border-t': !displayAsCard(content_collection.value.contents[0].type), 'border-t': !displayAsCard(content_collection.value.contents[0].type),
@ -147,7 +147,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
/> />
<div <div
v-else v-else
class="flex flex-col lg:flex-row lg:items-center justify-between border-b py-4" class="flex flex-col justify-between border-b py-4 lg:flex-row lg:items-center"
> >
<h4 class="text-bold">{{ mediaItem.value.title }}</h4> <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
<MediaLink <MediaLink
@ -168,7 +168,7 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
) )
" "
:to="`${mediaCategory.frontend_url}/media`" :to="`${mediaCategory.frontend_url}/media`"
class="btn-text inline-flex items-center pl-0 py-2" class="btn-text inline-flex items-center py-2 pl-0"
> >
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>

6
client/src/pages/mediaLibrary/MLCategoryIndexPage.vue
View File

@ -26,12 +26,12 @@ watch(dropdownSelected, (newValue) =>
<template> <template>
<div class="container-large"> <div class="container-large">
<div class="flex flex-col lg:flex-row items-center justify-between mb-10 mt-6"> <div class="mb-10 mt-6 flex flex-col items-center justify-between lg:flex-row">
<h1>{{ $t("mediaLibrary.handlungsfelder.title", categories.length) }}</h1> <h1>{{ $t("mediaLibrary.handlungsfelder.title", categories.length) }}</h1>
<!-- <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>--> <!-- <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
</div> </div>
<div v-if="mediaStore.mediaLibraryPage"> <div v-if="mediaStore.mediaLibraryPage">
<ul class="grid gap-5 grid-cols-1 md:grid-cols-4"> <ul class="grid grid-cols-1 gap-5 md:grid-cols-4">
<li v-for="cat in categories" :key="cat.id" class="bg-white p-4"> <li v-for="cat in categories" :key="cat.id" class="bg-white p-4">
<router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`"> <router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
<img <img
@ -39,7 +39,7 @@ watch(dropdownSelected, (newValue) =>
:src="`/static/icons/handlungsfelder/${cat.overview_icon}.svg`" :src="`/static/icons/handlungsfelder/${cat.overview_icon}.svg`"
alt="" alt=""
/> />
<h3 class="text-base text-center">{{ cat.title }}</h3> <h3 class="text-center text-base">{{ cat.title }}</h3>
</router-link> </router-link>
</li> </li>
</ul> </ul>

2
client/src/pages/mediaLibrary/MLIndexPage.vue
View File

@ -27,7 +27,7 @@ watch(dropdownSelected, (newValue) =>
<template> <template>
<div class="container-large"> <div class="container-large">
<div class="flex flex-col lg:flex-row justify-between mb-12 mt-6"> <div class="mb-12 mt-6 flex flex-col justify-between lg:flex-row">
<h1>{{ $t("mediaLibrary.title") }}</h1> <h1>{{ $t("mediaLibrary.title") }}</h1>
<!-- <ItDropdownSelect--> <!-- <ItDropdownSelect-->
<!-- v-model="dropdownSelected"--> <!-- v-model="dropdownSelected"-->

2
client/src/pages/mediaLibrary/MLMediaListPage.vue
View File

@ -35,7 +35,7 @@ const mediaList = computed(() => {
<template> <template>
<div <div
v-if="mediaCategory && mediaStore.mediaLibraryPage && mediaList" v-if="mediaCategory && mediaStore.mediaLibraryPage && mediaList"
class="fixed top-0 overflow-y-scroll bg-white h-full w-full" class="fixed top-0 h-full w-full overflow-y-scroll bg-white"
> >
<div class="bg-gray-200"> <div class="bg-gray-200">
<div class="container-large"> <div class="container-large">

14
client/src/pages/mediaLibrary/MLParentPage.vue
View File

@ -24,26 +24,26 @@ onMounted(async () => {
<template> <template>
<div class="bg-gray-200"> <div class="bg-gray-200">
<nav class="px-6 py-4 border-b bg-white"> <nav class="border-b bg-white px-6 py-4">
<ul <ul
v-if="mediaLibraryStore.mediaLibraryPage" v-if="mediaLibraryStore.mediaLibraryPage"
class="overflow-auto whitespace-nowrap scrollbar" class="scrollbar overflow-auto whitespace-nowrap"
> >
<li class="lg:ml-12 inline-block"> <li class="inline-block lg:ml-12">
<router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url"> <router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url">
Übersicht Übersicht
</router-link> </router-link>
</li> </li>
<li class="ml-6 lg:ml-12 inline-block"> <li class="ml-6 inline-block lg:ml-12">
<router-link <router-link
:to="`${mediaLibraryStore.mediaLibraryPage.frontend_url}/category`" :to="`${mediaLibraryStore.mediaLibraryPage.frontend_url}/category`"
> >
Handlungsfelder Handlungsfelder
</router-link> </router-link>
</li> </li>
<li class="ml-6 lg:ml-12 inline-block">Allgemeines zu Versicherungen</li> <li class="ml-6 inline-block lg:ml-12">Allgemeines zu Versicherungen</li>
<li class="ml-6 lg:ml-12 inline-block">Lernmedien</li> <li class="ml-6 inline-block lg:ml-12">Lernmedien</li>
<li class="ml-6 lg:ml-12 inline-block"> <li class="ml-6 inline-block lg:ml-12">
<a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a> <a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a>
</li> </li>
</ul> </ul>

9
client/tailwind.config.js
View File

@ -43,11 +43,10 @@ module.exports = {
"y-axis . left-label . right-label .", "y-axis . left-label . right-label .",
], ],
"rating-scale": [ "rating-scale": [
'. bar bar bar bar bar bar .', ". bar bar bar bar bar bar .",
'fst fst snd snd trd trd fth fth'], "fst fst snd snd trd trd fth fth",
"rating-scale-slim": [ ],
'bar bar bar', "rating-scale-slim": ["bar bar bar", "fst mid fth"],
'fst mid fth']
}, },
gridTemplateColumns: { gridTemplateColumns: {
"horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr", "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",

44
client/tailwind.css
View File

@ -33,31 +33,31 @@ svg {
@layer base { @layer base {
.it-icon { .it-icon {
@apply w-8 h-8 inline-block; @apply inline-block h-8 w-8;
} }
h1 { h1 {
@apply text-4xl md:text-5xl xl:text-7xl font-bold; @apply text-4xl font-bold md:text-5xl xl:text-7xl;
} }
.heading-1 { .heading-1 {
@apply text-4xl md:text-5xl xl:text-7xl font-bold; @apply text-4xl font-bold md:text-5xl xl:text-7xl;
} }
h2 { h2 {
@apply text-2xl md:text-3xl xl:text-4xl font-bold; @apply text-2xl font-bold md:text-3xl xl:text-4xl;
} }
.heading-2 { .heading-2 {
@apply text-2xl md:text-3xl xl:text-4xl font-bold; @apply text-2xl font-bold md:text-3xl xl:text-4xl;
} }
h3 { h3 {
@apply text-xl xl:text-2xl font-bold; @apply text-xl font-bold xl:text-2xl;
} }
.heading-3 { .heading-3 {
@apply text-xl xl:text-2xl font-bold; @apply text-xl font-bold xl:text-2xl;
} }
.link { .link {
@ -77,11 +77,11 @@ svg {
} }
.container-medium { .container-medium {
@apply mx-auto max-w-5xl w-full px-4 lg:px-8 py-4; @apply mx-auto w-full max-w-5xl px-4 py-4 lg:px-8;
} }
.container-large { .container-large {
@apply mx-auto max-w-6xl w-full px-4 lg:px-8 py-4; @apply mx-auto w-full max-w-6xl px-4 py-4 lg:px-8;
} }
.filter-blue-900 { .filter-blue-900 {
@ -96,31 +96,31 @@ svg {
} }
.btn-primary { .btn-primary {
@apply font-semibold py-2 px-4 align-middle inline-block @apply inline-block border-2 border-blue-900 bg-blue-900 py-2
bg-blue-900 text-white border-2 border-blue-900 px-4 align-middle font-semibold text-white
hover:bg-blue-700 hover:border-blue-700 hover:border-blue-700 hover:bg-blue-700
disabled:opacity-50 disabled:cursor-not-allowed; disabled:cursor-not-allowed disabled:opacity-50;
} }
.btn-secondary { .btn-secondary {
@apply font-semibold py-2 px-4 align-middle inline-block @apply inline-block border-2 border-blue-900 bg-white py-2
bg-white text-blue-900 border-2 border-blue-900 px-4 align-middle font-semibold text-blue-900
hover:bg-gray-200 hover:bg-gray-200
disabled:opacity-50 disabled:cursor-not-allowed; disabled:cursor-not-allowed disabled:opacity-50;
} }
.btn-blue { .btn-blue {
@apply font-semibold py-2 px-4 align-middle inline-block @apply inline-block border-2 border-sky-500 bg-sky-500 py-2
bg-sky-500 text-blue-900 border-2 border-sky-500 px-4 align-middle font-semibold text-blue-900
hover:bg-sky-400 hover:border-sky-400 hover:border-sky-400 hover:bg-sky-400
disabled:opacity-50 disabled:cursor-not-allowed; disabled:cursor-not-allowed disabled:opacity-50;
} }
.btn-text { .btn-text {
@apply font-normal py-2 px-4 align-middle inline-block @apply inline-block py-2 px-4 align-middle font-normal
text-blue-900 text-blue-900
hover:text-gray-700 hover:text-gray-700
disabled:opacity-50 disabled:cursor-not-allowed; disabled:cursor-not-allowed disabled:opacity-50;
} }
} }