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

wizard responsive

Browse Source
This commit is contained in:
Burak Civan 2022-11-21 10:56:17 +03:00
parent 3ff6e110e0
commit dea9c04406
7 changed files with 74 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/css/app.css vendored
View File

@ -54098,6 +54098,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
.full-width-mobile {
width: 100% !important;
}
.full-height-mobile {
height: 100% !important;
}
}
/* full-width for mobile. Some component use inline styling for width */
@ -56931,6 +56935,10 @@ body{
margin-left: 2rem;
}
.sm\:mt-6{
margin-top: 1.5rem;
}
.sm\:block{
display: block;
}
@ -57100,6 +57108,10 @@ body{
padding: 1.75rem;
}
.sm\:p-10{
padding: 2.5rem;
}
.sm\:px-0{
padding-left: 0px;
padding-right: 0px;
@ -57110,11 +57122,41 @@ body{
padding-right: 0.5rem;
}
.sm\:py-10{
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.sm\:text-6xl{
font-size: 2.5rem;
line-height: 2.75rem;
}
.sm\:text-xs{
font-size: 0.75rem;
line-height: 1rem;
}
.sm\:text-base{
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-lg{
font-size: 1.125rem;
line-height: 1.75rem;
}
.sm\:text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
}
.sm\:text-2xl{
font-size: 1.375rem;
line-height: 1.5rem;
}
.sm\:text-purple{
--tw-text-opacity: 1;
color: rgb(85 88 139 / var(--tw-text-opacity));
@ -57124,6 +57166,10 @@ body{
right: 1rem;
}
[dir="ltr"] .sm\:ltr\:pl-10{
padding-left: 2.5rem;
}
[dir="rtl"] .sm\:rtl\:left-4{
left: 1rem;
}
@ -57131,6 +57177,10 @@ body{
[dir="rtl"] .sm\:rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 1;
}
[dir="rtl"] .sm\:rtl\:pr-10{
padding-right: 2.5rem;
}
}
@media (min-width: 768px){

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

@ -1,15 +1,15 @@
<template>
<div>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
<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="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 text-lg animate-spin text-9xl">data_usage</span>
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between -mt-5 sm:mt-0">
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10">
<div class="sm:col-span-6">
<base-input

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

@ -1,8 +1,8 @@
<template>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
<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>
<div class="flex flex-col justify-between overflow-y-auto" style="height: calc(100% - 53px)">
<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>

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

@ -1,10 +1,10 @@
<template>
<div class="relative bg-body z-10 rounded-lg shadow-2xl py-10 ltr:pl-10 rtl:pr-10 overflow-hidden">
<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" style="height:565px;">
<div modal-container 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>

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

@ -2,7 +2,7 @@
<div>
<nav aria-label="Progress">
<ol role="list" class="flex mb-10">
<li class="w-1/4">
<li class="w-1/3">
<span class="pr-6 flex flex-col">
<span
:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
@ -15,7 +15,7 @@
</span>
</li>
<li class="w-1/4">
<li class="w-1/3">
<span class="px-3 flex flex-col">
<span
:class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
@ -28,7 +28,7 @@
</span>
</li>
<li class="w-1/4">
<li class="w-1/3">
<span class="pl-6 flex flex-col">
<span
:class="[{'bg-purple': active_state == 3}]"

4
resources/assets/sass/app.css vendored
View File

@ -605,6 +605,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
.full-width-mobile {
width: 100% !important;
}
.full-height-mobile {
height: 100% !important;
}
}
/* full-width for mobile. Some component use inline styling for width */

10
safelist.txt
View File

@ -18,6 +18,16 @@ sm:min-h-500
sm:max-w-4xl
sm:space-x-4
sm:text-purple
sm:text-xs
sm:text-base
sm:text-lg
sm:text-xl
sm:text-2xl
sm:p-10
sm:py-10
sm:ltr:pl-10
sm:rtl:pr-10
sm:mt-6
md:grid-cols-2
lg:mt-2
lg:mt-4