update profile edit view

src/components/ProfileList.vue

@@ -5,24 +5,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <ul>
-    <li v-for="(value, valueKey) in values" :key="value.id">
-      <div class="row m-1">
-        <div class="col">
-          <img
-            style="max-width: 64px"
+  <ul class="list-group list-group-flush">
+    <li
+      class="list-group-item"
+      v-for="(value, valueKey) in values"
+      :key="value.id"
+    >
+      <div class="row">
+        <div class="col d-flex align-items-center">
+          <div
+            class="list-icon me-1"
+            :style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
             v-if="value[type].icon_url"
-            :src="iconUrl + value[type].icon_url"
-            :alt="`${value[type].name} Logo`"
           />
-          {{ value[type].name }}
+          <div>
+            {{ 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"
+                class="form-select form-select-sm"
                 aria-label="Selektiere dein Level"
                 v-model="editableValues[valueKey].level"
                 @input="$emit('update-values', editableValues)"
@@ -41,28 +46,32 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <div v-else-if="type == 'language'">
             <div v-if="editable">
               <div v-if="editable">
-              <select
-                v-if="editableValues[valueKey]"
-                class="form-select"
-                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"
+                <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)"
                 >
-                  {{ value }}
-                </option>
-              </select>
-            </div>
+                  <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>
           </div>
           <div v-else-if="type == 'contacttype'">
             <div v-if="editable">
-              <input class="form-control" v-model="editableValues[valueKey].content"/>
+              <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'">
@@ -74,15 +83,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             </div>
           </div>
         </div>
-        <div class="col">
+        <div class="col text-end">
           <button
             v-if="editable"
             type="button"
-            class="btn btn-outline-danger"
+            class="btn btn-sm btn-light"
             aria-label="Löschen"
             @click="$emit('removeValue', value[type].name)"
           >
-            <i class="bi-trash"></i>
+            <i class="text-danger bi bi-x-circle"></i>
           </button>
         </div>
       </div>
@@ -110,7 +119,7 @@ export default {
   },
   data() {
     return {
-      iconUrl: this.apiUrl,
+      iconBaseUrl: this.apiUrl,
       levelSelection: levelJson,
       languagesSelection: languagesJson,
       editableValues: this.values,
@@ -123,3 +132,13 @@ export default {
   },
 };
 </script>
+
+<style scope>
+.list-icon {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 32px;
+  width: 32px;
+}
+</style>