ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/components/circle/LearningPathDiagram.vue
View File

@ -1,6 +1,6 @@
<script> <script>
import * as d3 from 'd3'; import * as d3 from 'd3';
import { useLearningPathStore } from '../../stores/learningPath'; import {useLearningPathStore} from '../../stores/learningPath';
export default { export default {
props: { props: {
@ -54,7 +54,7 @@ export default {
setup() { setup() {
const learningPathStore = useLearningPathStore() const learningPathStore = useLearningPathStore()
return { learningPathStore } return {learningPathStore}
}, },
computed: { computed: {
viewBox() { viewBox() {
@ -171,14 +171,14 @@ 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)
function getTopicPosition(i, d, topics){ function getTopicPosition(i, d, topics) {
let x =0 let x = 0
for (let index=0; index < i; index++){ for (let index = 0; index < i; index++) {
x += circleWidth * topics[index].circles.length x += circleWidth * topics[index].circles.length
} }
return x + 30 return x + 30
@ -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>