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

31
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>
<v-row justify="center">
<v-col cols="12">
<using-query-result <using-query-result
:query-result="searchQueryResults" :query-result="searchQueryResults"
v-slot="{ data }: { data: LearningPath[] }" v-slot="{ data }: { data: LearningPath[] }"
> >
<learning-paths-grid :learning-paths="data"></learning-paths-grid> <learning-paths-grid :learning-paths="data" />
</using-query-result> </using-query-result>
<div content="empty-state-container">
<div v-if="!query" class="empty-state-container">
<v-empty-state <v-empty-state
v-if="!query"
icon="mdi-magnify" icon="mdi-magnify"
:title="t('enterSearchTerm')" :title="t('enterSearchTerm')"
:text="t('enterSearchTermDescription')" :text="t('enterSearchTermDescription')"
></v-empty-state> />
</div> </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 { .search-field {
max-width: 300px; max-width: 100%;
} }
</style> </style>