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) .style('font-size', 19)
.text((d) => d.title) .text((d) => d.title)
.attr('y', radius + 30) .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') .style('text-anchor', 'middle')
.call(wrap, circleWidth - 20) .call(wrap, circleWidth - 20)
@ -193,8 +193,9 @@ export default {
.attr('transform', (d, i) => { .attr('transform', (d, i) => {
return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)" return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
}) })
.style("visibility", d => d.is_visible ? "visible" : "hidden") .attr('class', (d) => {
.attr('class', 'topic') return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
})
const topicLines = topicGroups const topicLines = topicGroups
.append('line') .append('line')
@ -263,3 +264,4 @@ export default {
</div> </div>
</template> </template>