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