#20 doppelte Kontaktmöglichkeiten, bessere Erklärung dazu

package.json

@@ -7,10 +7,10 @@
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.0",
-    "@vue/cli-plugin-router": "^4.5.0",
-    "@vue/cli-service": "^4.5.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^5.0.1",

src/components/ProfileList.vue

@@ -6,6 +6,20 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <template>
   <ul class="list-group list-group-flush">
+    <li 
+      v-if="type == 'contacttype'"
+      class="list-group-item">
+      <div class="row">
+        <div class="col-6">
+          Kontaktart
+          <i class="bi bi-info-circle" v-tooltip="contactTypeTooltip"></i>
+        </div>
+        <div class="col-6">
+          Wert
+          <i class="bi bi-info-circle" v-tooltip="contactContentTooltip"></i>
+        </div>
+      </div>
+    </li>
     <li
       class="list-group-item"
       v-for="(value, valueKey) in values"
@@ -102,6 +116,14 @@ export default {
       levelSelection: levelJson,
       languagesSelection: languagesJson,
       editableValues: this.values,
+      contactTypeTooltip: {
+        content:  'Kontaktart z.B. E-Mail, Matrix, Twitter etc...',
+        html: true
+      },
+      contactContentTooltip: {
+        content:  'Wert: zB.: beate@beispiel.de, @beate:beispiel.de, beate_beispiel',
+        html: true
+      }
     };
   },
   watch: {

src/views/profile/Edit.vue

@@ -167,7 +167,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 <auto-complete
                   type="contacttype"
                   :values="profile.contacts"
-                  placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
+                  placeholder="Zuerst Kontaktart: E-Mail, Matrix, Web, etc.."
                   @update-values="profile.contacts = $event"
                 ></auto-complete>
               </template>

src/views/profile/View.vue

@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <label class="form-label fw-bold">
             Anmerkungen
           </label>
-          <div class="line-break-text">{{ profile.availability_text }}</div>
+          <div>{{ profile.availability_text }}</div>
         </div>
       </Section>
 
@@ -98,11 +98,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         title="Sonstiges">
         <div v-if="profile.freetext" :class="{ 'lh-base': true, 'mb-4': profile.volunteerwork }">
           <h5>Über mich</h5>
-           <div class="line-break-text">{{ profile.freetext }}</div>
+          {{ profile.freetext }}
         </div>
         <div v-if="profile.volunteerwork" class="lh-base">
           <h5>Ehrenamtliche Arbeit</h5>
-          <div class="line-break-text">{{ profile.volunteerwork }}</div>
+          {{ profile.volunteerwork }}
         </div>
       </Section>
     </template>
@@ -154,7 +154,4 @@ export default {
 </script>
 
 <style>
-.line-break-text{
-  white-space: pre-line;
-}
 </style>