Restyling

client/src/components/circle/LearningPathDiagram.vue

@@ -64,7 +64,7 @@ export default {
   },
 
   mounted() {
-    const circleWidth = this.vertical ? 100 : 200
+    const circleWidth = this.vertical ? 60 : 200
     const radius = (circleWidth * 0.8) / 2
     const blue900 = '#00224D',
       blue700 = '#1A5197',
@@ -145,7 +145,7 @@ export default {
       .attr('class', 'circlesText text-xl font-bold hidden lg:block')
 
     const topicHeightOffset = 20
-    const topicHeight = 35
+    const topicHeight = 50
     const circleHeigth = circleWidth + 20
 
     function getTopicHorizontalPosition(i, d, topics) {
@@ -199,28 +199,31 @@ export default {
     const topicLines = topicGroups
       .append('line')
       .attr('class', 'stroke-gray-500')
-      .attr('stroke-width', 1.76)
+      .attr('stroke-width', 1)
 
     const topicTitles = topicGroups
       .append('text')
       .attr('fill', blue900)
-      .style('font-size', 19)
+      .style('font-size', 16)
       .text((d) => d.title)
 
 
     // Calculate positions of objects
 
     if (this.vertical) {
+      const Circles_X = 60
+      const Topics_X = Circles_X - radius
+
+
       circle_groups
         .attr('transform', (d, i) => {
-          return 'translate(100,' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
+          return 'translate('+ Circles_X + ',' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
         })
 
       circlesText
         .attr('y', 7)
         .attr('x', radius + 40)
 
-      const Topics_X = 100 - radius
 
       topicGroups
         .attr('transform', (d, i) => {
@@ -229,12 +232,11 @@ export default {
 
 
       topicLines
-        .attr('x1', 0)
-        .attr('y1', -20)
-        .attr('x2', 0)
-        .attr('y2', -20)
         .transition().duration('1000').attr('x2', this.width * 0.8)
 
+      topicTitles
+        .attr('y', 30)
+
 
     } else {
       circle_groups

client/src/views/LearningPathViewVertical.vue

@@ -31,7 +31,7 @@ const emits = defineEmits(['closemodal'])
     :show="show"
     @closemodal="$emit('closemodal')">
     <div class="bg-white" v-if="learningPathStore.learningPath">
-      <h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
+      <h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
       <div class="learningpath flex flex-col">
         <div class="flex flex-col h-max">
           <div class="bg-red py-8">