shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wizard styling.. ( #3g9na1f )

Browse Source
This commit is contained in:
Cüneyt Şentürk 2022-11-24 16:30:22 +03:00
parent 94ac073127
commit 51a42b57e3
3 changed files with 145 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
resources/assets/js/views/wizard/Company.vue
View File

@ -1,9 +1,14 @@
<template>
<div>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
<WizardSteps :active_state="active"></WizardSteps>
<form ref="form" class="w-full">
<div class="flex flex-col justify-between -mt-5 sm:mt-0 overflow-y-auto" style="height: calc(100% - 53px)">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
</div>
<div class="overflow-x-visible menu-scroll mt-1">
<form ref="form" class="py-2 align-middle inline-block min-w-full">
<div class="relative">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
@ -96,6 +101,10 @@
<div v-if="onFailErrorGet('logo')" class="text-red text-sm mt-1 block" v-html="onFailErrorGet('logo')"></div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="flex items-center justify-center mt-5 gap-x-10">
<base-button class="w-1/2 flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="next()">
@ -116,9 +125,12 @@
</button>
</div>
</div>
</div>
</form>
</div>
<form id="form-dynamic-component" method="POST" action="#"></form>
<component v-bind:is="component" @deleted="onDeleteCurrency($event)"></component>
<notifications></notifications>
</div>
</template>

4
resources/assets/js/views/wizard/Finish.vue
View File

@ -1,10 +1,8 @@
<template>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:py-10 sm:ltr:pl-10 sm:rtl:pr-10 overflow-hidden">
<div class="pr-10">
<WizardSteps :active_state="active"></WizardSteps>
</div>
<div modal-container class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
<div class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
</div>

33
resources/assets/js/views/wizard/Steps.vue
View File

@ -5,11 +5,16 @@
<li class="w-1/3">
<span class="pr-6 flex flex-col">
<span
:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent"
>Text</span>
:class="[{ 'bg-purple': active_state >= 0 }]"
>
Text
</span>
<span :class="[{'font-bold': active_state == 0}, {'font-bold': active_state > 0}]" class="text-sm font-normal mt-2">
<span
class="text-sm font-normal mt-2"
:class="[{ 'font-bold': active_state >= 0 }]"
>
{{ translations.company.title }}
</span>
</span>
@ -18,11 +23,16 @@
<li class="w-1/3">
<span class="px-3 flex flex-col">
<span
:class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent"
>Text</span>
:class="[{ 'bg-purple': active_state >= 1 }]"
>
Text
</span>
<span :class="[{'font-bold': active_state == 1}, {'font-bold': active_state > 1}]" class="text-sm font-normal mt-2">
<span
class="text-sm font-normal mt-2"
:class="[{ 'font-bold': active_state >= 1 }]"
>
{{ translations.currencies.title }}
</span>
</span>
@ -31,11 +41,16 @@
<li class="w-1/3">
<span class="pl-6 flex flex-col">
<span
:class="[{'bg-purple': active_state == 3}]"
:class="[{'bg-purple': active_state == 2}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent"
>Text</span>
>
Text
</span>
<span :class="[{'font-bold': active_state == 3}]" class="text-sm font-normal mt-2">
<span
class="text-sm font-normal mt-2"
:class="[{ 'font-bold': active_state == 2 }]"
>
{{ translations.finish.title }}
</span>
</span>