VBV-88: LearningPathView vertical
This commit is contained in:
Daniel Egger
parent
384999619c
commit
0c01d39fb3
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
<script>
|
||||
import * as d3 from 'd3'
|
||||
import { useLearningPathStore } from '../../stores/learningPath'
|
||||
import { useLearningPathStore } from '@/stores/learningPath'
|
||||
import colors from '@/colors.json'
|
||||
import * as log from 'loglevel'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
width: {
|
||||
default: 1640,
|
||||
type: Number,
|
||||
},
|
||||
height: {
|
||||
default: 256,
|
||||
type: Number,
|
||||
},
|
||||
vertical: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
|
|
@ -22,14 +15,19 @@ export default {
|
|||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: 1640,
|
||||
height: 384,
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const learningPathStore = useLearningPathStore()
|
||||
return { learningPathStore }
|
||||
},
|
||||
|
||||
computed: {
|
||||
viewBox() {
|
||||
return `0 0 ${this.width} ${this.height * 1.5}`
|
||||
return `0 0 ${this.width} ${this.height}`
|
||||
},
|
||||
circles() {
|
||||
function someFinished(circle, learningSequence) {
|
||||
|
|
@ -81,6 +79,13 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
log.debug('LearningPathDiagram mounted')
|
||||
|
||||
if (this.vertical) {
|
||||
this.width = Math.min(1080, window.innerWidth - 32)
|
||||
this.height = 860
|
||||
}
|
||||
|
||||
const circleWidth = this.vertical ? 60 : 200
|
||||
const radius = (circleWidth * 0.8) / 2
|
||||
|
||||
|
|
@ -235,7 +240,7 @@ export default {
|
|||
// Calculate positions of objects
|
||||
|
||||
if (this.vertical) {
|
||||
const Circles_X = 60
|
||||
const Circles_X = radius
|
||||
const Topics_X = Circles_X - radius
|
||||
|
||||
circle_groups.attr('transform', (d, i) => {
|
||||
|
|
@ -255,10 +260,7 @@ export default {
|
|||
return 'topic '.concat(d.is_visible ? 'block' : 'hidden')
|
||||
})
|
||||
|
||||
topicLines
|
||||
.transition()
|
||||
.duration('1000')
|
||||
.attr('x2', this.width * 0.8)
|
||||
topicLines.transition().duration('1000').attr('x2', this.width)
|
||||
|
||||
topicTitles.attr('y', 30)
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -54,16 +54,18 @@ onMounted(async () => {
|
|||
></LearningPathDiagram>
|
||||
</div>
|
||||
|
||||
<h1 data-cy="learning-path-title" class="m-12">{{ learningPathStore.learningPath.title }}</h1>
|
||||
<h1 data-cy="learning-path-title" class="m-6 lg:m-12" style="hyphens: auto">
|
||||
{{ learningPathStore.learningPath.title }}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="bg-white m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
|
||||
class="bg-white m-6 lg:m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
|
||||
>
|
||||
<div class="p-8 flex-auto">
|
||||
<div class="p-4 lg:p-8 flex-auto">
|
||||
<h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2>
|
||||
<p class="mt-4 text-xl"></p>
|
||||
</div>
|
||||
<div class="p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
|
||||
<div class="p-4 lg:p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
|
||||
Nächster Schirtt
|
||||
<h3>
|
||||
{{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}:
|
||||
|
|
|
|||
|
|
@ -1,46 +1,39 @@
|
|||
<script setup lang="ts">
|
||||
import * as log from 'loglevel'
|
||||
import { useLearningPathStore } from '@/stores/learningPath'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
import * as log from 'loglevel';
|
||||
import {useLearningPathStore} from '@/stores/learningPath';
|
||||
import {useUserStore} from '@/stores/user';
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
|
||||
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
|
||||
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
|
||||
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
|
||||
|
||||
|
||||
log.debug('LearningPathView created');
|
||||
log.debug('LearningPathView created')
|
||||
|
||||
const props = defineProps<{
|
||||
learningPathSlug: string,
|
||||
learningPathSlug: string
|
||||
show: boolean
|
||||
|
||||
}>()
|
||||
|
||||
|
||||
const learningPathStore = useLearningPathStore();
|
||||
const userStore = useUserStore();
|
||||
const learningPathStore = useLearningPathStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const emits = defineEmits(['closemodal'])
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<ItFullScreenModal
|
||||
:show="show"
|
||||
@closemodal="$emit('closemodal')">
|
||||
<div class="bg-white" v-if="learningPathStore.learningPath">
|
||||
<h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
|
||||
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
|
||||
<div class="bg-white mx-auto max-w-[1440px] lg:p-6 p-4" v-if="learningPathStore.learningPath">
|
||||
<h1 style="hyphens: auto">{{ learningPathStore.learningPath.title }}</h1>
|
||||
<div class="learningpath flex flex-col">
|
||||
<div class="flex flex-col h-max">
|
||||
<div class="bg-red py-8">
|
||||
<LearningPathDiagram class="max-w-[1680px] w-full"
|
||||
height="2000"
|
||||
identifier="verticalVisualization"
|
||||
v-bind:vertical="true"></LearningPathDiagram>
|
||||
<LearningPathDiagram
|
||||
class="max-w-[1280px] w-full"
|
||||
identifier="verticalVisualization"
|
||||
v-bind:vertical="true"
|
||||
></LearningPathDiagram>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ItFullScreenModal>
|
||||
</template>
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue