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

refactor: update overview view styles for consistency and improved visual hierarchy

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-18 05:39:23 -05:00
parent a2546d0f1a
commit c5530e9231
1 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
extensions/Servers/Proxmox/views/overview.blade.php
View File

@@ -41,7 +41,7 @@
}
</script>
<div class="space-y-4 lg:space-y-6 px-0 md:px-0">
<div class="space-y-6">
<div class="bg-gradient-to-r from-info/8 to-info/4 border border-info/25 rounded-xl p-4 lg:p-5 shadow-sm hover:shadow-md transition-shadow duration-200"
x-data="{
isCollapsed: localStorage.getItem('overview-notice-collapsed') === 'true',
@@ -91,8 +91,7 @@
<x-proxmox::ui.section-header
title="Server Overview"
subtitle="Real-time resource monitoring and server configuration details."
icon="ri-server-line"
class="mb-6">
icon="ri-server-line">
<x-slot name="actions">
<x-proxmox::ui.help-modal icon="ri-question-line" title="Server Overview">
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
@@ -304,10 +303,9 @@
x-data="{ loaded: false }"
x-init="setTimeout(() => loaded = true, 100)">
@foreach($resourceAllocations as $index => $resource)
<div class="group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm p-4 lg:p-5
<div class="group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-4 lg:p-5
transition-all duration-300 ease-out
hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-700
hover:-translate-y-0.5 hover:scale-[1.01]"
hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700"
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
:style="loaded ? 'transition-delay: {{ $index * 75 }}ms' : ''">
<div class="flex items-start justify-between mb-4">
@@ -347,9 +345,9 @@
x-data="{ cardsLoaded: false }"
x-init="setTimeout(() => cardsLoaded = true, 250)">
<!-- Server Information Card -->
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm overflow-hidden
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm overflow-hidden
transition-all duration-300 ease-out
hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-700"
hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700"
:class="cardsLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'">
<div class="flex items-center justify-between p-4 lg:p-5 bg-gradient-to-r from-primary/8 to-primary/4 border-b border-primary/20 transition-all duration-200 hover:from-primary/12 hover:to-primary/6">
<div class="flex items-center gap-2.5">
@@ -664,7 +662,7 @@
</div>
</div>
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 overflow-hidden">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 overflow-hidden">
<div style="background-image: url('https://billing.virtnet.bond/assets/images/dns.jpeg'); background-size: cover; background-position: center; height: 3rem;" class="border-b border-gray-200 dark:border-gray-800"></div>
<div class="p-4 lg:p-5 space-y-4">
<div class="flex items-center gap-2.5">
@@ -802,7 +800,7 @@
</div>
@if(stripos($server->os->name, 'Windows') !== false)
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 overflow-hidden">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 overflow-hidden">
<div style="background-image: url('https://billing.virtnet.bond/assets/images/windows.jpg'); background-size: cover; background-position: center; height: 3rem;" class="border-b border-gray-200 dark:border-gray-800"></div>
<div class="p-4 lg:p-5 space-y-4">
<div class="flex items-center gap-2.5">
@@ -893,7 +891,7 @@
<!-- Notes Section -->
<div class="mt-4">
<div id="notes-section" class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 p-4 lg:p-5 flex flex-col" x-data="{ showExportErrorModal: false }" x-cloak>
<div id="notes-section" class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 p-4 lg:p-5 flex flex-col" x-data="{ showExportErrorModal: false }" x-cloak>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2.5">
<svg class="size-5 text-primary opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round" stroke-linejoin="round"/><polyline points="14 2 14 8 20 8" stroke-linecap="round" stroke-linejoin="round"/><line x1="12" y1="11" x2="12" y2="17" stroke-linecap="round" stroke-linejoin="round"/><line x1="9" y1="14" x2="15" y2="14" stroke-linecap="round" stroke-linejoin="round"/></svg>