lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: improved tabs

Browse Source
This commit is contained in:
Philipp Dormann 2025-03-18 21:29:13 +01:00
parent b3197dd3f9
commit 51b66eb85b
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
1 changed files with 41 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/Profile.vue
View File

@ -17,40 +17,40 @@
<div v-if="loadstate === 'loaded'" class="flex flex-wrap"> <div v-if="loadstate === 'loaded'" class="flex flex-wrap">
<div class="w-full"> <div class="w-full">
<div class="flex flex-wrap flex-col w-full tabs"> <div class="flex flex-wrap flex-col w-full tabs">
<div class="flex lg:flex-wrap flex-row lg:space-x-2 justify-center"> <div class="grid grid-cols-3 text-center gap-1">
<div class="flex-none"> <button @click="() => {
<button @click="() => { state.activetab = 'profile';
state.activetab = 'profile'; }
} " :class="{
" :class="{ 'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
'tab-active border-b-2 font-medium border-blue-500': state.activetab === 'profile',
state.activetab === 'profile', 'bg-neutral-200':
}" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button"> state.activetab !== 'profile',
{{ $t("profile") }} }" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
</button> {{ $t("profile") }}
</div> </button>
<div class="flex-none"> <button @click="() => {
<button @click="() => { state.activetab = 'laptimes';
state.activetab = 'laptimes'; }
} " :class="{
" :class="{ 'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
'tab-active border-b-2 font-medium border-blue-500': state.activetab === 'laptimes',
state.activetab === 'laptimes', 'bg-neutral-200':
}" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button"> state.activetab !== 'laptimes',
{{ $t("lap_times") }} }" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
</button> {{ $t("lap_times") }}
</div> </button>
<div class="flex-none"> <button @click="() => {
<button @click="() => { state.activetab = 'sponsorings';
state.activetab = 'sponsorings'; }
} " :class="{
" :class="{ 'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
'tab-active border-b-2 font-medium border-blue-500': state.activetab === 'sponsorings',
state.activetab === 'sponsorings', 'bg-neutral-200':
}" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button"> state.activetab !== 'sponsorings',
{{ $t("sponsoring") }} }" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
</button> {{ $t("sponsoring") }}
</div> </button>
</div> </div>
<div v-if="state.activetab === 'profile'" class="tab-content block"> <div v-if="state.activetab === 'profile'" class="tab-content block">
<div class="w-full mx-auto"> <div class="w-full mx-auto">
@ -58,23 +58,9 @@
<div class="flex flex-wrap w-full"> <div class="flex flex-wrap w-full">
<div class="w-full"> <div class="w-full">
<div v-if="state.delete_active === false"> <div v-if="state.delete_active === false">
<button type="button" class=" <button type="button"
mt-2 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-600 hover:bg-blue-700 hover:shadow-lg w-full md:w-auto cursor-pointer mb-1 md:mr-1"
focus:border-black focus:ring-2 focus:ring-black @click="get_certificate">
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" <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" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="inline h-4 align-sub"> class="inline h-4 align-sub">
@ -89,22 +75,9 @@ md:mr-1
<div> <div>
<div class="text-lg">{{ $t("registrationcode") }}</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" /> <img class="w-full md:w-auto mb-2 bg-white p-2" alt="Registrierungscode" :src="state.barcode" />
<button type="button" class=" <button type="button"
focus:border-black focus:ring-2 focus:ring-black 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-600 hover:bg-blue-700 hover:shadow-lg w-full md:w-auto cursor-pointer mb-1 md:mr-1"
text-white text-base md:text-sm @click="get_registration">
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_registration">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <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" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="inline h-4 align-sub"> class="inline h-4 align-sub">
@ -128,7 +101,7 @@ md:mr-1
</div> </div>
<div v-if="state.delete_active === true"> <div v-if="state.delete_active === true">
<button type="button" <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 mb-1 md:mb-auto w-full md:w-auto cursor-pointer bg-blue-500 hover:bg-blue-600 hover:shadow-lg" 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 mb-1 md:mb-auto w-full md:w-auto cursor-pointer bg-blue-600 hover:bg-blue-700 hover:shadow-lg"
@click="() => { @click="() => {
state.delete_active = false; state.delete_active = false;
} }