bessere anzeige search

src/views/Search.vue

@@ -46,17 +46,20 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             class="text-decoration-none"
             :to="{ path: `/s/profile/${result.user_id}` }"
           >
-            <div class="card">
+            <div class="card search-card">
               <div class="card-body">
                 <h5 class="card-title">
-                  {{ result.nickname
-                  }}<span v-if="result.pronouns"> ({{ result.pronouns }})</span>
+                  {{ result.nickname}}
+                  <span v-if="result.pronouns"> ({{ result.pronouns }})</span>
                 </h5>
-                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
-                <p class="card-text" v-if="result.skills">
+                <p
+                  class="card-text"
+                  v-if="result.skills && result.skills.length > 0"
+                >
                   Fähigkeiten:
-                  <span v-for="skill in result.skills" :key="skill.skill.name"
-                    >{{ skill.skill.name }}
+                  <span v-for="(skill, index) in result.skills" :key="index"
+                    >
+                    {{ skill.skill.name}}<span v-if="index != result.skills.length - 1">, </span>
                   </span>
                 </p>
               </div>
@@ -68,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
+import RequestMixin from "@/mixins/request.mixin";
 
 export default {
   name: "Search",