Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: enhance onboarding modal structure and improve slide handling for better user interaction

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 22:52:44 -05:00
parent 115a4c8ed8
commit dadf71c94b
1 changed files with 16 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,9 +6,10 @@
x-data="{
open: @entangle('showModal'),
currentSlide: @entangle('currentSlide'),
ready: false,
init() {
// Small delay to ensure DOM is settled before showing
setTimeout(() => {
this.ready = true;
this.$el.style.opacity = '1';
this.$el.style.visibility = 'visible';
}, 50);
@@ -24,12 +25,6 @@
{{-- 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-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
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 --}}
@@ -40,27 +35,12 @@
@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">
<div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden"
style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;">
{{-- Slides --}}
@foreach($slides as $index => $slide)
<div wire:key="slide-{{ $slide['id'] }}"
x-show="currentSlide === {{ $index }}"
x-cloak
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
style="flex-direction: column;{{ $index === $currentSlide ? ' display: flex;' : ' display: none;' }}">
{{-- Single slide container that updates content --}}
@php $slide = $slides[$currentSlide] ?? $slides[0]; @endphp
<div style="display: flex; flex-direction: column;">
{{-- Slide Image --}}
@if($slide['image'])
@@ -84,17 +64,16 @@
{{-- Slide Indicators --}}
<div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
@foreach($slides as $dotIndex => $dot)
<div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s;"
:style="currentSlide === {{ $dotIndex }} ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);'"></div>
<div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s; {{ $dotIndex === $currentSlide ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);' }}"></div>
@endforeach
</div>
{{-- Navigation Buttons --}}
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem;">
<button wire:click="previousSlide"
:disabled="currentSlide === 0"
style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer;"
class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed">
@if($currentSlide === 0) disabled @endif
style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer; {{ $currentSlide === 0 ? 'opacity: 0.5; cursor: not-allowed;' : '' }}"
class="text-base/70 hover:text-primary-100">
<span style="display: flex; align-items: center; gap: 0.375rem;">
<svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
@@ -103,19 +82,20 @@
</span>
</button>
<button @click="currentSlide === {{ count($slides) - 1 }} ? $wire.finish() : $wire.nextSlide()"
<button wire:click="{{ $currentSlide === count($slides) - 1 ? 'finish' : 'nextSlide' }}"
style="padding: 0.375rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.15s; border: none; cursor: pointer; color: white;"
class="bg-primary hover:bg-primary/90">
<span style="display: flex; align-items: center; gap: 0.375rem;">
<span x-text="currentSlide === {{ count($slides) - 1 }} ? 'Finish' : (@js($slide['is_guided'] ?? false) ? 'Continue' : 'Next')"></span>
<svg x-show="currentSlide !== {{ count($slides) - 1 }}" style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{{ $currentSlide === count($slides) - 1 ? 'Finish' : (($slide['is_guided'] ?? false) ? 'Continue' : 'Next') }}
@if($currentSlide !== count($slides) - 1)
<svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
@endif
</span>
</button>
</div>
</div>
@endforeach
</div>
</div>
</div>