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

Changes according to Stephs tests

This commit is contained in:
Daniel Egger 2022-10-11 11:45:45 +02:00
parent 34a21eeed3
commit f78fabbb47
15 changed files with 44 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -106,9 +106,9 @@ const profileDropdownData = [
<nav class="px-8 py-2 mx-auto lg:flex lg:justify-start lg:items-center lg:py-4"> <nav class="px-8 py-2 mx-auto lg:flex lg:justify-start lg:items-center 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">
<a href="https://www.vbv.ch" 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="h-8 w-16 mr-3 -mt-6 -ml-3" />
</a> </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="text-white text-2xl pr-10 pl-3 ml-1 border-l border-white">
myVBV myVBV

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

@ -178,7 +178,7 @@ function render() {
translate = [translate[0], translate[1] + 20]; translate = [translate[0], translate[1] + 20];
return "translate(" + translate + ")"; return "translate(" + translate + ")";
}) })
.attr("class", "circlesText text-xl font-bold") .attr("class", "circlesText text-large font-bold")
.style("text-anchor", "middle"); .style("text-anchor", "middle");
const iconWidth = 25; const iconWidth = 25;

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

@ -15,7 +15,7 @@ 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-xl"> <p class="mt-8 text-large">
Hier zeigen wir dir, was du in diesem Circle lernen wirst. Hier zeigen wir dir, was du in diesem Circle lernen wirst.
</p> </p>
@ -26,7 +26,7 @@ const props = defineProps<{
<li <li
v-for="goal in circle.goals" v-for="goal in circle.goals"
:key="goal.id" :key="goal.id"
class="text-xl 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 lg:block w-12 h-12 text-sky-500 flex-none"
@ -45,7 +45,7 @@ const props = defineProps<{
<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 border-gray-500 p-4 text-xl flex items-center" class="job-situation border border-gray-500 p-4 text-large flex items-center"
> >
{{ jobSituation.value }} {{ jobSituation.value }}
</li> </li>

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

@ -28,7 +28,7 @@ const block = computed(() => {
> >
<button <button
type="button" type="button"
class="btn-text inline-flex items-center px-3 py-2 font-normal" class="btn-text inline-flex items-center px-3 py-2"
data-cy="close-learning-content" data-cy="close-learning-content"
@click="circleStore.closeLearningContent(props.learningContent)" @click="circleStore.closeLearningContent(props.learningContent)"
> >
@ -36,7 +36,7 @@ const block = computed(() => {
<span class="hidden lg:inline">zurück zum Circle</span> <span class="hidden lg:inline">zurück zum Circle</span>
</button> </button>
<h1 class="text-xl hidden lg:block" data-cy="ln-title"> <h1 class="text-large hidden lg:block" data-cy="ln-title">
{{ learningContent.title }} {{ learningContent.title }}
</h1> </h1>
@ -70,18 +70,18 @@ const block = computed(() => {
<div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12"> <div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
<h1>{{ learningContent.title }}</h1> <h1>{{ learningContent.title }}</h1>
<p class="text-xl my-4 lg:my-8">{{ block.value.description }}</p> <p class="text-large my-4 lg:my-8">{{ block.value.description }}</p>
<a :href="block.value.url" target="_blank" class="button btn-primary"> <a :href="block.value.url" target="_blank" class="button btn-primary">
Mediathek öffnen Mediathek öffnen
</a> </a>
</div> </div>
<div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12"> <div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
<p class="text-xl my-4">{{ block.value.description }}</p> <p class="text-large my-4">{{ block.value.description }}</p>
<h1>{{ learningContent.title }}</h1> <h1>{{ learningContent.title }}</h1>
</div> </div>
<div v-else class="text-xl my-4">{{ block.value.description }}</div> <div v-else class="text-large my-4">{{ block.value.description }}</div>
</div> </div>
</div> </div>
</template> </template>

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

@ -87,7 +87,7 @@ const learningSequenceBorderClass = computed(() => {
<div :id="learningSequence.slug" class="mb-8 learning-sequence"> <div :id="learningSequence.slug" class="mb-8 learning-sequence">
<div class="flex items-center gap-4 mb-2 text-blue-900"> <div class="flex items-center gap-4 mb-2 text-blue-900">
<component :is="learningSequence.icon" /> <component :is="learningSequence.icon" />
<h3 class="text-xl font-semibold"> <h3 class="text-large font-semibold">
{{ learningSequence.title }} {{ learningSequence.title }}
</h3> </h3>
<div>{{ humanizeDuration(learningSequence.minutes) }}</div> <div>{{ humanizeDuration(learningSequence.minutes) }}</div>

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

@ -38,14 +38,14 @@ function handleContinue() {
> >
<button <button
type="button" type="button"
class="btn-text inline-flex items-center px-3 py-2 font-normal" class="btn-text inline-flex items-center px-3 py-2"
@click="circleStore.closeSelfEvaluation(props.learningUnit)" @click="circleStore.closeSelfEvaluation(props.learningUnit)"
> >
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left> <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
<span class="hidden lg:inline">zurück zum Circle</span> <span class="hidden lg:inline">zurück zum Circle</span>
</button> </button>
<h1 class="text-xl hidden lg:block" data-cy="ln-title"> <h1 class="text-large hidden lg:block" data-cy="ln-title">
Selbsteinschätzung {{ learningUnit.title }} Selbsteinschätzung {{ learningUnit.title }}
</h1> </h1>
@ -64,7 +64,7 @@ function handleContinue() {
Schritt {{ state.questionIndex + 1 }} von {{ questions.length }} Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}
</div> </div>
<p class="text-xl mt-4"> <p class="text-large mt-4">
Überprüfe, ob du in der Lernheinheit Überprüfe, ob du in der Lernheinheit
<span class="font-bold">"{{ learningUnit.title }}"</span> alles verstanden <span class="font-bold">"{{ learningUnit.title }}"</span> alles verstanden
hast.<br /> hast.<br />
@ -88,7 +88,7 @@ function handleContinue() {
@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="w-16 h-16 mr-4"></it-icon-smiley-happy>
<span class="font-bold text-xl"> Ja, ich kann das. </span> <span class="font-bold text-large"> Ja, ich kann das. </span>
</button> </button>
<button <button
class="flex-1 inline-flex items-center text-left p-4 border" class="flex-1 inline-flex items-center text-left p-4 border"

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

@ -16,8 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
<div class="bg-white p-8 flex justify-between"> <div class="bg-white p-8 flex justify-between">
<div> <div>
<h3 class="mb-4">{{ title }}</h3> <h3 class="mb-4">{{ title }}</h3>
<p class="mb-4 text-xl">{{ description }}</p> <p class="mb-4">{{ description }}</p>
<router-link :to="link" class="text-xl inline-flex items-center font-normal"> <router-link :to="link" class="btn-text inline-flex items-center pl-0 pr-3 py-2">
<span class="inline">{{ call2Action }}</span> <span class="inline">{{ call2Action }}</span>
<it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right> <it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
</router-link> </router-link>

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

@ -82,7 +82,7 @@ const countStatus = computed(() => {
</ul> </ul>
<router-link <router-link
:to="`${competenceStore.competenceProfilePage?.frontend_url}/competences`" :to="`${competenceStore.competenceProfilePage?.frontend_url}/competences`"
class="flex items-center" class="btn-text inline-flex items-center pl-0 py-2"
> >
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
@ -122,7 +122,7 @@ const countStatus = computed(() => {
</ul> </ul>
<router-link <router-link
:to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`" :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
class="flex items-center" class="btn-text inline-flex items-center pl-0 py-2"
> >
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
@ -144,7 +144,7 @@ const countStatus = computed(() => {
</ul> </ul>
<router-link <router-link
:to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`" :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
class="flex items-center" class="btn-text inline-flex items-center pl-0 py-2"
> >
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>

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

@ -11,9 +11,9 @@ const competenceStore = useCompetenceStore();
<template> <template>
<div class="container-large"> <div class="container-large">
<nav class="lg:mt-4"> <nav class="py-4 lg:pb-8">
<router-link <router-link
class="block mb-8 cursor-pointer flex items-center" class="btn-text inline-flex items-center pl-0"
:to="competenceStore.competenceProfilePage?.frontend_url" :to="competenceStore.competenceProfilePage?.frontend_url"
> >
<it-icon-arrow-left /> <it-icon-arrow-left />

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

@ -21,10 +21,10 @@ const shownCriteria = computed(() => {
<template> <template>
<div class="container-large"> <div class="container-large">
<nav class="lg:mt-4"> <nav class="py-4 lg:pb-8">
<router-link <router-link
class="block mb-8 cursor-pointer flex items-center" class="btn-text inline-flex items-center pl-0"
:href="`${competenceStore.competenceProfilePage?.frontend_url}`" :to="`${competenceStore.competenceProfilePage?.frontend_url}`"
> >
<it-icon-arrow-left /> <it-icon-arrow-left />
<span>zurück</span> <span>zurück</span>

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

@ -85,7 +85,7 @@ onMounted(async () => {
<div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white"> <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
<router-link <router-link
:to="`/learn/${props.learningPathSlug}`" :to="`/learn/${props.learningPathSlug}`"
class="btn-text inline-flex items-center px-3 py-4 font-normal" class="btn-text inline-flex items-center px-3 py-4"
data-cy="back-to-learning-path-button" data-cy="back-to-learning-path-button"
> >
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left> <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>

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

@ -59,7 +59,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
<div class="bg-white py-8 flex flex-col"> <div class="bg-white py-8 flex flex-col">
<div class="flex justify-end p-3"> <div class="flex justify-end p-3">
<button <button
class="flex items-center" class="btn-text inline-flex items-center px-3 py-2"
data-cy="show-list-view" data-cy="show-list-view"
@click="learningPathStore.page = 'OVERVIEW'" @click="learningPathStore.page = 'OVERVIEW'"
> >

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

@ -51,11 +51,11 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
v-if="mediaCategory" v-if="mediaCategory"
class="fixed top-0 overflow-y-scroll bg-white h-full w-full" class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
> >
<div class="bg-gray-200"> <div class="bg-gray-200 pb-4 lg:pb-12">
<div class="container-large"> <div class="container-large">
<nav> <nav class="py-4 lg:pb-8">
<router-link <router-link
class="block my-9 cursor-pointer flex items-center" class="btn-text inline-flex items-center pl-0"
:to="`${mediaStore.mediaLibraryPage.frontend_url}/category`" :to="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
> >
<it-icon-arrow-left /> <it-icon-arrow-left />
@ -64,7 +64,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
</nav> </nav>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="lg:w-6/12"> <div class="lg:w-6/12">
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3> <h3 class="font-normal text-large text-gray-900 mb-3">Handlungsfeld</h3>
<h1 class="mb-4 lg:mb-8">{{ mediaCategory.title }}</h1> <h1 class="mb-4 lg:mb-8">{{ mediaCategory.title }}</h1>
<p class="text-xl">{{ mediaCategory.introduction_text }}</p> <p class="text-xl">{{ mediaCategory.introduction_text }}</p>
</div> </div>
@ -108,6 +108,9 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
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),
'border-gray-500': !displayAsCard(
content_collection.value.contents[0].type
),
'mb-6': hasMoreItemsForType( 'mb-6': hasMoreItemsForType(
content_collection.value.contents[0].type, content_collection.value.contents[0].type,
content_collection.value.contents content_collection.value.contents
@ -130,7 +133,10 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
:link-text="mediaItem.value.link_display_text" :link-text="mediaItem.value.link_display_text"
:open-window="mediaItem.value.open_window" :open-window="mediaItem.value.open_window"
/> />
<div v-else class="flex items-center justify-between border-b py-4"> <div
v-else
class="flex items-center justify-between border-b border-gray-500 py-4"
>
<h4 class="text-bold">{{ mediaItem.value.title }}</h4> <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
<media-link <media-link
:blank="mediaItem.value.open_window" :blank="mediaItem.value.open_window"
@ -149,7 +155,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
) )
" "
:to="`${mediaCategory.frontend_url}/media`" :to="`${mediaCategory.frontend_url}/media`"
class="flex items-center" class="btn-text inline-flex items-center pl-0 py-2"
> >
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>

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

@ -40,9 +40,9 @@ const mediaList = computed(() => {
> >
<div class="bg-gray-200"> <div class="bg-gray-200">
<div class="container-large"> <div class="container-large">
<nav> <nav class="py-4 lg:pb-8">
<router-link <router-link
class="block my-9 cursor-pointer flex items-center" class="btn-text inline-flex items-center pl-0"
:to="mediaStore.mediaLibraryPage.frontend_url" :to="mediaStore.mediaLibraryPage.frontend_url"
> >
<it-icon-arrow-left /> <it-icon-arrow-left />

3
client/tailwind.css
View File

@ -95,7 +95,8 @@ svg {
} }
.btn-text { .btn-text {
@apply font-semibold py-2 px-4 align-middle inline-block @apply font-normal py-2 px-4 align-middle inline-block
text-blue-900
hover:text-gray-700 hover:text-gray-700
disabled:opacity-50 disabled:cursor-not-allowed; disabled:opacity-50 disabled:cursor-not-allowed;
} }