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

Enhance layout and components with improved accessibility and performance

Browse Source 
- Refactor JavaScript functions to prevent duplicate initializations on navigation
- Add skeleton loaders for invoices and services during loading states
- Introduce a new progress bar component with customizable properties
- Update dropdown and checkbox components for better styling and accessibility
- Improve modal and navigation components with enhanced animations and structure
This commit is contained in:
Joseph.Rawlings
2026-02-01 12:31:43 -05:00
parent 10c978eae9
commit f7766b6d67
14 changed files with 470 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
themes/lucentui/views/components/modal.blade.php
View File

@@ -7,18 +7,36 @@
])
<div x-data="{ open: {{ $open ? 'true' : 'false' }} }">
<template x-teleport="body">
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black/50"
x-show="open">
<!-- Modal inner -->
<div class="px-6 py-4 w-full mx-2 md:mx-auto text-left bg-background-secondary rounded shadow-lg {{ $width }}" x-cloak
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-300"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
{{-- Backdrop with separate fade animation --}}
<div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto"
x-show="open" x-cloak>
{{-- Backdrop overlay --}}
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm"
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"
@click="{{ $closable ? 'open = false' : '' }}"></div>
{{-- Modal content with scale animation --}}
<div class="relative px-6 py-4 w-full mx-2 md:mx-auto text-left bg-background-secondary rounded-xl shadow-2xl border border-neutral/50 {{ $width }}"
x-show="open"
x-transition:enter="transition ease-out duration-300 delay-75"
x-transition:enter-start="opacity-0 scale-95 translate-y-4"
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
x-transition:leave-end="opacity-0 scale-95 translate-y-4"
@click.stop>
<div class="flex justify-between items-center">
<h2 class="text-2xl font-semibold text-primary-100">{{ $title }}</h2>
<h2 class="text-2xl font-semibold text-color-base">{{ $title }}</h2>
@if ($closable && !$closeTrigger)
<button @click="open = false" class="text-primary-100">
<x-ri-close-fill class="size-6" />
<button @click="open = false" class="text-color-muted hover:text-color-base hover:bg-neutral/20 p-2 rounded-lg transition-all duration-200">
<x-ri-close-fill class="size-5" />
</button>
@elseif ($closable && $closeTrigger)
{{ $closeTrigger }}