chore: Update modal styles for better user experience

This commit is contained in:
Andras Bacsai 2024-05-29 10:43:49 +02:00
parent edacfcdec7
commit 6d52cef73a
4 changed files with 5 additions and 5 deletions

View File

@ -48,7 +48,7 @@ class="relative w-auto h-auto">
@endif @endif
<template x-teleport="body"> <template x-teleport="body">
<div x-show="modalOpen" <div x-show="modalOpen"
class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen" x-cloak> class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen" style="zoom:1.1;" x-cloak>
<div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0" <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="modalOpen=false" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="modalOpen=false"

View File

@ -22,9 +22,9 @@
@endif @endif
@endif @endif
<template x-teleport="body"> <template x-teleport="body">
<div x-show="modalOpen" class="fixed top-0 left-0 lg:px-0 px-4 z-[99] flex items-center justify-center w-screen h-screen" <div x-show="modalOpen" class="fixed top-0 left-0 lg:px-0 px-4 z-[99] flex items-center justify-center w-screen h-screen" style="zoom:1.1;"
x-cloak> x-cloak>
<div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0" <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"></div> class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"></div>

View File

@ -9,7 +9,7 @@
@endif @endif
</x-modal-input> </x-modal-input>
</div> </div>
<div class="flex flex-wrap gap-2 pt-4"> <div class="flex flex-col flex-wrap gap-2 pt-4">
@forelse($resource->scheduled_tasks as $task) @forelse($resource->scheduled_tasks as $task)
@if ($resource->type() == 'application') @if ($resource->type() == 'application')
<a class="box" <a class="box"

View File

@ -29,7 +29,7 @@ class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox="0 0
<template x-teleport="body"> <template x-teleport="body">
<div x-show="modalOpen" <div x-show="modalOpen"
class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen" class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen" style="zoom:1.1;"
x-cloak> x-cloak>
<div x-show="modalOpen" x-transition:enter="ease-out duration-100" <div x-show="modalOpen" x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"