cabele/proxMon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui): minimalistic utilitarian redesign across all views

Browse source 
New design language:
  - dark background, system sans for UI, monospace for data
  - single green accent, amber/red for warn/critical
  - square-bordered panels + tables, no rounded cards or shadows
  - status conveyed via left-border on overview cards + badges

Changes:
  - new app.css defines CSS vars + component classes (.panel, .tbl,
    .card, .btn, .input, .badge with [data-status=*])
  - new ServerWeb.DashboardNav function component for a shared top nav
    with active-link highlighting; replaces per-view navigation clutter
  - strip the Phoenix welcome scaffold (logo, version badge, twitter/GH
    links) from layouts/app.html.heex; leaves only flash + content
  - root.html.heex title suffix switched to 'Proxmox Monitor', body
    loses the Tailwind-white background
  - rewrite render/1 in all four LiveViews + login template to use the
    new classes; admin form now uses <.form for={@form}> and properly
    clears on success
  - login page redesigned to a single tight panel matching the rest

All 58 tests still pass; 'mix compile --warnings-as-errors' is clean.
This commit is contained in:
Carsten 2026-04-22 10:18:46 +02:00
parent 1b031ecdc3
commit 50676a7cb8
9 changed files with 649 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

42
server/lib/server_web/controllers/auth_html/login.html.heex
View file

@ -7,36 +7,30 @@
<title>Sign in · Proxmox Monitor</title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
</head>
<body class="bg-white">
<div class="min-h-screen flex items-center justify-center">
<div class="max-w-sm w-full space-y-6 p-6 border border-zinc-200 rounded-lg shadow">
<h1 class="text-xl font-semibold text-zinc-800">Proxmox Monitor</h1>
<%= if @error do %>
<p class="text-sm text-red-600">{@error}</p>
<% end %>
<form method="post" action="/login" class="space-y-4">
<input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
<label class="block">
<span class="text-sm text-zinc-700">Password</span>
<body>
<div class="login">
<div class="panel">
<header><span>proxmox-monitor</span><span class="mono dim">sign in</span></header>
<div class="body">
<%= if @error do %>
<div class="callout err">{@error}</div>
<% end %>
<form method="post" action="/login" class="stack sm">
<input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
<input
name="password"
type="password"
required
autofocus
class="mt-1 block w-full rounded-md border-zinc-300 focus:border-zinc-400 focus:ring-0"
autocomplete="current-password"
placeholder="password"
class="input"
/>
</label>
<button
type="submit"
class="w-full rounded-md bg-zinc-900 text-white py-2 hover:bg-zinc-700"
>
Sign in
</button>
</form>
<button type="submit" class="btn primary" style="justify-content: center;">
sign in
</button>
</form>
</div>
</div>
</div>
</body>