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

fix: stijl zoekpagina

Browse source
This commit is contained in:
Gabriellvl 2025-05-06 09:30:47 +02:00
parent 3360d7c5fa
commit a6b8b6647b
1 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/views/learning-paths/LearningPathSearchPage.vue
View file

@ -17,32 +17,41 @@
</script> </script>
<template> <template>
<div class="search-field-container"> <v-container class="search-page-container">
<learning-path-search-field class="search-field"></learning-path-search-field> <v-row justify="center" class="mb-6">
</div> <v-col cols="12" sm="8" md="6" lg="4">
<learning-path-search-field class="search-field" />
</v-col>
</v-row>
<using-query-result <v-row justify="center">
:query-result="searchQueryResults" <v-col cols="12">
v-slot="{ data }: { data: LearningPath[] }" <using-query-result
> :query-result="searchQueryResults"
<learning-paths-grid :learning-paths="data"></learning-paths-grid> v-slot="{ data }: { data: LearningPath[] }"
</using-query-result> >
<div content="empty-state-container"> <learning-paths-grid :learning-paths="data" />
<v-empty-state </using-query-result>
v-if="!query"
icon="mdi-magnify" <div v-if="!query" class="empty-state-container">
:title="t('enterSearchTerm')" <v-empty-state
:text="t('enterSearchTermDescription')" icon="mdi-magnify"
></v-empty-state> :title="t('enterSearchTerm')"
</div> :text="t('enterSearchTermDescription')"
/>
</div>
</v-col>
</v-row>
</v-container>
</template> </template>
<style scoped> <style scoped>
.search-field-container { .search-page-container {
display: block; padding-top: 40px;
margin: 20px; padding-bottom: 40px;
} }
.search-field {
max-width: 300px; .search-field {
} max-width: 100%;
}
</style> </style>