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

fix: Zoek kaart en pagina

frontend/src/components/BrowseThemes.vue

@@ -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>

frontend/src/views/learning-paths/LearningPathSearchPage.vue

@@ -17,32 +17,52 @@
 </script>
 
 <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
-    </div>
+            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
+        <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
-            :title="t('enterSearchTerm')"
+                    v-if="!query"
-            :text="t('enterSearchTermDescription')"
+                    class="empty-state-container"
-        ></v-empty-state>
+                >
-    </div>
+                    <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 {
+    .search-page-container {
-        display: block;
+        padding-top: 40px;
-        margin: 20px;
+        padding-bottom: 40px;
     }
+
     .search-field {
-        max-width: 300px;
+        max-width: 100%;
     }
 </style>