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

refactor: improve onboarding modal layout with enhanced image and content display, ensuring better visibility and user engagement

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 23:34:04 -05:00
parent a73dc96b1c
commit c40c4420e2
1 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,7 +34,8 @@
:class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
@click="finish()"></div>
<div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden"
<div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden min-h-[400px]"
style="display: block !important;"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
@@ -42,46 +43,50 @@
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
<div x-show="activeSlide" class="flex flex-col">
<div x-show="activeSlide?.image_url" class="w-full h-56 overflow-hidden">
<img :src="activeSlide?.image_url"
:alt="activeSlide?.title"
class="w-full h-full object-cover">
</div>
<!-- Image Section -->
<div x-show="activeSlide && activeSlide.image_url"
class="w-full h-56 overflow-hidden"
style="display: block;">
<img x-bind:src="activeSlide ? activeSlide.image_url : ''"
x-bind:alt="activeSlide ? activeSlide.title : ''"
class="w-full h-full object-cover">
</div>
<div class="p-6 space-y-3">
<h3 class="text-primary-100 text-xl font-semibold"
x-text="activeSlide?.title"></h3>
<p class="text-base/80 text-sm leading-6"
x-text="activeSlide?.description"></p>
</div>
<!-- Content Section -->
<div class="p-6 space-y-3" style="display: block !important;">
<h3 class="text-primary-100 text-xl font-semibold"
x-text="activeSlide ? activeSlide.title : 'Loading...'"></h3>
<p class="text-base/80 text-sm leading-6"
x-text="activeSlide ? activeSlide.description : 'Please wait...'"></p>
</div>
<div class="flex justify-center gap-2 px-6 pb-4">
<template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
<div class="h-1.5 rounded-full transition-all duration-300"
:class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
</template>
</div>
<!-- Progress Dots -->
<div class="flex justify-center gap-2 px-6 pb-4" style="display: flex !important;">
<template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
<div class="h-1.5 rounded-full transition-all duration-300"
:class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
</template>
</div>
<div class="flex items-center justify-between px-6 pb-6">
<button @click="previous()"
:disabled="currentSlide === 0"
class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
<svg class="w-4 h-4" 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') }}
</button>
<!-- Navigation Buttons -->
<div class="flex items-center justify-between px-6 pb-6" style="display: flex !important;">
<button @click="previous()"
:disabled="currentSlide === 0"
class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
<svg class="w-4 h-4" 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') }}
</button>
<button @click="next()"
class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
<span x-text="primaryActionLabel(currentSlide)"></span>
<svg x-show="currentSlide !== slides.length - 1"
class="w-4 h-4" 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>
</button>
</div>
<button @click="next()"
class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
<span x-text="primaryActionLabel(currentSlide)"></span>
<svg x-show="currentSlide !== slides.length - 1"
class="w-4 h-4" 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>
</button>
</div>
</div>
</div>