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 class="w-full">
<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="flex-none">
<button @click="() => {
state.activetab = 'profile';
}
" :class="{
'tab-active border-b-2 font-medium border-blue-500':
state.activetab === 'profile',
}" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button">
{{ $t("profile") }}
</button>
</div>
<div class="flex-none">
<button @click="() => {
state.activetab = 'laptimes';
}
" :class="{
'tab-active border-b-2 font-medium border-blue-500':
state.activetab === 'laptimes',
}" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button">
{{ $t("lap_times") }}
</button>
</div>
<div class="flex-none">
<button @click="() => {
state.activetab = 'sponsorings';
}
" :class="{
'tab-active border-b-2 font-medium border-blue-500':
state.activetab === 'sponsorings',
}" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button">
{{ $t("sponsoring") }}
</button>
</div>
<div class="grid grid-cols-3 text-center gap-1">
<button @click="() => {
state.activetab = 'profile';
}
" :class="{
'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
state.activetab === 'profile',
'bg-neutral-200':
state.activetab !== 'profile',
}" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
{{ $t("profile") }}
</button>
<button @click="() => {
state.activetab = 'laptimes';
}
" :class="{
'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
state.activetab === 'laptimes',
'bg-neutral-200':
state.activetab !== 'laptimes',
}" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
{{ $t("lap_times") }}
</button>
<button @click="() => {
state.activetab = 'sponsorings';
}
" :class="{
'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
state.activetab === 'sponsorings',
'bg-neutral-200':
state.activetab !== 'sponsorings',
}" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
{{ $t("sponsoring") }}
</button>
</div>
<div v-if="state.activetab === 'profile'" class="tab-content block">
<div class="w-full mx-auto">
@ -58,23 +58,9 @@
<div class="flex flex-wrap w-full">
<div class="w-full">
<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">
<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-600 hover:bg-blue-700 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">
@ -89,22 +75,9 @@ md:mr-1
<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="
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_registration">
<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-600 hover:bg-blue-700 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"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="inline h-4 align-sub">
@ -128,7 +101,7 @@ md:mr-1
</div>
<div v-if="state.delete_active === true">
<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="() => {
state.delete_active = false;
}