From 20a3de4d80ef22cae312034073d363211258a215 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 14 Sep 2022 09:34:59 +0200
Subject: [PATCH] VBV-144: enable `hyphens: auto` on body tag

---
 client/src/components/circle/LearningPathDiagram.vue | 12 +++++++++---
 client/src/views/CircleView.vue                      |  2 +-
 client/src/views/LearningPathView.vue                |  4 ++--
 client/src/views/LearningPathViewVertical.vue        |  2 +-
 client/tailwind.css                                  |  4 ++++
 .../learnpath/create_default_learning_path.py        |  4 ++--
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index d2beac47..99ea8355 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -182,8 +182,14 @@ export default {
     const circlesText = circle_groups
       .append('text')
       .attr('fill', colors.blue[900])
-      .style('font-size', 19)
-      .text((d) => d.title)
+      .style('font-size', 18)
+      .style('hyphens', 'auto')
+      .text((d) => {
+        if (!this.vertical) {
+          return d.title.replace('Prüfungsvorbereitung', 'Prüfungs- vorbereitung')
+        }
+        return d.title
+      })
 
     const topicHeightOffset = 20
     const topicHeight = 50
@@ -294,7 +300,7 @@ export default {
 
       topicTitles
         .attr('y', 20)
-        .style('font-size', 19)
+        .style('font-size', 18)
         .call(wrap, circleWidth * 0.8)
         .attr('class', 'topicTitles font-bold')
     }
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 6881dfec..e2d17b3d 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -59,7 +59,7 @@ onMounted(async () => {
                   <span class="inline">zurück zum Lernpfad</span>
                 </router-link>
 
-                <h1 class="text-blue-dark text-7xl" data-cy="circle-title">
+                <h1 class="text-blue-dark text-4xl lg:text-6xl" data-cy="circle-title">
                   {{ circleStore.circle?.title }}
                 </h1>
 
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 0f7621eb..1dd1319d 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -54,7 +54,7 @@ onMounted(async () => {
           ></LearningPathDiagram>
         </div>
 
-        <h1 data-cy="learning-path-title" class="m-6 lg:m-12" style="hyphens: auto">
+        <h1 data-cy="learning-path-title" class="m-6 lg:m-12">
           {{ learningPathStore.learningPath.title }}
         </h1>
 
@@ -66,7 +66,7 @@ onMounted(async () => {
             <p class="mt-4 text-xl"></p>
           </div>
           <div class="p-4 lg:p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
-            Nächster Schirtt
+            Nächster Schritt
             <h3>
               {{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}:
               {{ learningPathStore.learningPath.nextLearningContent.parentLearningSequence.title }}
diff --git a/client/src/views/LearningPathViewVertical.vue b/client/src/views/LearningPathViewVertical.vue
index dc04b828..596857a6 100644
--- a/client/src/views/LearningPathViewVertical.vue
+++ b/client/src/views/LearningPathViewVertical.vue
@@ -21,7 +21,7 @@ const emits = defineEmits(['closemodal'])
 <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">
-      <h1 style="hyphens: auto">{{ learningPathStore.learningPath.title }}</h1>
+      <h1>{{ learningPathStore.learningPath.title }}</h1>
       <div class="learningpath flex flex-col">
         <div class="flex flex-col h-max">
           <div class="bg-red py-8">
diff --git a/client/tailwind.css b/client/tailwind.css
index 8a361e65..d495b99f 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -6,6 +6,10 @@ html {
   @apply text-black
 }
 
+body {
+  hyphens: auto;
+}
+
 svg {
   @apply fill-current
 }
diff --git a/server/vbv_lernwelt/learnpath/create_default_learning_path.py b/server/vbv_lernwelt/learnpath/create_default_learning_path.py
index a69ff1c8..a1f27c12 100644
--- a/server/vbv_lernwelt/learnpath/create_default_learning_path.py
+++ b/server/vbv_lernwelt/learnpath/create_default_learning_path.py
@@ -425,8 +425,8 @@ Neukundinnen und -kunden.""",
     create_circle_children(circle_analyse, 'Betreuen')
 
     TopicFactory(title="Prüfung", is_visible=True, parent=lp)
-    circle_analyse = create_circle('Prüfungs- vorbereitung', lp)
-    create_circle_children(circle_analyse, 'Prüfungs- vorbereitung')
+    circle_analyse = create_circle('Prüfungsvorbereitung', lp)
+    create_circle_children(circle_analyse, 'Prüfungsvorbereitung')
 
     # locales
     if not skip_locales: