Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki 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
<div>
@if($showModal && count($slides) > 0)
{{-- Inline x-cloak style to prevent flash --}}
<style>[x-cloak] { display: none !important; }</style>
<div x-data="{ open: @entangle('showModal'), currentSlide: @entangle('currentSlide'), ready: false }"
x-init="$nextTick(() => { ready = true; }); $watch('open', value => {
if(value) {
document.documentElement.style.overflow = 'hidden';
} else {
document.documentElement.style.overflow = '';
}
})"
x-show="open && ready"
x-cloak
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;">
<div id="onboarding-modal-wrapper"
style="opacity: 0; visibility: hidden;"
x-data="{
open: @entangle('showModal'),
currentSlide: @entangle('currentSlide'),
init() {
// Small delay to ensure DOM is settled before showing
setTimeout(() => {
this.$el.style.opacity = '1';
this.$el.style.visibility = 'visible';
}, 50);
this.$watch('open', value => {
if(value) {
document.documentElement.style.overflow = 'hidden';
} else {
document.documentElement.style.overflow = '';
}
});
}
}">
{{-- Backdrop --}}
@if($this->showBackdrop)
<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"
{{-- Modal Container --}}
<div x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
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-end="opacity-0"
wire:click="finish"></div>
@endif
{{-- Modal Dialog --}}
<div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;"
x-show="open && ready"
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-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
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;">
{{-- Backdrop --}}
@if($this->showBackdrop)
<div class="bg-black/50"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
wire:click="finish"></div>
@endif
{{-- Modal Dialog --}}
<div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;"
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 --}}
@foreach($slides as $index => $slide)
@@ -108,6 +116,7 @@
</div>
</div>
@endforeach
</div>
</div>
</div>
@endif