Improved server header and variables page

This commit is contained in:
2025-07-18 23:17:56 +02:00
parent 265a4b280b
commit a2db7be26f
2 changed files with 31 additions and 21 deletions

View File

@@ -12,11 +12,14 @@
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
@foreach (var variable in Variables) @foreach (var variable in Variables)
{ {
<div class="sm:col-span-2 card card-body"> <div class="sm:col-span-2 card card-sm">
<label class="block text-sm font-medium leading-6 text-base-content"> <div class="card-header pb-1">
<h5 class="text-base font-semibold">
@variable.Name @variable.Name
</label> </h5>
<p class="mt-1 mb-2.5 text-sm leading-6 text-base-content/60"> </div>
<div class="card-body">
<p class="mb-2.5 text-sm leading-6 text-base-content/60">
@variable.Description @variable.Description
</p> </p>
<div class="mt-auto"> <div class="mt-auto">
@@ -26,6 +29,7 @@
class="input w-full"> class="input w-full">
</div> </div>
</div> </div>
</div>
} }
</div> </div>
</LazyLoader> </LazyLoader>

View File

@@ -29,18 +29,24 @@
<div class="card card-body justify-between py-2.5 px-5 flex-row"> <div class="card card-body justify-between py-2.5 px-5 flex-row">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
@{ @{
var bgColor = State switch var statusClass = State switch
{ {
ServerState.Installing => "bg-primary", ServerState.Installing => "status-primary",
ServerState.Offline => "bg-error", ServerState.Offline => "status-error",
ServerState.Starting => "bg-warning", ServerState.Starting => "status-warning",
ServerState.Stopping => "bg-warning", ServerState.Stopping => "status-warning",
ServerState.Online => "bg-success", ServerState.Online => "status-success",
_ => "bg-gray-500" _ => "status-secondary"
}; };
} }
<div class="p-2.5 rounded-full @bgColor me-3"></div> <div class="inline-grid *:[grid-area:1/1] me-3">
@if (State != ServerState.Offline)
{
<div class="status status-xl @statusClass animate-ping"></div>
}
<div class="status status-xl @statusClass"></div>
</div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="hidden sm:flex text-lg font-semibold">@Server.Name</div> <div class="hidden sm:flex text-lg font-semibold">@Server.Name</div>