made topic lines and circle names hidden in small screens

This commit is contained in:
Lorenz Padberg 2022-07-05 15:19:22 +02:00
parent 2daf659d71
commit ec2560f88c
1 changed files with 10 additions and 8 deletions

View File

@ -171,7 +171,7 @@ 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)
@ -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>