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

Design Anpassungen

This commit is contained in:
Daniel Egger 2022-09-14 13:25:21 +02:00
parent 20a3de4d80
commit edc0b3aeb2
11 changed files with 61 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -164,7 +164,7 @@ function render() {
const learningSequenceText = learningSequences
.append('text')
.attr('fill', colors.blue[900])
.style('font-size', 15)
.style('font-size', '15px')
.text((d) => {
return d.title
})

44
client/src/components/circle/CircleOverview.vue
View File

@ -12,32 +12,36 @@ const props = defineProps<{
<template>
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
<div class="container-medium">
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
<div class="mt-8 p-4 border border-gray-500">
<h3>Du wirst in der Lage sein, ...</h3>
<div class="mt-8 p-4 border border-gray-500">
<h3>Du wirst in der Lage sein, ...</h3>
<ul class="mt-4">
<li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
<div class="mt-4">{{ goal.value }}</div>
<ul class="mt-4">
<li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
<div class="mt-4">{{ goal.value }}</div>
</li>
</ul>
</div>
<h3 class="mt-16">
Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
</h3>
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
<li
v-for="jobSituation in circle.job_situations"
:key="jobSituation.id"
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
>
{{ jobSituation.value }}
</li>
</ul>
</div>
<h3 class="mt-16">Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:</h3>
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
<li
v-for="jobSituation in circle.job_situations"
:key="jobSituation.id"
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
>
{{ jobSituation.value }}
</li>
</ul>
</ItFullScreenModal>
</template>

2
client/src/components/circle/LearningContent.vue
View File

@ -50,7 +50,7 @@ const block = computed(() => {
<iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
</div>
<div v-else class="mx-auto max-w-5xl px-4 lg:px-8 py-4">
<div v-else class="container-medium">
<p>{{ block.value.description }}</p>
<div v-if="block.type === 'video'">

10
client/src/components/circle/LearningPathDiagram.vue
View File

@ -82,7 +82,7 @@ export default {
log.debug('LearningPathDiagram mounted')
if (this.vertical) {
this.width = Math.min(1080, window.innerWidth - 32)
this.width = Math.min(960, window.innerWidth - 32)
this.height = 860
}
@ -182,8 +182,8 @@ export default {
const circlesText = circle_groups
.append('text')
.attr('fill', colors.blue[900])
.style('font-size', 18)
.style('hyphens', 'auto')
.style('font-size', '18px')
.style('overflow-wrap', 'break-word')
.text((d) => {
if (!this.vertical) {
return d.title.replace('Prüfungsvorbereitung', 'Prüfungs- vorbereitung')
@ -240,7 +240,7 @@ export default {
const topicTitles = topicGroups
.append('text')
.attr('fill', colors.blue[900])
.style('font-size', 16)
.style('font-size', '16px')
.text((d) => d.title)
// Calculate positions of objects
@ -300,7 +300,7 @@ export default {
topicTitles
.attr('y', 20)
.style('font-size', 18)
.style('font-size', '18px')
.call(wrap, circleWidth * 0.8)
.attr('class', 'topicTitles font-bold')
}

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

@ -103,7 +103,7 @@ const learningSequenceBorderClass = computed(() => {
class="btn-blue -my-4"
@click.stop="circleStore.openLearningContent(learningContent)"
>
Weiter gehts
Weiter geht's
</button>
</div>

16
client/src/views/CircleView.vue
View File

@ -46,8 +46,8 @@ onMounted(async () => {
<LearningContent :key="circleStore.currentLearningContent.translation_key" />
</div>
<div v-else>
<div class="circle-container">
<div class="circle">
<div class="circle-container bg-gray-200">
<div class="circle max-w-9xl">
<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">
<router-link
@ -81,7 +81,7 @@ onMounted(async () => {
<div class="hidden lg:block">
<div class="block border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
<div class="prose mt-4">
<div class="leading-relaxed mt-4">
{{ circleStore.circle?.description }}
</div>
@ -92,7 +92,9 @@ onMounted(async () => {
<div class="expert border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Hast du Fragen?</h3>
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
<div class="leading-relaxed mt-4">
Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.
</div>
<button class="btn-secondary mt-4 text-xl">Fachexpertin kontaktieren</button>
</div>
</div>
@ -116,12 +118,12 @@ onMounted(async () => {
<style lang="postcss" scoped>
.circle-container {
background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);
/*background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);*/
}
.circle {
max-width: 1440px;
margin: 0 auto;
/*max-width: 1440px;*/
/*margin: 0 auto;*/
}
.v-enter-active,

2
client/src/views/CockpitView.vue
View File

@ -16,7 +16,7 @@ const userStore = useUserStore()
<div class="mt-8 p-8 break-words bg-white max-w-xl">
<h3>Versicherungsvermittler/in</h3>
<div class="mt-4">
<router-link class="btn-blue" to="/learn/versicherungsvermittlerin"> Weiter gehts </router-link>
<router-link class="btn-blue" to="/learn/versicherungsvermittlerin"> Weiter geht's </router-link>
</div>
</div>
</main>

2
client/src/views/LearningPathView.vue
View File

@ -44,7 +44,7 @@ onMounted(async () => {
<div class="flex justify-end p-3">
<button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'" data-cy="show-list-view">
<it-icon-list />
Listen Ansicht anzeigen
Listenansicht anzeigen
</button>
</div>
<LearningPathDiagram

14
client/src/views/LearningPathViewVertical.vue
View File

@ -20,17 +20,15 @@ const emits = defineEmits(['closemodal'])
</script>
<template>
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
<div class="bg-white mx-auto max-w-[1440px] lg:p-6 p-4" v-if="learningPathStore.learningPath">
<div class="container-medium" v-if="learningPathStore.learningPath">
<h1>{{ learningPathStore.learningPath.title }}</h1>
<div class="learningpath flex flex-col">
<div class="flex flex-col h-max">
<div class="bg-red py-8">
<LearningPathDiagram
class="max-w-[1280px] w-full"
identifier="verticalVisualization"
v-bind:vertical="true"
></LearningPathDiagram>
</div>
<LearningPathDiagram
class="w-full"
identifier="verticalVisualization"
v-bind:vertical="true"
></LearningPathDiagram>
</div>
</div>
</div>

4
client/tailwind.config.js
View File

@ -15,6 +15,10 @@ module.exports = {
spacing: {
'128': '32rem',
},
maxWidth: {
'8xl': '88rem',
'9xl': '96rem',
},
backgroundImage: {
}
},

8
client/tailwind.css
View File

@ -59,6 +59,14 @@ svg {
@apply text-base font-bold
}
.container-medium {
@apply mx-auto max-w-5xl px-4 lg:px-8 py-4
}
.container-large {
@apply mx-auto max-w-9xl px-4 lg:px-8 py-4
}
}
@layer components {