Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

refactor: streamline onboarding modal initialization and transition effects for enhanced user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 22:50:56 -05:00
parent ae1996c25f
commit 115a4c8ed8
1 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
extensions/Others/Onboarding/resources/views/modal.blade.php
View File

@@ -1,45 +1,53 @@
@php use Illuminate\Support\Facades\Storage; @endphp @php use Illuminate\Support\Facades\Storage; @endphp
<div> <div>
@if($showModal && count($slides) > 0) @if($showModal && count($slides) > 0)
{{-- Inline x-cloak style to prevent flash --}} <div id="onboarding-modal-wrapper"
<style>[x-cloak] { display: none !important; }</style> style="opacity: 0; visibility: hidden;"
x-data="{
<div x-data="{ open: @entangle('showModal'), currentSlide: @entangle('currentSlide'), ready: false }" open: @entangle('showModal'),
x-init="$nextTick(() => { ready = true; }); $watch('open', value => { currentSlide: @entangle('currentSlide'),
if(value) { init() {
document.documentElement.style.overflow = 'hidden'; // Small delay to ensure DOM is settled before showing
} else { setTimeout(() => {
document.documentElement.style.overflow = ''; this.$el.style.opacity = '1';
} this.$el.style.visibility = 'visible';
})" }, 50);
x-show="open && ready" this.$watch('open', value => {
x-cloak if(value) {
style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;"> document.documentElement.style.overflow = 'hidden';
} else {
document.documentElement.style.overflow = '';
}
});
}
}">
{{-- Backdrop --}} {{-- Modal Container --}}
@if($this->showBackdrop) <div x-show="open"
<div class="bg-black/50 transition-opacity duration-300"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
x-show="open && ready"
x-transition:enter="transition ease-out duration-300" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-300" x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
wire:click="finish"></div> style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
@endif
{{-- Backdrop --}}
{{-- Modal Dialog --}} @if($this->showBackdrop)
<div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible" <div class="bg-black/50"
style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
x-show="open && ready" wire:click="finish"></div>
x-transition:enter="transition ease-out duration-300" @endif
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100" {{-- Modal Dialog --}}
x-transition:leave="transition ease-in duration-300" <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
x-transition:leave-start="opacity-100 scale-100" style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;"
x-transition:leave-end="opacity-0 scale-90"> x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
{{-- Slides --}} {{-- Slides --}}
@foreach($slides as $index => $slide) @foreach($slides as $index => $slide)
@@ -108,6 +116,7 @@
</div> </div>
</div> </div>
@endforeach @endforeach
</div>
</div> </div>
</div> </div>
@endif @endif