implement search layout #32 #33 #35

src/components/AutoComplete.vue

@@ -27,10 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           aria-label="Hinzufügen"
           @click="addResult()"
         >
-          <img
-            src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
-            alt="Hinzufügen Icon"
-          />
+          <i clas="bi-plus-lg"></i>
           Hinzufügen
         </button>
       </div>

src/components/Avatar.vue

@@ -0,0 +1,37 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="avatar bg-dark">
+    {{ avatarLetters }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String
+  },
+  computed: {
+    avatarLetters() {
+      return this.name.substr(0, 2)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.avatar {
+  align-items: center;
+  border-radius: .25rem;
+  color: white;
+  display: flex;
+  font-weight: bold;
+  height: 2.5rem;
+  justify-content: center;
+  width: 2.5rem;
+}
+</style>

src/components/Navbar.vue

@@ -26,59 +26,59 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <span class="navbar-toggler-icon"></span>
       </button>
       <div
-        class="collapse navbar-collapse"
+        class="collapse navbar-collapse d-lg-flex"
         :class="{ show: showMobileNav }"
         id="navbarSupportedContent"
       >
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <ul class="navbar-nav mb-2 mb-lg-0">
           <li class="nav-item">
             <router-link
               class="nav-link"
               :to="{ path: `/s/search` }"
               active-class="active"
-              >Suche</router-link
-            >
+            >Suche</router-link
+          >
           </li>
           <li class="nav-item">
             <router-link
               class="nav-link"
               :to="{ path: `/s/profile/${currentUserId}` }"
               active-class="active"
-              >Mein Profil</router-link
-            >
+            >Mein Profil</router-link
+          >
           </li>
           <li class="nav-item">
             <router-link
               class="nav-link"
               :to="{ path: `/s/profile-edit` }"
               active-class="active"
-              >Bearbeiten</router-link
-            >
-          </li>
-          <li class="nav-item">
-            <button class="btn btn-outline-danger" @click="logout()">
-              Logout
-            </button>
+            >Bearbeiten</router-link
+          >
           </li>
         </ul>
-        <form class="d-flex" @submit.prevent="searchRedirect()">
+        <form class="flex-grow-1 d-flex ms-lg-3 me-lg-4 mb-3 mb-lg-0" @submit.prevent="searchRedirect()">
           <input
-            class="form-control me-2"
+            class="form-control bg-white me-2"
             v-model="searchText"
             type="search"
             placeholder="Profile durchsuchen"
             aria-label="Search"
           />
           <button
-            class="btn btn-outline-primary"
+            class="btn btn-primary"
             type="submit"
           >
-            <img
-              src="/img/bootstrap-icons-1.5.0/search.svg"
-              alt="Suche Icon"
-            />
+            <i class="bi bi-search"></i>
           </button>
         </form>
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <button class="btn btn-danger w-100" @click="logout()">
+              <i class="bi bi-box-arrow-right"></i>
+              Logout
+            </button>
+          </li>
+        </ul>
       </div>
     </div>
   </nav>

src/components/ProfileList.vue

@@ -82,10 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             aria-label="Löschen"
             @click="$emit('removeValue', value[type].name)"
           >
-            <img
-              src="/img/bootstrap-icons-1.5.0/trash.svg"
-              alt="Löschen Icon"
-            />
+            <i class="bi-trash"></i>
           </button>
         </div>
       </div>

src/components/SearchResult.vue

@@ -0,0 +1,54 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <router-link
+    class="text-decoration-none d-flex"
+    :to="{ path: `/s/profile/${profile.user_id}` }"
+  >
+    <div class="card w-100">
+      <div class="card-body d-flex">
+        <div class="d-flex align-items-center justify-content-center me-3">
+          <Avatar :name="profile.nickname"/>
+        </div>
+        <div class="text-body">
+        <h5 class="card-title mb-1 lh-1">
+          {{ profile.nickname}}
+          <span v-if="profile.pronouns"> ({{ profile.pronouns }})</span>
+        </h5>
+        <small
+          class="card-text lh-1 text-dark"
+          v-if="profile.skills && profile.skills.length > 0"
+        >
+          Top-Fähigkeiten: {{ topSkills }}
+        </small>
+        </div>
+      </div>
+    </div>
+  </router-link>
+</template>
+<script>
+import Avatar from '@/components/Avatar'
+
+export default {
+  components: {
+    Avatar,
+  },
+  props: {
+    profile: Object
+  },
+  computed: {
+    topSkills() {
+      return this.profile.skills.slice(0, 5).map(s => s.skill.name).join(', ')
+    }
+  }
+}
+</script>
+<style scoped>
+.card:hover {
+  background-color: #f8f9fa;
+}
+</style>

src/components/Spinner.vue

@@ -0,0 +1,9 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="spinner-grow" role="status"></div>
+</template>