fixed learning path text wrapping
This commit is contained in:
parent
cc293400b4
commit
5f39cfb2e9
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue