bvandeusen/FabledSteward
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI redesign (CSS system, DNS widget, Traefik dashboard widget)

Browse Source 
- Replace base.html style block with full CSS design system using custom properties (dark theme, cards, tables, badges, dots, widgets)
- Add DNS blueprint (fablednetmon/dns/) with /dns/ and /dns/rows routes + templates
- Add Traefik /widget route and widget.html fragment for dashboard
- Update dashboard: DNS + Traefik widgets, traefik_enabled config detection
- Update all templates to use new CSS classes (page-title, section-title, card-flush, table, badge-*, dot-*, btn-*)
- Register dns_bp in app.py

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-18 23:37:46 -04:00
parent d29c5b3eab
commit 165a202ba4
22 changed files with 495 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fablednetmon/templates/settings/index.html
+8 -10
View File
@@ -2,13 +2,13 @@
{% extends "base.html" %}
{% block title %}Settings — FabledNetMon{% endblock %}
{% block content %}
<h1 style="color:#c0c0ff;margin-bottom:1.5rem;">Settings</h1>
<h1 class="page-title">Settings</h1>
<form method="post" action="/settings/">
<div style="display:grid;gap:1.5rem;">
{# ── General ──────────────────────────────────────────────────────────── #}
<div class="card">
<h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">General</h2>
<h2 class="section-title" style="margin-bottom:1rem;">General</h2>
<div class="form-group">
<label>Session lifetime (hours)</label>
<input type="number" name="session.lifetime_hours" min="1" max="720"
@@ -28,7 +28,7 @@
{# ── SMTP ─────────────────────────────────────────────────────────────── #}
<div class="card">
<h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Email (SMTP)</h2>
<h2 class="section-title" style="margin-bottom:1rem;">Email (SMTP)</h2>
<div class="form-group">
<label>SMTP host</label>
<input type="text" name="smtp.host" value="{{ settings['smtp.host'] }}" placeholder="mail.example.com">
@@ -62,7 +62,7 @@
{# ── Webhook ──────────────────────────────────────────────────────────── #}
<div class="card">
<h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Webhook</h2>
<h2 class="section-title" style="margin-bottom:1rem;">Webhook</h2>
<div class="form-group">
<label>Webhook URL <span style="color:#606080;font-size:0.8rem;">(leave blank to disable)</span></label>
<input type="text" name="webhook.url" value="{{ settings['webhook.url'] }}"
@@ -70,23 +70,21 @@
</div>
<div class="form-group">
<label>Payload template <span style="color:#606080;font-size:0.8rem;">(Jinja2, must produce valid JSON)</span></label>
<textarea name="webhook.template" rows="3"
style="width:100%;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;padding:0.5rem;font-family:monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
<textarea name="webhook.template" rows="3" style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
</div>
</div>
{# ── Ansible Sources ──────────────────────────────────────────────────── #}
<div class="card">
<h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Ansible Sources</h2>
<h2 class="section-title" style="margin-bottom:1rem;">Ansible Sources</h2>
<p style="color:#606080;font-size:0.85rem;margin-bottom:0.75rem;">JSON array of source objects. Each requires <code>name</code>, <code>type</code> (git or local), and either <code>url</code> or <code>path</code>.</p>
<textarea name="ansible.sources" rows="8"
style="width:100%;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;padding:0.5rem;font-family:monospace;font-size:0.85rem;">{{ settings['ansible.sources'] | tojson(indent=2) }}</textarea>
<textarea name="ansible.sources" rows="8" style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['ansible.sources'] | tojson(indent=2) }}</textarea>
</div>
{# ── Plugins ──────────────────────────────────────────────────────────── #}
{% if discovered_plugins %}
<div class="card">
<h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Plugins</h2>
<h2 class="section-title" style="margin-bottom:1rem;">Plugins</h2>
{% for plugin in discovered_plugins %}
<div style="border:1px solid #2a2a4a;border-radius:4px;padding:1rem;margin-bottom:0.75rem;">
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;">