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

Refactor modal close behavior and improve styling

Browse Source 
- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals.
- Updated various modal button styles for consistency and improved accessibility.
- Adjusted transition durations for modal animations to enhance user experience.
- Added aria-labels to close buttons for better screen reader support.
This commit is contained in:
Joseph.Rawlings
2026-02-23 20:02:41 -05:00
parent f394483daa
commit af62a16354
45 changed files with 393 additions and 4700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
View File

@@ -26,11 +26,11 @@
>
{{-- Tab Navigation --}}
@if($variant === 'pills')
<div class="flex flex-wrap gap-1 p-1 bg-background-secondary dark:bg-gray-800 rounded-lg border border-neutral dark:border-gray-700">
<div class="flex flex-wrap gap-1 p-1 bg-background-secondary rounded-lg border border-neutral">
@elseif($variant === 'buttons')
<div class="flex gap-2">
@else
<ul class="flex flex-wrap list-none border-b border-neutral dark:border-gray-700">
<ul class="flex flex-wrap list-none border-b border-neutral">
@endif
@foreach($tabs as $tab)
@php
@@ -44,8 +44,8 @@
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}'
? 'text-primary bg-background dark:bg-gray-700 shadow-sm'
: 'text-secondary dark:text-gray-400 hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'"
? 'text-primary bg-background dark:bg-background-secondary shadow-sm'
: 'text-secondary dark:text-base/50 hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'"
class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer"
>
@if($tabIcon)
@@ -62,7 +62,7 @@
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}'
? 'text-white bg-primary border-primary'
: 'text-secondary dark:text-gray-400 bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-gray-400'"
: 'text-secondary dark:text-base/50 bg-background dark:bg-background-secondary border-neutral dark:border-neutral hover:bg-background-secondary dark:hover:bg-background hover:border-primary/30'"
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border rounded-lg shadow-sm transition-all duration-200 cursor-pointer"
>
@if($tabIcon)
@@ -79,8 +79,8 @@
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}'
? 'text-primary bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 border-b-background dark:border-b-gray-800'
: 'text-secondary dark:text-gray-400 border-transparent hover:text-primary hover:border-gray-200 dark:hover:border-gray-600 hover:bg-black/5 dark:hover:bg-white/5'"
? 'text-primary bg-background dark:bg-background-secondary border-neutral dark:border-neutral border-b-background dark:border-b-background-secondary'
: 'text-secondary dark:text-base/50 border-transparent hover:text-primary hover:border-neutral dark:hover:border-neutral hover:bg-black/5 dark:hover:bg-white/5'"
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border border-b-0 rounded-t-lg transition-all duration-150 cursor-pointer"
>
@if($tabIcon)