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 {

src/components/ProfileList.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       :key="value.id"
     >
       <div class="row">
-        <div class="col d-flex align-items-center">
+        <div class="col-12 col-md-5 d-flex align-items-center">
           <div
             class="list-icon me-1"
             :style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
@@ -22,70 +22,49 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             {{ value[type].name }}
           </div>
         </div>
-        <div class="col">
-          <div v-if="type == 'skill'">
-            <div v-if="editable">
-              <select
-                v-if="editableValues[valueKey]"
-                class="form-select form-select-sm"
-                aria-label="Selektiere dein Level"
-                v-model="editableValues[valueKey].level"
-                @input="$emit('update-values', editableValues)"
+        <div class="col-10 col-md-5">
+          <div v-if="type == 'skill' && showSecondary">
+            <select
+              class="form-select form-select-sm"
+              aria-label="Selektiere dein Level"
+              v-model="editableValues[valueKey].level"
+              @input="$emit('update-values', editableValues)"
+            >
+              <option
+                v-for="(value, key) in levelSelection"
+                :value="key"
+                :key="key"
               >
-                <option
-                  v-for="(value, key) in levelSelection"
-                  :value="key"
-                  :key="key"
-                >
-                  {{ value.long || value }}
-                </option>
-              </select>
-            </div>
-            <div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
+                {{ value.long || value }}
+              </option>
+            </select>
           </div>
           <div v-else-if="type == 'language'">
-            <div v-if="editable">
-              <div v-if="editable">
-                <select
-                  v-if="editableValues[valueKey]"
-                  class="form-select form-select-sm"
-                  aria-label="Selektiere dein Level"
-                  v-model="editableValues[valueKey].level"
-                  @input="$emit('update-values', editableValues)"
-                >
-                  <option
-                    v-for="(value, key) in languagesSelection"
-                    :value="key"
-                    :key="key"
-                  >
-                    {{ value }}
-                  </option>
-                </select>
-              </div>
-            </div>
-            <div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
+            <select
+              class="form-select form-select-sm"
+              aria-label="Selektiere dein Level"
+              v-model="editableValues[valueKey].level"
+              @input="$emit('update-values', editableValues)"
+            >
+              <option
+                v-for="(value, key) in languagesSelection"
+                :value="key"
+                :key="key"
+              >
+                {{ value }}
+              </option>
+            </select>
           </div>
           <div v-else-if="type == 'contacttype'">
-            <div v-if="editable">
-              <input 
-                class="form-control form-control-sm" 
-                maxlength="200" 
-                v-model="editableValues[valueKey].content"
-              />
-            </div>
-            <div v-else>
-              <span v-if="value[type].name === 'E-Mail'">
-                <a :href="`mailto:${value.content}`">{{ value.content }}</a>
-              </span>
-              <span v-else>
-                {{ value.content }}
-              </span>
-            </div>
+            <input
+              class="form-control form-control-sm"
+              maxlength="200"
+              v-model="editableValues[valueKey].content"
+            />
           </div>
         </div>
-        <div class="col text-end">
+        <div class="col-2 text-end">
           <button
-            v-if="editable"
             type="button"
             class="btn btn-sm btn-light"
             aria-label="Löschen"
@@ -112,10 +91,10 @@ export default {
       type: Array,
       required: true,
     },
-    editable: {
+    showSecondary: {
       type: Boolean,
-      default: false,
-    },
+      default: true
+    }
   },
   data() {
     return {

src/components/Skill.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <template>
   <div class="skill rounded me-2">
-    <div class="skill__left px-2">
+    <div class="skill__left p-2">
       <div class="skill__icon" :style="{ backgroundImage: iconUrl }"></div>
     </div>
     <div class="skill__right d-flex align-items-center rounded-end px-2">