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

refactor: enhance modal layout and styling in onboarding component for improved user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 22:42:29 -05:00
parent 5c4e39a2f5
commit 62b346ea37
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,11 +11,13 @@
document.documentElement.style.overflow = '';
}
})"
class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden pointer-events-none">
class="fixed inset-0 z-50 overflow-hidden"
style="display: flex; align-items: center; justify-content: center; pointer-events: none;">
{{-- Backdrop --}}
@if($this->showBackdrop)
<div class="absolute inset-0 bg-black/50 transition-opacity duration-300 pointer-events-auto"
<div class="absolute inset-0 bg-black/50 transition-opacity duration-300"
style="pointer-events: auto;"
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
@@ -26,8 +28,9 @@
wire:click="finish"></div>
@endif
<div class="w-full max-w-xl mx-4 md:mx-auto bg-background-secondary border border-neutral rounded-lg shadow-2xl overflow-hidden h-[500px] flex flex-col relative z-10 pointer-events-auto"
{{-- Modal Dialog --}}
<div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden relative"
style="width: 100%; max-width: 32rem; height: 500px; margin: 1rem; pointer-events: auto;"
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
@@ -36,7 +39,7 @@
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
{{-- Slides --}}
@foreach($slides as $index => $slide)
<div wire:key="slide-{{ $slide['id'] }}"
x-show="currentSlide === {{ $index }}"
@@ -46,56 +49,59 @@
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="flex flex-col h-full absolute inset-0">
class="absolute inset-0 flex flex-col"
style="display: flex; flex-direction: column; height: 100%;">
{{-- Slide Image --}}
@if($slide['image'])
<div class="w-full h-56 flex-shrink-0 overflow-hidden rounded-t-lg">
<img class="w-full h-full object-cover"
<div style="width: 100%; height: 14rem; flex-shrink: 0; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0;">
<img style="width: 100%; height: 100%; object-fit: cover;"
src="{{ Storage::url($slide['image']) }}"
alt="{{ $slide['title'] }}">
</div>
@endif
<div class="p-6 flex-1 overflow-y-auto">
<h3 class="text-xl font-bold text-primary-100 mb-2.5">
{{-- Slide Content --}}
<div style="padding: 1.5rem; flex: 1; overflow-y: auto;">
<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
{{ $slide['title'] }}
</h3>
<p class="text-sm text-base/80 leading-relaxed">
<p style="font-size: 0.875rem; line-height: 1.625;" class="text-base/80">
{{ $slide['description'] }}
</p>
</div>
<div class="flex justify-center gap-2 px-6 pb-4 flex-shrink-0">
{{-- Slide Indicators --}}
<div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem; flex-shrink: 0;">
@foreach($slides as $dotIndex => $dot)
<div class="h-1.5 rounded-full transition-all duration-300"
:class="currentSlide === {{ $dotIndex }} ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
<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>
@endforeach
</div>
<div class="flex justify-between items-center px-6 pb-5 pt-1 flex-shrink-0">
{{-- Navigation Buttons --}}
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem; flex-shrink: 0;">
<button wire:click="previousSlide"
:disabled="currentSlide === 0"
class="px-4 py-1.5 text-sm text-base/70 hover:text-primary-100 font-medium transition disabled:opacity-50 disabled:cursor-not-allowed">
<div class="flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
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">
<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"/>
</svg>
Back
</div>
</span>
</button>
<button @click="currentSlide === {{ count($slides) - 1 }} ? $wire.finish() : $wire.nextSlide()"
class="px-5 py-1.5 text-sm bg-primary hover:bg-primary/90 text-white font-medium rounded-md transition shadow-sm">
<div class="flex items-center gap-1.5">
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 }}" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg x-show="currentSlide !== {{ count($slides) - 1 }}" 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>
</div>
</span>
</button>
</div>
</div>