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

chore(frontend): Vuetify collapsables

Browse source
This commit is contained in:
Tibo De Peuter 2025-05-19 15:23:07 +02:00
parent b245edc54d
commit 90050a2d87
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
2 changed files with 9 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/components/DiscussionSideBarElement.vue
View file

@ -29,24 +29,14 @@
} }
} }
}); });
function toggleDropdown(): void {
dropdownEnabled.value = !dropdownEnabled.value;
}
</script> </script>
<template> <template>
<main> <v-expansion-panel>
<div <v-expansion-panel-title>
class="dropdown-toggle" {{ path.title }}
@click="toggleDropdown()" </v-expansion-panel-title>
> <v-expansion-panel-text>
▼{{ path.title }}
</div>
<div
class="dropdown"
v-if="dropdownEnabled"
>
<using-query-result <using-query-result
:query-result="learningObjectListQueryResult" :query-result="learningObjectListQueryResult"
v-slot="learningObjects: { data: LearningObject[] }" v-slot="learningObjects: { data: LearningObject[] }"
@ -67,36 +57,9 @@
</v-list-item> </v-list-item>
</template> </template>
</using-query-result> </using-query-result>
</div> </v-expansion-panel-text>
</main> </v-expansion-panel>
</template> </template>
<style scoped> <style scoped>
.dropdown {
margin-left: 0.5rem;
padding-left: 1rem;
border-left: 2px solid #e0e0e0;
background-color: #f9f9f9;
border-radius: 4px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.dropdown-toggle {
cursor: pointer;
display: flex;
align-items: center;
font-weight: 600;
user-select: none;
padding: 0.5rem;
transition: color 0.2s;
}
.dropdown-toggle:hover {
color: #27c53f;
}
.dropdown-icon {
margin-right: 0.5rem;
font-size: 0.9rem;
}
</style> </style>

4
frontend/src/components/DiscussionsSideBar.vue
View file

@ -31,7 +31,7 @@
</template> </template>
</v-list-item> </v-list-item>
<v-divider></v-divider> <v-divider></v-divider>
<div> <v-expansion-panels>
<using-query-result <using-query-result
:query-result="allLearningPathsResult" :query-result="allLearningPathsResult"
v-slot="learningPaths: { data: LearningPath[] }" v-slot="learningPaths: { data: LearningPath[] }"
@ -44,7 +44,7 @@
> >
</DiscussionSideBarElement> </DiscussionSideBarElement>
</using-query-result> </using-query-result>
</div> </v-expansion-panels>
</div> </div>
</v-navigation-drawer> </v-navigation-drawer>
<div class="control-bar-above-content"> <div class="control-bar-above-content">