improve profile page #36

src/components/AutoComplete.vue

@@ -9,25 +9,42 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     :values="values"
     :type="type"
     :editable="true"
+    :show-secondary="showSecondary"
     @remove-value="removeValue($event)"
     @update-values="this.$emit('update-values', this.values)"
   >
   </profile-list>
   <div v-bind="$attrs" class="card-body">
     <div class="row">
-      <div class="col">
+      <div class="col-12 col-md-4 col-lg-3 col-xl-2">
+        <div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
+      </div>
+      <div class="col-12 col-md-6">
         <input
           autocomplete="off"
           type="text"
-          class="form-control"
+          class="form-control form-control-sm"
           id="searchText"
           maxlength="25"
+          :placeholder="placeholder"
           v-model="searchText"
           @input="search()"
           @keyup.enter="addResult()"
         />
+        <div v-if="searchResults">
+          <ul class="list-group">
+            <li
+              class="list-group-item"
+              v-for="result in searchResults"
+              :key="result.id"
+              @click="addResult(result)"
+            >
+              {{ result.name }}
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="col">
+      <div class="col-md-2">
         <button
           v-if="searchText != ''"
           type="button"
@@ -40,18 +57,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </button>
       </div>
     </div>
-    <div v-if="searchResults">
-      <ul class="list-group">
-        <li
-          class="list-group-item"
-          v-for="result in searchResults"
-          :key="result.id"
-          @click="addResult(result)"
-        >
-          {{ result.name }}
-        </li>
-      </ul>
-    </div>
   </div>
 </template>
 <script>
@@ -76,6 +81,14 @@ export default {
     values: {
       type: Array,
     },
+    showSecondary: {
+      type: Boolean,
+      default: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {