module button styling

This commit is contained in:
Burak Civan 2022-11-28 17:30:25 +03:00
parent 6d047e99e8
commit ef75f2c43e
7 changed files with 29 additions and 10 deletions

7
public/css/app.css vendored
View File

@ -57885,5 +57885,12 @@ body{
.\32xl\:w-8{ .\32xl\:w-8{
width: 2rem; width: 2rem;
} }
.\32xl\:flex-row{
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
} }

View File

@ -1,6 +1,6 @@
@props(['module', 'installed', 'enable']) @props(['module', 'installed', 'enable'])
<div x-show="price_type == 'monthly'" class="w-full"> <div x-show="price_type == 'monthly'" class="w-full flex space-x-6">
<x-tooltip message="{{ trans('modules.hosted_on_akaunting') }}" placement="top" width="w-full"> <x-tooltip message="{{ trans('modules.hosted_on_akaunting') }}" placement="top" width="w-full">
<x-link <x-link
href="{{ $module->action_url }}" href="{{ $module->action_url }}"
@ -13,7 +13,7 @@
</x-tooltip> </x-tooltip>
</div> </div>
<div x-show="price_type == 'yearly'" class="w-full"> <div x-show="price_type == 'yearly'" class="w-full flex space-x-6">
@if (in_array('onprime', $module->where_to_use) || $module->isPurchase) @if (in_array('onprime', $module->where_to_use) || $module->isPurchase)
@if ($installed) @if ($installed)
@can('delete-modules-item') @can('delete-modules-item')
@ -98,7 +98,7 @@
@endif @endif
</div> </div>
<div x-show="price_type == 'lifetime'" class="w-full"> <div x-show="price_type == 'lifetime'" class="w-full flex space-x-6">
@if (empty($module->plan)) @if (empty($module->plan))
@if ($installed) @if ($installed)
@can('delete-modules-item') @can('delete-modules-item')

View File

@ -1,7 +1,7 @@
@props(['module']) @props(['module'])
@if ($module->price != '0.0000') @if ($module->price != '0.0000')
<div class="flex gap-2 items-baseline cursor-default"> <div class="flex flex-col 2xl:flex-row gap-2 items-baseline cursor-default">
{!! $module->price_prefix !!} {!! $module->price_prefix !!}
<div x-show="price_type == 'monthly'"> <div x-show="price_type == 'monthly'">

View File

@ -1,7 +1,7 @@
<x-form> <x-form>
<div class="lg:absolute lg:ltr:right-0 lg:rtl:left-0 top-4"> <div>
<div class="relative" x-model="price_type"> <div class="relative" x-model="price_type">
<div class="w-58 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg"> <div class="w-58 flex items-center bg-gray-200 p-1 rounded-lg">
<button type="button" <button type="button"
x-on:click="price_type = 'monthly'" x-on:click="price_type = 'monthly'"
class="w-18 flex justify-center px-2" class="w-18 flex justify-center px-2"

View File

@ -0,0 +1,9 @@
<div
x-data="{ }"
x-init="document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.add('invisible') }) : null, setTimeout(() => $refs.loadingModuleContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.remove('invisible') }) : null , 1010)"
x-ref="loadingModuleContent"
class="absolute lg:flex items-center justify-center bg-body top-0 bottom-0 left-0 right-0"
style="width: 120%; z-index: 60;"
>
<img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />
</div>

View File

@ -54,7 +54,7 @@
@endif @endif
</div> </div>
<div class="w-full lg:w-5/12" x-data="{ price_type : 'yearly' }"> <div class="relative w-full lg:w-5/12" x-data="{ price_type : 'yearly' }">
<div class="flex flex-col space-y-6"> <div class="flex flex-col space-y-6">
<div class="flex flex-col cursor-default"> <div class="flex flex-col cursor-default">
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
@ -101,10 +101,12 @@
{!! ! empty($module->sort_desc) ? $module->sort_desc : strip_tags($module->description) !!} {!! ! empty($module->sort_desc) ? $module->sort_desc : strip_tags($module->description) !!}
</div> </div>
<div class="relative flex items-center space-x-4 justify-between"> <div class="flex items-center space-x-4 justify-between">
<x-loading.module />
<x-layouts.modules.show.price :module="$module" /> <x-layouts.modules.show.price :module="$module" />
<div class="flex w-1/2 lg:justify-center"> <div class="flex lg:justify-center">
@if ($module->price != '0.0000') @if ($module->price != '0.0000')
<x-layouts.modules.show.toggle /> <x-layouts.modules.show.toggle />
@endif @endif
@ -114,7 +116,7 @@
<x-layouts.modules.show.information :module="$module" /> <x-layouts.modules.show.information :module="$module" />
</div> </div>
<div class="flex justify-around space-x-12 mt-5"> <div class="flex justify-around mt-5">
<x-layouts.modules.show.buttons :module="$module" :installed="$installed" :enable="$enable" /> <x-layouts.modules.show.buttons :module="$module" :installed="$installed" :enable="$enable" />
</div> </div>
</div> </div>

View File

@ -70,6 +70,7 @@ lg:overflow-x-hidden
xl:grid-cols-4 xl:grid-cols-4
xl:w-8/12 xl:w-8/12
xl:pt-6 xl:pt-6
2xl:flex-row
ltr:-right-10 ltr:-right-10
rtl:-left-10 rtl:-left-10
ltr:rounded-tl-md ltr:rounded-tl-md