From 7ea10b0c5dd6ed36ec29c62c36c0e9cb9ba0efbd Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Wed, 9 Jun 2021 10:55:55 +0200
Subject: [PATCH] change userdata css style

---
 .../UserProfile/UserCard_FormUserData.vue     | 114 ++++++++++--------
 1 file changed, 64 insertions(+), 50 deletions(-)

diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index a1f6a5919..79e8df37b 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -6,59 +6,72 @@
       style="background-color: #ebebeba3 !important"
     >
       <b-container>
-        <b-row class="mb-4 text-right">
-          <b-col class="text-right">
-            <a href="#userdata_form" v-if="editUserdata" @click="editUserdata = !editUserdata">
-              <span>{{ $t('form.edit') }}</span>
-            </a>
-            <div v-else>
-              <a href="#userdata_form" @click="onSubmit">
-                <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
-              </a>
-              <a href="#userdata_form" @click="editUserdata = !editUserdata">
-                <span>
-                  <b>{{ $t('form.cancel') }}</b>
-                </span>
-              </a>
-            </div>
+        <b-row class="text-right">
+          <b-col class="mb-3">
+            <b-icon
+              v-if="editUserdata"
+              @click="editUserdata = !editUserdata"
+              class="pointer"
+              icon="gear-fill"
+            >
+              {{ $t('form.change') }}
+            </b-icon>
+
+            <b-icon
+              v-else
+              @click="editUserdata = !editUserdata"
+              class="pointer"
+              icon="x-circle"
+              variant="danger"
+            ></b-icon>
+          </b-col>
+        </b-row>
+      </b-container>
+
+      <b-container>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.firstname') }}</small>
+          </b-col>
+          <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
+            {{ form.firstName }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="form.firstName"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+            <small>{{ $t('form.lastname') }}</small>
+          </b-col>
+          <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
+            {{ form.lastName }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-input type="text" v-model="form.lastName"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+            <small>{{ $t('form.description') }}</small>
+          </b-col>
+          <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
+            {{ form.description }}
+          </b-col>
+          <b-col v-else class="col-md-9 col-sm-10">
+            <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
           </b-col>
         </b-row>
 
-        <div>
-          <b-row class="mb-3">
-            <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-              <small>{{ $t('form.firstname') }}</small>
-            </b-col>
-            <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
-              {{ form.firstName }}
-            </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
-              <b-input type="text" v-model="form.firstName"></b-input>
-            </b-col>
-          </b-row>
-          <b-row class="mb-3">
-            <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
-              <small>{{ $t('form.lastname') }}</small>
-            </b-col>
-            <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
-              {{ form.lastName }}
-            </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
-              <b-input type="text" v-model="form.lastName"></b-input>
-            </b-col>
-          </b-row>
-          <b-row class="mb-3">
-            <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-              <small>{{ $t('form.description') }}</small>
-            </b-col>
-            <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
-              {{ form.description }}
-            </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
-              <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
-            </b-col>
-          </b-row>
-        </div>
+        <b-row class="text-right" v-if="!editUserdata">
+          <b-col>
+            <div class="text-right" ref="submitButton">
+              <b-button variant="info" @click="onSubmit" class="mt-4">
+                {{ $t('form.save') }}
+              </b-button>
+            </div>
+          </b-col>
+        </b-row>
       </b-container>
     </b-card>
   </div>
@@ -98,6 +111,7 @@ export default {
         this.$store.commit('lastName', this.form.lastName)
         this.$store.commit('description', this.form.description)
         this.editUserdata = true
+        alert('Deine Daten wurden gespeichert und sind geändert.')
       } else {
         alert(result.result.message)
       }