tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

fix(frontend): Titels van leerpaden worden nu niet meer afgeknipt

Browse source 
(In de titel van een leerpadpagina & in de overzichten)
This commit is contained in:
Gerald Schmittinger 2025-04-02 09:34:08 +02:00
parent ed8b5c919d
commit c9667af9b4
2 changed files with 16 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/components/LearningPathsGrid.vue
View file

@ -24,7 +24,7 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
cover
v-if="learningPath.image"
></v-img>
<v-card-title>{{ learningPath.title }}</v-card-title>
<v-card-title class="learning-path-title">{{ learningPath.title }}</v-card-title>
<v-card-subtitle>
<v-icon icon="mdi-human-male-boy"></v-icon>
<span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t('yearsAge') }}</span>
@ -45,6 +45,9 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
.learning-path-card {
width: 300px;
}
.learning-path-title {
white-space: normal;
}
.results-grid {
margin: 20px;
display: flex;

17
frontend/src/views/learning-paths/LearningPathPage.vue
View file

@ -110,11 +110,15 @@
:query-result="learningPathQueryResult"
v-slot="learningPath: {data: LearningPath}"
>
<v-navigation-drawer v-model="navigationDrawerShown">
<v-list-item
:title="learningPath.data.title"
:subtitle="learningPath.data.description"
></v-list-item>
<v-navigation-drawer v-model="navigationDrawerShown" :width="350">
<v-list-item>
<template v-slot:title>
<div class="learning-path-title">{{ learningPath.data.title }}</div>
</template>
<template v-slot:subtitle>
<div>{{ learningPath.data.description }}</div>
</template>
</v-list-item>
<v-list-item>
<template v-slot:subtitle>
<p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
@ -188,6 +192,9 @@
</template>
<style scoped>
.learning-path-title {
white-space: normal;
}
.search-field-container {
min-width: 250px;
}