feat: improve profile

src/locales/de.json

@@ -32,7 +32,7 @@
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
     "mittelname": "Mittelname",
     "nachname": "Nachname",
-    "no_laps_scans_were_recorded_yet": "Es wurden noch keine Runden / Scans aufgezeichnet ...",
+    "no_laps_scans_were_recorded_yet": "Noch keine Runden aufgezeichnet ...",
     "no_sponsorings_for_you_were_recorded_yet": "Es gibt noch keine Sponsorings für dich",
     "not_registered_yet": "Noch nicht registriert?",
     "organization": "Organisation",

src/views/Profile.vue

@@ -1,59 +1,24 @@
 <template>
   <div class="min-h-screen w-full p-4">
-    <div class="container mx-auto flex items-center md:flex-row flex-col">
+    <div class="">
       <div class="
-            flex flex-col
             md:pr-10 md:mb-0
             mb-6
             pr-0
             w-full
-            md:w-auto md:text-left
+            text-center
-            cursor-pointer
+             text-black
-            text-center text-black
             dark:text-gray-200
           ">
         <img src="/favicon-lfk.png" class="h-20 mx-auto" />
-        <h1 class="mb-6 text-3xl font-extrabold leading-none tracking-normal md:tracking-tight font-[Athiti]">
+        <h1 class="text-3xl font-bold whitespace-nowrap font-[Athiti]" v-text="(state.firstname || '') +
-          Lauf Für Kaya!<br>2025</h1>
-        <hr>
-        <p class="mt-6 text-3xl font-bold whitespace-nowrap font-[Athiti]" v-text="(state.firstname || '') +
           ' ' +
           (state.middlename || '') +
           ' ' +
           (state.lastname || '')
-          "></p>
+          "></h1>
         <p class="text-md whitespace-nowrap">Team: {{ state.group }}</p>
       </div>
-      <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center">
-        <div v-if="state.delete_active === false">
-          <button type="button" class="
-                focus:border-black focus:ring-2 focus:ring-black
-                text-white text-base md:text-sm
-                py-3.5
-                px-5
-                md:py-2.5
-                md:px-5
-                rounded-md
-                bg-blue-500
-                hover:bg-blue-600 hover:shadow-lg
-                w-full
-                md:w-auto
-                cursor-pointer
-                mb-1
-                md:mr-1
-              " @click="get_certificate">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-              class="inline h-4 align-sub">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
-            {{ $t("download_certificate") }}
-          </button>
-
-        </div>
-      </div>
       <div class="flex flex-wrap">
         <div class="w-full">
           <div class="flex flex-wrap flex-col w-full tabs">
@@ -95,9 +60,38 @@
             <div v-if="state.activetab === 'profile'" class="tab-content block container">
               <div class="lg:w-2/3 w-full mx-auto overflow-auto">
                 <div class="flex flex-col container">
-                  <form class="form flex flex-wrap w-full">
+                  <div class="flex flex-wrap w-full">
                     <div class="w-full">
-                      <div class="form-element">
+                      <div v-if="state.delete_active === false">
+                        <button type="button" class="
+                        mt-2
+                focus:border-black focus:ring-2 focus:ring-black
+                text-white text-base md:text-sm
+                py-3.5
+                px-5
+                md:py-2.5
+                md:px-5
+                rounded-md
+                bg-blue-500
+                hover:bg-blue-600 hover:shadow-lg
+                w-full
+                md:w-auto
+                cursor-pointer
+                mb-1
+                md:mr-1
+              " @click="get_certificate">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="inline h-4 align-sub">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="7 10 12 15 17 10" />
+                            <line x1="12" y1="15" x2="12" y2="3" />
+                          </svg>
+                          {{ $t("download_certificate") }}
+                        </button>
+
+                      </div>
+                      <div>
                         <div class="text-lg">{{ $t("registrationcode") }}</div>
                         <img class="w-full md:w-auto mb-2 bg-white p-2" alt="Registrierungscode" :src="state.barcode" />
                         <button type="button" class="
@@ -126,7 +120,7 @@
                           {{ $t("download_registrationcode") }}
                         </button>
                       </div>
-                      <div class="form-element">
+                      <div>
                         <div class="text-lg">{{ $t("e_mail_adress") }}</div>
                         <p class="
                           h-10
@@ -145,7 +139,7 @@
                           ease-in-out
                         " v-text="state.email || '---'" />
                       </div>
-                      <div class="form-element">
+                      <div>
                         <div class="text-lg">{{ $t("phone_number") }}</div>
                         <p class="
                           h-10
@@ -165,7 +159,7 @@
                         " v-text="state.phone || '---'" />
                       </div>
                     </div>
-                  </form>
+                  </div>
                   <button type="button" class="
                 focus:border-black focus:ring-2 focus:ring-black
                 text-white text-base md:text-sm
@@ -378,11 +372,15 @@
               </div>
               <!-- End Checkbox -->
 
-              <div class="mt-6 grid">
+              <!-- <div class="mt-6 grid"> -->
-                <button type="submit"
+              <button type="button"
+                class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-teal-100 text-teal-800 hover:bg-teal-200 focus:outline-hidden focus:bg-teal-200 disabled:opacity-50 disabled:pointer-events-none dark:text-teal-500 dark:bg-teal-800/30 dark:hover:bg-teal-800/20 dark:focus:bg-teal-800/20 mt-2 cursor-pointer">
+                Sponsoring hinzufügen
+              </button>
+              <!-- <button type="submit"
                   class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">Sponsoring
-                  hinzufügen</button>
+                  hinzufügen</button> -->
-              </div>
+              <!-- </div> -->
             </div>
             <div v-else>
               <div class="py-4 w-full">
@@ -450,7 +448,13 @@
                             </td>
                           </tr>
                         </tbody>
-                        <tfoot class="text-gray-900 dark:text-gray-50">
+                        <tfoot class="text-black
+                      bg-gray-300
+                      border-t-2
+                      border-t-current
+                          dark:text-white
+                          text-sm
+                          dark:bg-gray-800">
                           <tr>
                             <td class="px-4 py-3">{{ $t("total") }}</td>
                             <td class="px-4 py-3">
@@ -496,7 +500,9 @@
                         ]" />
                         {{ $t("no_sponsorings_for_you_were_recorded_yet") }}
                       </div>
-                      <button @click="mode = 'add_sponsoring'">Sponsoring hinzufügen</button>
+                      <button
+                        class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-teal-100 text-teal-800 hover:bg-teal-200 focus:outline-hidden focus:bg-teal-200 disabled:opacity-50 disabled:pointer-events-none dark:text-teal-500 dark:bg-teal-800/30 dark:hover:bg-teal-800/20 dark:focus:bg-teal-800/20 mt-2"
+                        @click="mode = 'add_sponsoring'">Sponsoring hinzufügen</button>
                     </div>
                   </div>
                 </section>