fixed learning path text wrapping

This commit is contained in:
Lorenz Padberg 2022-07-04 12:22:38 +02:00
parent cc293400b4
commit 5f39cfb2e9
2 changed files with 34 additions and 137 deletions

View File

@ -36,113 +36,7 @@ export default {
},
],
},
// {
// id: 6,
// title: 'Gewinnen von Kunden',
// slug: 'gewinnen-von-kunden',
// type: 'learnpath.Topic',
// translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
// is_visible: true,
// circles: [
// {
// id: 7,
// title: 'Gewinnen',
// slug: 'gewinnen',
// type: 'learnpath.Circle',
// translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
// learning_sequences: [
// {
// id: 11,
// title: 'Starten',
// done: true,
// },
// {
// id: 13,
// title: 'Beobachten',
// done: false,
// },
// {
// id: 11,
// title: 'Starten',
// done: false,
// },
// {
// id: 13,
// title: 'Beobachten',
// done: false,
// },
// {
// id: 11,
// title: 'Starten',
// done: true,
// },
// {
// id: 13,
// title: 'Beobachten',
// done: false,
// },
// ],
// },
// ],
// },
// {
// id: 8,
// title: 'Beraten der Kunden',
// slug: 'beraten-der-kunden',
// type: 'learnpath.Topic',
// translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
// is_visible: true,
// circles: [
// {
// id: 9,
// title: 'Einstieg',
// slug: 'einstieg',
// type: 'learnpath.Circle',
// translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
// learning_sequences: [
// {
// id: 11,
// title: 'Starten',
// done: true,
// },
// {
// id: 13,
// title: 'Beobachten',
// done: false,
// },
// ],
// },
// {
// id: 10,
// title: 'Analyse des letzten Falles',
// slug: 'analyse',
// type: 'learnpath.Circle',
// translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
// learning_sequences: [
// {
// id: 11,
// title: 'Starten',
// done: true,
// },
// {
// id: 13,
// title: 'Beobachten',
// done: true,
// },
// {
// id: 18,
// title: 'Anwenden',
// done: true,
// },
// {
// id: 30,
// title: 'Üben',
// done: false,
// },
// ],
// },
// ],
// },
],
},
type: Object,
@ -159,7 +53,7 @@ export default {
},
computed: {
viewBox() {
return `0 0 ${this.width} ${this.height* 1.5}`
return `0 0 ${this.width} ${this.height * 1.5}`
},
circles() {
@ -225,7 +119,7 @@ export default {
})
})
.on('click', function (d, i) {
vueRouter.push('/circle/'+i.slug)
vueRouter.push('/circle/' + i.slug)
})
.attr('role', 'button')
@ -258,6 +152,7 @@ export default {
//Draw arc paths
arcs.append('path').attr('d', arcGenerator)
const circlesText = circle_groups
.append('text')
.attr('fill', blue900)
@ -266,37 +161,39 @@ export default {
.attr('y', radius + 30)
.attr('class', 'circlesText text-xl font-bold')
.style('text-anchor', 'middle')
.call(wrap, 200 - 20)
.call(wrap, circleWidth - 20)
const topicTitles = this.svg
.selectAll('.topicTitles')
const topicGroups = this.svg
.selectAll('.topic')
.data(this.learningPathContents.topics)
.enter()
.append('text')
.attr('x', (d, i) => {
return i * circleWidth * d.circles.length + 50
.append('g')
.attr('transform', (d, i) => {
console.log(d)
return "translate(" + (i * circleWidth * d.circles.length + 30) + ",0)"
})
.attr('y', 50)
.style("visibility", d => d.is_visible ? "visible" : "hidden")
.attr('class', 'topic')
const topicLines = topicGroups
.append('line')
.attr('x1', -10)
.attr('y1', 0)
.attr('x2', -10)
.attr('y2', 0)
.attr('class', 'stroke-gray-500')
.attr('stroke-width', 1.76)
const topicTitles = topicGroups
.append('text')
.attr('y', 20)
.attr('fill', blue900)
.style('font-size', 19)
.text((d) => d.title)
.attr('class', 'topicTitles font-bold')
.call(wrap, circleWidth)
const topicLines = this.svg
.selectAll('lines')
.data(this.learningPathContents.topics)
.enter()
.append('line')
.attr('x1', (d, i) => {
return i * circleWidth * d.circles.length + 30
})
.attr('y1', 10)
.attr('x2', (d, i) => {
return i * circleWidth * d.circles.length + 30
})
.attr('y2', 0)
.attr('class', 'stroke-gray-500')
.attr('stroke-width', 1.76)
topicLines.transition().duration('1000').attr('y2', 350)

View File

@ -387,12 +387,12 @@ Neukundinnen und -kunden.""",
TopicFactory(title="Betreuen und Ausbauen des Kundenstamms", parent=lp)
circle_analyse = create_circle('Betreueun', lp)
create_circle_children(circle_analyse, 'Betreueun')
circle_analyse = create_circle('Betreuen', lp)
create_circle_children(circle_analyse, 'Betreuen')
TopicFactory(title="Prüfungsvorbereitung", is_visible=False, parent=lp)
circle_analyse = create_circle('Prüfungsvorbereitung', lp)
create_circle_children(circle_analyse, 'Prüfungsvorbereitung')
TopicFactory(title="Prüfungs- vorbereitung", is_visible=False, parent=lp)
circle_analyse = create_circle('Prüfungs- vorbereitung', lp)
create_circle_children(circle_analyse, 'Prüfungs- vorbereitung')
# locales