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

Restyling

This commit is contained in:
Lorenz Padberg 2022-08-11 15:15:52 +02:00
parent bc971065e3
commit 5350f624c9
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,7 +64,7 @@ export default {
}, },
mounted() { mounted() {
const circleWidth = this.vertical ? 100 : 200 const circleWidth = this.vertical ? 60 : 200
const radius = (circleWidth * 0.8) / 2 const radius = (circleWidth * 0.8) / 2
const blue900 = '#00224D', const blue900 = '#00224D',
blue700 = '#1A5197', blue700 = '#1A5197',
@ -145,7 +145,7 @@ export default {
.attr('class', 'circlesText text-xl font-bold hidden lg:block') .attr('class', 'circlesText text-xl font-bold hidden lg:block')
const topicHeightOffset = 20 const topicHeightOffset = 20
const topicHeight = 35 const topicHeight = 50
const circleHeigth = circleWidth + 20 const circleHeigth = circleWidth + 20
function getTopicHorizontalPosition(i, d, topics) { function getTopicHorizontalPosition(i, d, topics) {
@ -199,28 +199,31 @@ export default {
const topicLines = topicGroups const topicLines = topicGroups
.append('line') .append('line')
.attr('class', 'stroke-gray-500') .attr('class', 'stroke-gray-500')
.attr('stroke-width', 1.76) .attr('stroke-width', 1)
const topicTitles = topicGroups const topicTitles = topicGroups
.append('text') .append('text')
.attr('fill', blue900) .attr('fill', blue900)
.style('font-size', 19) .style('font-size', 16)
.text((d) => d.title) .text((d) => d.title)
// Calculate positions of objects // Calculate positions of objects
if (this.vertical) { if (this.vertical) {
const Circles_X = 60
const Topics_X = Circles_X - radius
circle_groups circle_groups
.attr('transform', (d, i) => { .attr('transform', (d, i) => {
return 'translate(100,' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')' return 'translate('+ Circles_X + ',' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
}) })
circlesText circlesText
.attr('y', 7) .attr('y', 7)
.attr('x', radius + 40) .attr('x', radius + 40)
const Topics_X = 100 - radius
topicGroups topicGroups
.attr('transform', (d, i) => { .attr('transform', (d, i) => {
@ -229,12 +232,11 @@ export default {
topicLines topicLines
.attr('x1', 0)
.attr('y1', -20)
.attr('x2', 0)
.attr('y2', -20)
.transition().duration('1000').attr('x2', this.width * 0.8) .transition().duration('1000').attr('x2', this.width * 0.8)
topicTitles
.attr('y', 30)
} else { } else {
circle_groups circle_groups

2
client/src/views/LearningPathViewVertical.vue
View File

@ -31,7 +31,7 @@ const emits = defineEmits(['closemodal'])
:show="show" :show="show"
@closemodal="$emit('closemodal')"> @closemodal="$emit('closemodal')">
<div class="bg-white" v-if="learningPathStore.learningPath"> <div class="bg-white" v-if="learningPathStore.learningPath">
<h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1> <h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
<div class="learningpath flex flex-col"> <div class="learningpath flex flex-col">
<div class="flex flex-col h-max"> <div class="flex flex-col h-max">
<div class="bg-red py-8"> <div class="bg-red py-8">