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

Merge pull request #243 from SELab-2/fix/zoekveld-zichtbaar

Browse source 
fix: Zoek kaart en pagina
This commit is contained in:
Gabriellvl 2025-05-13 08:29:34 +02:00 • committed by GitHub
commit f61ad47597
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 63 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/components/BrowseThemes.vue
View file

@ -57,6 +57,22 @@
</div>
<v-row v-else>
<v-col
cols="12"
sm="6"
md="4"
lg="4"
class="d-flex"
>
<ThemeCard
path="/learningPath/search"
:is-absolute-path="true"
:title="t('searchAllLearningPathsTitle')"
:description="t('searchAllLearningPathsDescription')"
icon="mdi-magnify"
class="fill-height grey-bg-card"
/>
</v-col>
<v-col
v-for="card in cards"
:key="card.key"
@ -74,24 +90,13 @@
class="fill-height"
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
lg="4"
class="d-flex"
>
<ThemeCard
path="/learningPath/search"
:is-absolute-path="true"
:title="t('searchAllLearningPathsTitle')"
:description="t('searchAllLearningPathsDescription')"
icon="mdi-magnify"
class="fill-height"
/>
</v-col>
</v-row>
</v-container>
</template>
<style scoped></style>
<style scoped>
.grey-bg-card {
background-color: #f6faf2;
border: 2px solid #0e6942;
}
</style>

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

@ -17,32 +17,52 @@
</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-page-container {
padding-top: 40px;
padding-bottom: 40px;
}
.search-field {
max-width: 300px;
max-width: 100%;
}
</style>