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

fix: stijl consistent leerpaden

Browse source
This commit is contained in:
Gabriellvl 2025-05-15 19:31:38 +02:00
parent e6f05364f3
commit 4600e5dd9e
4 changed files with 41 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/LearningPathSearchField.vue
View file

@ -31,4 +31,9 @@
></v-text-field> ></v-text-field>
</template> </template>
<style scoped></style> <style scoped>
.search-field {
width: 25%;
min-width: 300px;
}
</style>

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

@ -53,9 +53,9 @@
white-space: normal; white-space: normal;
} }
.results-grid { .results-grid {
margin: 20px; margin: 20px auto;
display: flex; display: flex;
align-items: stretch; justify-content: center;
gap: 20px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }

15
frontend/src/views/SingleTheme.vue
View file

@ -31,13 +31,14 @@
</script> </script>
<template> <template>
<div class="container"> <div class="container d-flex flex-column align-items-center justify-center">
<using-query-result :query-result="themeQueryResult"> <using-query-result :query-result="themeQueryResult">
<h1>{{ currentThemeInfo!!.title }}</h1> <h1>{{ currentThemeInfo!!.title }}</h1>
<p>{{ currentThemeInfo!!.description }}</p> <p>{{ currentThemeInfo!!.description }}</p>
<div class="search-field-container"> <br>
<div class="search-field-container mt-sm-6">
<v-text-field <v-text-field
class="search-field" class="search-field mx-auto"
:label="t('search')" :label="t('search')"
append-inner-icon="mdi-magnify" append-inner-icon="mdi-magnify"
v-model="searchFilter" v-model="searchFilter"
@ -56,13 +57,15 @@
<style scoped> <style scoped>
.search-field-container { .search-field-container {
display: block; justify-content: center !important;
margin: 20px;
} }
.search-field { .search-field {
max-width: 300px; width: 25%;
min-width: 300px;
} }
.container { .container {
padding: 20px; padding: 20px;
justify-content: center;
justify-items: center;
} }
</style> </style>

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

@ -17,43 +17,31 @@
</script> </script>
<template> <template>
<v-container class="search-page-container"> <div class="search-page-container d-flex flex-column align-items-center justify-center">
<v-row
justify="center" <div class = "search-field-container">
class="mb-6" <learning-path-search-field class="mx-auto"/>
</div>
<using-query-result
:query-result="searchQueryResults"
v-slot="{ data }: { data: LearningPath[] }"
> >
<v-col <learning-paths-grid :learning-paths="data" />
cols="12" </using-query-result>
sm="8"
md="6"
lg="4"
>
<learning-path-search-field class="search-field" />
</v-col>
</v-row>
<v-row justify="center"> <div
<v-col cols="12"> v-if="!query"
<using-query-result class="empty-state-container"
:query-result="searchQueryResults" >
v-slot="{ data }: { data: LearningPath[] }" <v-empty-state
> icon="mdi-magnify"
<learning-paths-grid :learning-paths="data" /> :title="t('enterSearchTerm')"
</using-query-result> :text="t('enterSearchTermDescription')"
/>
</div>
<div </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> </template>
<style scoped> <style scoped>
@ -61,8 +49,7 @@
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
} }
.search-field-container {
.search-field { justify-content: center !important;
max-width: 100%;
} }
</style> </style>