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

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

@ -68,7 +68,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
</button> </button>
</div> </div>
<LearningPathDiagram <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" diagram-type="horizontal"
:learning-path="learningPathStore.learningPath" :learning-path="learningPathStore.learningPath"
></LearningPathDiagram> ></LearningPathDiagram>