made topic lines and circle names hidden in small screens

client/src/components/circle/LearningPathDiagram.vue

@@ -1,6 +1,6 @@
 <script>
 import * as d3 from 'd3';
-import { useLearningPathStore } from '../../stores/learningPath';
+import {useLearningPathStore} from '../../stores/learningPath';
 
 export default {
   props: {
@@ -54,7 +54,7 @@ export default {
   setup() {
     const learningPathStore = useLearningPathStore()
 
-    return { learningPathStore }
+    return {learningPathStore}
   },
   computed: {
     viewBox() {
@@ -171,14 +171,14 @@ export default {
       .style('font-size', 19)
       .text((d) => d.title)
       .attr('y', radius + 30)
-      .attr('class', 'circlesText text-xl font-bold')
+      .attr('class', 'circlesText text-xl font-bold hidden lg:block')
       .style('text-anchor', 'middle')
       .call(wrap, circleWidth - 20)
 
 
-    function getTopicPosition(i, d, topics){
-      let x =0
-      for (let index=0; index < i; index++){
+    function getTopicPosition(i, d, topics) {
+      let x = 0
+      for (let index = 0; index < i; index++) {
         x += circleWidth * topics[index].circles.length
       }
       return x + 30
@@ -193,8 +193,9 @@ export default {
       .attr('transform', (d, i) => {
         return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
       })
-      .style("visibility", d => d.is_visible ? "visible" : "hidden")
-      .attr('class', 'topic')
+      .attr('class', (d) => {
+        return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
+      })
 
     const topicLines = topicGroups
       .append('line')
@@ -263,3 +264,4 @@ export default {
   </div>
 
 </template>
+