src/components/profile/Section.vue

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       {{ title }}
     </h3>
     <div class="card w-100">
-      <div class="card-body">
+      <div class="card-body lh-1">
         <slot></slot>
       </div>
     </div>

src/views/profile/Edit.vue

@@ -98,36 +98,17 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         @update-values="profile.searchtopics = $event"
       ></auto-complete>
 
-      <Section title="Verfügbarkeit">
-        <div class="form-check mb-3">
-          <input 
-            v-model="profile.availability_status"
-            class="form-check-input me-2" 
-            type="checkbox" 
-            id="availability_status">
-          <label class="form-check-label" for="availability_status">
-            Ich bin aktuell verfügbar
-          </label>
-        </div>
-        <div class="mb-3" v-if="profile.availability_status">
-          <label class="form-label">
-            Stunden pro Woche
-          </label>
-          <input 
-            v-model="profile.availability_hours_per_week" 
-            type="number" 
-            class="form-control">
-        </div>
-        <label for="availability" class="form-label">
-          Anmerkungen
-        </label>
+      <div class="col-12 col-xs-12">
+        <label for="availability" class="form-label fw-bold"
+          >Ich bin für Anfragen verfügbar:</label
+        >
         <textarea
           class="form-control"
           id="availability"
           rows="3"
-          v-model="profile.availability_text"
+          v-model="profile.availability"
         ></textarea>
-      </Section>
+      </div>
 
       <auto-complete
         type="contacttype"
@@ -190,14 +171,12 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 import RequestMixin from "@/mixins/request.mixin"
 
 import AutoComplete from "@/components/AutoComplete";
-import Section from '@/components/profile/Section'
 
 export default {
   name: "profileEdit",
   mixins: [RequestMixin],
   components: {
     AutoComplete,
-    Section,
   },
   data() {
     return {
@@ -209,9 +188,7 @@ export default {
         pronouns: "",
         volunteerwork: "",
         freetext: "",
-        availability_status: false,
-        availability_hours_per_week: null,
-        availability_text: "",
+        availability: "",
         address: {
           postcode: "",
           city: "",

src/views/profile/View.vue

@@ -55,28 +55,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </div>
       </Section>
 
-      <Section title="Verfügbarkeit">
-        <div class="d-flex align-items-center">
-          <div v-if="profile.availability_status">
-            <i class="bi bi-check-square me-1"></i>
-            ja
-          </div>
-          <div v-else>
-            <i class="bi bi-x-square me-1"></i>
-            nein
-          </div>
-          <span 
-            class="ms-3" 
-            v-if="profile.availability_status && profile.availability_hours_per_week">
-            ({{ profile.availability_hours_per_week }} Stunden pro Woche)
-          </span>
-        </div>
-        <div v-if="profile.availability_text" class="mt-3">
-          <label class="form-label fw-bold">
-            Anmerkungen
-          </label>
-          <div>{{ profile.availability_text }}</div>
-        </div>
+      <Section
+        v-if="profile.availability"
+        title="Verfügbarkeit">
+        <div class="lh-base">{{ profile.availability }}</div>
       </Section>
 
       <Section