refactor: simplify onboarding modal structure with improved slide display logic and responsive styling for enhanced user experience
This commit is contained in:
@@ -26,17 +26,15 @@
|
||||
x-init="init()"
|
||||
x-cloak>
|
||||
<div x-show="open"
|
||||
style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;"
|
||||
x-transition.opacity
|
||||
class="fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:py-10"
|
||||
x-cloak>
|
||||
|
||||
<div class="absolute inset-0 transition-opacity duration-300 ease-out pointer-events-auto"
|
||||
:style="open
|
||||
? (showBackdrop ? 'background-color: rgba(0,0,0,0.65); opacity: 1;' : 'background-color: rgba(0,0,0,0.35); opacity: 1;')
|
||||
: 'opacity: 0;'"
|
||||
<div class="absolute inset-0 transition-opacity duration-300"
|
||||
:class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
|
||||
@click="finish()"></div>
|
||||
|
||||
<div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl pointer-events-auto"
|
||||
style="position: relative; width: min(32rem, calc(100% - 2rem)); pointer-events: auto; z-index: 10;"
|
||||
<div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
@@ -44,65 +42,47 @@
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90">
|
||||
|
||||
<template x-for="(slide, index) in slides" :key="slide.id">
|
||||
<div x-show="currentSlide === index"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 translate-y-2"
|
||||
style="display: flex; flex-direction: column;"
|
||||
x-cloak>
|
||||
|
||||
<template x-if="slide.image">
|
||||
<div style="width: 100%; height: 14rem; overflow: hidden; border-radius: 1rem 1rem 0 0;">
|
||||
<img :src="slide.image_url ?? slide.image"
|
||||
:alt="slide.title"
|
||||
<template x-if="activeSlide">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<template x-if="activeSlide.image_url">
|
||||
<div class="w-full" style="height: 14rem; overflow: hidden;">
|
||||
<img :src="activeSlide.image_url"
|
||||
:alt="activeSlide.title"
|
||||
style="width: 100%; height: 100%; object-fit: cover;">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div style="padding: 1.5rem;">
|
||||
<h3 class="text-primary-100"
|
||||
style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;"
|
||||
x-text="slide.title"></h3>
|
||||
<p class="text-base/80"
|
||||
style="font-size: 0.9rem; line-height: 1.6;"
|
||||
x-text="slide.description"></p>
|
||||
<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>
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
|
||||
<template x-for="dotIndex in slides.length" :key="'dot-' + dotIndex">
|
||||
<div style="height: 0.4rem; border-radius: 9999px; transition: all 0.3s;"
|
||||
:style="currentSlide === dotIndex - 1 ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.4rem; background-color: var(--color-neutral, #525252);'"></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>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem 1.5rem 1.5rem;">
|
||||
<div class="flex items-center justify-between px-6 pb-6">
|
||||
<button @click="previous()"
|
||||
:disabled="currentSlide === 0"
|
||||
class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style="padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 500; border: none; background: transparent; cursor: pointer;">
|
||||
<span style="display: flex; align-items: center; gap: 0.4rem;">
|
||||
<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') }}
|
||||
</span>
|
||||
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="bg-primary hover:bg-primary/90"
|
||||
style="padding: 0.45rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: none; color: white; cursor: pointer;">
|
||||
<span style="display: flex; align-items: center; gap: 0.4rem;">
|
||||
<span x-text="primaryActionLabel(index)"></span>
|
||||
<svg x-show="index !== slides.length - 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>
|
||||
</span>
|
||||
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>
|
||||
@@ -129,6 +109,9 @@
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
}
|
||||
},
|
||||
get activeSlide() {
|
||||
return this.slides[this.currentSlide] ?? null;
|
||||
},
|
||||
primaryActionLabel(index) {
|
||||
const isLast = index === this.slides.length - 1;
|
||||
if (isLast) {
|
||||
|
||||
Reference in New Issue
Block a user