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

Fix mobile LearningPathDiagram rendering

This commit is contained in:
Daniel Egger 2022-11-11 18:01:19 +01:00
parent 5aaa9da8dc
commit f212df5d29
2 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/components/learningPath/LearningPathDiagram.vue
View File

@ -319,12 +319,9 @@ export default {
.style("text-anchor", "middle")
.call(wrap, circleWidth - 20)
.attr("class", () => {
let classes = "circlesText text-xl font-bold block";
if (
this.diagramType === "vertical" ||
this.diagramType === "horizontalSmall"
) {
classes += " hidden";
let classes = "circlesText text-xl font-bold hidden";
if (this.diagramType === "horizontal") {
classes += " lg:block";
}
return classes;
});
@ -338,13 +335,9 @@ export default {
);
})
.attr("class", (d) => {
let classes = "topic";
if (
this.diagramType === "vertical" ||
this.diagramType === "horizontalSmall" ||
!d.is_visible
) {
classes += " hidden";
let classes = "topic hidden";
if (this.diagramType === "horizontal" && d.is_visible) {
classes += " lg:block";
}
return classes;
});
@ -358,15 +351,11 @@ export default {
.duration("1000")
.attr("y2", 350);
let topicTitlesClassValue = "topic-title font-bold";
if (this.diagramType === "horizontalSmall") {
topicTitlesClassValue += " hidden";
}
topicTitles
.attr("y", 20)
.style("font-size", "18px")
.call(wrap, circleWidth * 0.8)
.attr("class", topicTitlesClassValue);
.attr("class", "topic-title font-bold");
}
function wrap(text, width) {
@ -413,8 +402,8 @@ export default {
:id="svgId"
class="learning-path-visualization h-full mx-auto -mt-6 lg:mt-0"
:class="{
'max-h-[384px]': ['horizontal'].includes(diagramType),
'max-h-[90px]': ['horizontalSmall'].includes(diagramType),
'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType),
}"
:viewBox="viewBox"
></svg>

2
client/src/pages/learningPath/LearningPathPage.vue
View File

@ -68,7 +68,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
</button>
</div>
<LearningPathDiagram
class="mx-auto max-w-[1920px] max-h-[380px] w-full px-4"
class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
diagram-type="horizontal"
:learning-path="learningPathStore.learningPath"
></LearningPathDiagram>