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

26
server/lib/server_web/components/dashboard_nav.ex Normal file
View file

@ -0,0 +1,26 @@
defmodule ServerWeb.DashboardNav do
@moduledoc "Top navigation bar rendered inside authenticated LiveViews."
use Phoenix.Component
use ServerWeb, :verified_routes
attr :active, :atom, required: true, values: [:overview, :vms, :admin, :other]
def nav(assigns) do
~H"""
<nav class="nav">
<span class="brand">proxmox-monitor</span>
<span class="links">
<.link navigate={~p"/"} class={link_cls(@active, :overview)}>overview</.link>
<.link navigate={~p"/vms"} class={link_cls(@active, :vms)}>vms</.link>
<.link navigate={~p"/admin/hosts"} class={link_cls(@active, :admin)}>admin</.link>
</span>
<span class="spacer"></span>
<.link href={~p"/logout"} method="delete" class="signout">sign out</.link>
</nav>
"""
end
defp link_cls(active, key) when active == key, do: "active"
defp link_cls(_, _), do: nil
end

39
server/lib/server_web/components/layouts/app.html.heex
View file

@ -1,32 +1,7 @@
<header class="px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
<div class="flex items-center gap-4">
<a href="/">
<img src={~p"/images/logo.svg"} width="36" />
</a>
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
v<%= Application.spec(:phoenix, :vsn) %>
</p>
</div>
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
<a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
@elixirphoenix
</a>
<a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
GitHub
</a>
<a
href="https://hexdocs.pm/phoenix/overview.html"
class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
>
Get Started <span aria-hidden="true">&rarr;</span>
</a>
</div>
</div>
</header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl">
<.flash_group flash={@flash} />
<%= @inner_content %>
</div>
</main>
<%= if info = Phoenix.Flash.get(@flash, :info) do %>
<div class="flash info">{info}</div>
<% end %>
<%= if err = Phoenix.Flash.get(@flash, :error) do %>
<div class="flash err">{err}</div>
<% end %>
{@inner_content}

10
server/lib/server_web/components/layouts/root.html.heex
View file

@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={get_csrf_token()} />
<.live_title suffix=" · Phoenix Framework">
<%= assigns[:page_title] || "Server" %>
<.live_title suffix=" · Proxmox Monitor">
{assigns[:page_title] || "Dashboard"}
</.live_title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-white">
<%= @inner_content %>
<body>
{@inner_content}
</body>
</html>