From edc0b3aeb26f171e6cf846bcb515138d8349d9ca Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 14 Sep 2022 13:25:21 +0200
Subject: [PATCH] Design Anpassungen

---
 .../src/components/circle/CircleDiagram.vue   |  2 +-
 .../src/components/circle/CircleOverview.vue  | 44 ++++++++++---------
 .../src/components/circle/LearningContent.vue |  2 +-
 .../components/circle/LearningPathDiagram.vue | 10 ++---
 .../components/circle/LearningSequence.vue    |  2 +-
 client/src/views/CircleView.vue               | 16 ++++---
 client/src/views/CockpitView.vue              |  2 +-
 client/src/views/LearningPathView.vue         |  2 +-
 client/src/views/LearningPathViewVertical.vue | 14 +++---
 client/tailwind.config.js                     |  4 ++
 client/tailwind.css                           |  8 ++++
 11 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index 49e80cba..321df800 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -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
     })
diff --git a/client/src/components/circle/CircleOverview.vue b/client/src/components/circle/CircleOverview.vue
index ce95474a..094a1bbd 100644
--- a/client/src/components/circle/CircleOverview.vue
+++ b/client/src/components/circle/CircleOverview.vue
@@ -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>
 
diff --git a/client/src/components/circle/LearningContent.vue b/client/src/components/circle/LearningContent.vue
index bbc0515a..ca8f64f1 100644
--- a/client/src/components/circle/LearningContent.vue
+++ b/client/src/components/circle/LearningContent.vue
@@ -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'">
diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index 99ea8355..24854399 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -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')
     }
diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index 4f64590e..152f631b 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/client/src/components/circle/LearningSequence.vue
@@ -103,7 +103,7 @@ const learningSequenceBorderClass = computed(() => {
             class="btn-blue -my-4"
             @click.stop="circleStore.openLearningContent(learningContent)"
           >
-            Weiter gehts
+            Weiter geht's
           </button>
         </div>
 
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index e2d17b3d..1714ac7e 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -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,
diff --git a/client/src/views/CockpitView.vue b/client/src/views/CockpitView.vue
index a4774bff..66eced16 100644
--- a/client/src/views/CockpitView.vue
+++ b/client/src/views/CockpitView.vue
@@ -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>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 1dd1319d..7c8d1d08 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -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
diff --git a/client/src/views/LearningPathViewVertical.vue b/client/src/views/LearningPathViewVertical.vue
index 596857a6..4e63bc35 100644
--- a/client/src/views/LearningPathViewVertical.vue
+++ b/client/src/views/LearningPathViewVertical.vue
@@ -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>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 920c7b2b..be837b6e 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -15,6 +15,10 @@ module.exports = {
       spacing: {
         '128': '32rem',
       },
+      maxWidth: {
+        '8xl': '88rem',
+        '9xl': '96rem',
+      },
       backgroundImage: {
       }
     },
diff --git a/client/tailwind.css b/client/tailwind.css
index d495b99f..b369767a 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -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 {