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

refactor: adjust modal styling for better visibility and responsiveness in onboarding component

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 22:45:50 -05:00
parent f51a528995
commit b659079d8b
1 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,8 +28,8 @@
@endif
{{-- Modal Dialog --}}
<div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden"
style="position: relative; width: calc(100% - 2rem); max-width: 32rem; height: 500px; pointer-events: auto; z-index: 10;"
<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"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
@@ -48,8 +48,7 @@
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="absolute inset-0 flex flex-col"
style="display: flex; flex-direction: column; height: 100%;">
style="display: flex; flex-direction: column;">
{{-- Slide Image --}}
@if($slide['image'])
@@ -61,7 +60,7 @@
@endif
{{-- Slide Content --}}
<div style="padding: 1.5rem; flex: 1; overflow-y: auto;">
<div style="padding: 1.5rem;">
<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
{{ $slide['title'] }}
</h3>
@@ -71,7 +70,7 @@
</div>
{{-- Slide Indicators --}}
<div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem; flex-shrink: 0;">
<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>
@@ -79,7 +78,7 @@
</div>
{{-- 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;">
<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;"