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

refactor: update components to shadcn-inspired styling and improve layout consistency

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 11:53:57 -05:00
parent eb015f3421
commit 71ea61a960
7 changed files with 165 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
extensions/Servers/Proxmox/views/components/ui/card.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Card Component - TailServer Theme (shadcn-inspired)
Card Component - shadcn-inspired
Usage:
<x-proxmox::ui.card>Content</x-proxmox::ui.card>
@@ -24,8 +24,8 @@
<div
{{ $attributes->class([
'flex flex-col gap-6 rounded-xl border border-neutral/15 bg-card text-card-foreground shadow-sm',
'hover:shadow-md hover:border-neutral/25 transition-shadow duration-150' => $hover || $clickable,
'rounded-xl border bg-card shadow-sm',
'hover:bg-accent/50 transition-colors duration-150' => $hover || $clickable,
'cursor-pointer' => $clickable,
]) }}
@if($collapsible)
@@ -33,7 +33,7 @@
@endif
>
@if($title || $actions)
<div class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
<div class="flex items-center justify-between gap-4 p-6 pb-0">
<div class="flex items-center gap-3">
@if($icon)
<div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
@@ -42,7 +42,7 @@
@endif
<div class="space-y-1">
@if($title)
<h3 class="leading-none font-semibold">{{ $title }}</h3>
<h3 class="font-semibold leading-none tracking-tight">{{ $title }}</h3>
@endif
@if($subtitle)
<p class="text-sm text-muted-foreground">{{ $subtitle }}</p>
@@ -50,7 +50,7 @@
</div>
</div>
@if($actions || $collapsible)
<div class="col-start-2 row-span-2 row-start-1 self-start justify-self-end flex items-center gap-2">
<div class="flex items-center gap-2">
@if($actions)
{{ $actions }}
@endif
@@ -58,7 +58,7 @@
<button
type="button"
@click="isCollapsed = !isCollapsed"
class="p-1.5 rounded-md hover:bg-neutral/10 transition-colors"
class="p-1.5 rounded-md hover:bg-muted transition-colors duration-150"
>
<x-ri-arrow-down-s-line
class="size-4 text-muted-foreground transition-transform duration-150"
@@ -73,8 +73,8 @@
<div
@class([
'px-6',
'py-6' => $padding && !$title,
'p-6',
'pt-4' => $title,
])
@if($collapsible)
x-show="!isCollapsed"
@@ -90,7 +90,7 @@
</div>
@if($footer)
<div class="flex items-center px-6 [.border-t]:pt-6 {{ $footerClass }}">
<div class="flex items-center p-6 pt-0 {{ $footerClass }}">
{{ $footer }}
</div>
@endif