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

Refactor Proxmox views for improved styling and consistency

Browse Source 
- Updated subdomain.blade.php to enhance button styles and modal transitions.
- Changed text colors for better readability and consistency across the UI.
- Refactored system.blade.php to unify button components and improve layout structure.
- Adjusted modal z-index values for consistent layering.
- Enhanced accessibility by ensuring proper text contrast and hover states.
This commit is contained in:
Joseph.Rawlings
2025-12-18 09:40:58 -05:00
parent 5c5184aec8
commit 0ed29d782e
22 changed files with 6734 additions and 3813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
extensions/Servers/Proxmox/views/reinstall.blade.php
View File

@@ -82,7 +82,6 @@
<div x-data="{
open: false,
pageLoaded: false,
activeSection: null,
pendingSection: null,
transitionDelay: 220,
@@ -107,37 +106,23 @@
this.activeSection = key;
}
}"
x-init="setTimeout(() => pageLoaded = true, 100)">
}">
@if($isProtected)
<x-proxmox::ui.button
<x-button.danger
@click="open = true"
variant="danger"
disabled
title="Reinstall is disabled: This server is protected in Proxmox">
Reinstall
</x-proxmox::ui.button>
</x-button.danger>
@else
<x-proxmox::ui.button @click="open = true" variant="danger">
<x-button.danger @click="open = true">
Reinstall
</x-proxmox::ui.button>
</x-button.danger>
@endif
<template x-if="open">
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto"
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">
<div class="bg-white rounded-2xl p-6 w-full max-w-4xl shadow-2xl border border-neutral/30 my-8"
x-transition:enter="transition ease-out duration-300"
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"
x-transition:leave-end="opacity-0 scale-95">
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto">
<div class="bg-white rounded-2xl p-6 w-full max-w-4xl shadow-2xl border border-neutral/30 my-8">
<div class="flex flex-col gap-2 mb-6">
<h2 class="text-2xl font-semibold text-base">Reinstall Server</h2>
@if($isProtected)
@@ -199,8 +184,7 @@
$isSelected = (string) $template->id === (string) ($os ?? '');
@endphp
<label wire:key="os-card-{{ $template->id }}"
class="relative flex items-center gap-4 rounded-xl border p-4 cursor-pointer
transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
class="relative flex items-center gap-4 rounded-xl border p-4 cursor-pointer transition-all duration-150
@if($isSelected) border-primary bg-primary/5 ring-2 ring-primary/40 shadow-lg @else border-neutral/60 hover:border-primary/60 @endif">
<input type="radio" class="sr-only" wire:model.live="os" value="{{ $template->id }}">
<div class="shrink-0">
@@ -247,30 +231,32 @@
</div>
<div class="flex flex-row gap-4 mt-6">
<x-proxmox::ui.button @click="open = false" variant="secondary">
Cancel
</x-proxmox::ui.button>
<x-button.secondary @click="open = false">Cancel</x-button.secondary>
@if($isProtected)
<x-proxmox::ui.button
<x-button.danger
wire:click="reinstall"
wire:loading.attr="disabled"
variant="danger"
wire:loading.class="opacity-50"
wire:loading.attr="aria-busy"
wire:target="reinstall"
disabled
title="Reinstall is disabled: This server is protected in Proxmox">
<span wire:loading.remove wire:target="reinstall">Reinstall</span>
<span wire:loading wire:target="reinstall">Reinstalling...</span>
</x-proxmox::ui.button>
title="Reinstall is disabled: This server is protected in Proxmox"
>
<x-loading target="reinstall" />
<div wire:loading.remove wire:target="reinstall">Reinstall</div>
</x-button.danger>
@else
<x-proxmox::ui.button
<x-button.danger
wire:click="reinstall"
wire:loading.attr="disabled"
variant="danger"
:disabled="!$os || !$confirmReinstall"
:title="!$os ? 'Please select an operating system' : (!$confirmReinstall ? 'Please confirm the reinstallation' : 'Reinstall server')">
<span wire:loading.remove wire:target="reinstall">Reinstall</span>
<span wire:loading wire:target="reinstall">Reinstalling...</span>
</x-proxmox::ui.button>
wire:loading.class="opacity-50"
wire:loading.attr="aria-busy"
wire:target="reinstall"
>
<x-loading target="reinstall" />
<div wire:loading.remove wire:target="reinstall">Reinstall</div>
</x-button.danger>
@endif
</div>
</div>