Redesign: gemeinsames Design-System für Frontend und Backend
Some checks failed
CI / PHP Lint (push) Waiting to run
CI / PHP Lint-1 (push) Waiting to run
CI / Unit Tests & Static Analysis (push) Waiting to run
CI / PHP Lint (pull_request) Has been cancelled
CI / PHP Lint-1 (pull_request) Has been cancelled
CI / Unit Tests & Static Analysis (pull_request) Has been cancelled
Some checks failed
CI / PHP Lint (push) Waiting to run
CI / PHP Lint-1 (push) Waiting to run
CI / Unit Tests & Static Analysis (push) Waiting to run
CI / PHP Lint (pull_request) Has been cancelled
CI / PHP Lint-1 (pull_request) Has been cancelled
CI / Unit Tests & Static Analysis (pull_request) Has been cancelled
Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen jetzt ein einziges Stylesheet (assets/global.css) statt pro Seite dupliziertem Inline-CSS. Design-System - Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und Layout-Maße; Dark Mode ausschließlich über Tokens (keine !important- Overrides mehr) - Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States - Schrift Inter mit System-Fallback Oberfläche - Admin-Shell neu: durchgehende Sidebar mit Marke, gruppierter Navigation und Benutzerbereich; schlanke Topbar mit Breadcrumb - Dashboard: ruhige KPI-Kacheln mit Icon-Chips, Charts an Theme-Farben gekoppelt - Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur und Ticket-Darstellung des erstellten Codes inkl. QR-Code - Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten - Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt bewusst eigenständig ohne externe Abhängigkeiten) - Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt Nebenbei behoben - Falscher SRI-Hash blockierte qrcode.min.js – QR-Codes wurden auf der Voucher-Seite und bei der 2FA-Einrichtung nie gerendert - assets/global.css wurde in mehreren Admin-Seiten über einen falschen Pfad eingebunden ($adminBase = '' statt '../') - TinyMCE lädt ohne API-Key jetzt die GPL-Variante von cdnjs – kein "valid API key required"-Banner mehr im Einstellungs-Editor - Tabellen in Cards scrollen horizontal statt zu überlaufen Screenshots in docs/screenshots neu erstellt, README aktualisiert (neuer Abschnitt "Design-System", Version 2.5.0). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
bad70a631f
commit
498c7e28e0
43 changed files with 2165 additions and 1740 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<?php
|
||||
/**
|
||||
* Admin-UI fuer den Updater. Standalone-Template mit Inline-CSS/JS
|
||||
* (das Projekt hat kein gemeinsames Admin-Layout-/Template-System).
|
||||
* Admin-UI fuer den Updater. Nutzt das gemeinsame Design-System
|
||||
* (assets/global.css); nur Updater-spezifische Regeln stehen inline.
|
||||
*
|
||||
* Verfuegbare Variablen: $manager, $auth, $currentSha, $channel, $csrfToken
|
||||
*
|
||||
|
|
@ -20,75 +20,58 @@ $channels = \Updater\UpdateManager::CHANNELS;
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>System-Update</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="../assets/global.css">
|
||||
<script>(function(){ const t=localStorage.getItem('theme')||'light'; document.documentElement.setAttribute('data-theme',t); })();</script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.wrap { max-width: 760px; margin: 0 auto; }
|
||||
.topbar {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.topbar h1 { color: #fff; font-size: 22px; }
|
||||
.topbar a {
|
||||
background: rgba(255,255,255,.18); color: #fff; text-decoration: none;
|
||||
padding: 9px 16px; border-radius: 8px; font-size: 14px;
|
||||
}
|
||||
.card {
|
||||
background: #fff; border-radius: 16px; padding: 28px;
|
||||
box-shadow: 0 14px 40px rgba(0,0,0,.2); margin-bottom: 22px;
|
||||
}
|
||||
.card h2 { font-size: 16px; color: #333; margin-bottom: 16px; }
|
||||
.row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.row:last-child { border-bottom: none; }
|
||||
.row .k { color: #777; font-size: 14px; }
|
||||
.row .v { color: #222; font-size: 14px; font-weight: 600; font-family: monospace; }
|
||||
.btn {
|
||||
background: #667eea; color: #fff; border: none; border-radius: 9px;
|
||||
padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
|
||||
transition: background .2s;
|
||||
}
|
||||
.btn:hover { background: #5568d3; }
|
||||
.btn:disabled { background: #bbb; cursor: not-allowed; }
|
||||
.btn-green { background: #2e9e5b; }
|
||||
.btn-green:hover { background: #257d49; }
|
||||
select {
|
||||
padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;
|
||||
}
|
||||
.muted { color: #888; font-size: 13px; margin-top: 8px; }
|
||||
.progress-wrap { display: none; margin-top: 16px; }
|
||||
.progress-bar { height: 14px; background: #eee; border-radius: 8px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; width: 0; background: #667eea; transition: width .3s; }
|
||||
.progress-msg { font-size: 13px; color: #555; margin-top: 8px; }
|
||||
.alert { padding: 12px 14px; border-radius: 9px; font-size: 14px; margin-top: 14px; display: none; }
|
||||
.alert.show { display: block; }
|
||||
.alert-error { background: #fee; border: 1px solid #fcc; color: #c33; }
|
||||
.alert-ok { background: #efe; border: 1px solid #cfc; color: #2a7; }
|
||||
/* Updater-spezifisch – der Rest kommt aus dem gemeinsamen Design-System. */
|
||||
.wrap { max-width: 780px; margin: 0 auto; padding: 36px 0 60px; }
|
||||
.update-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
|
||||
.update-head .title { display: flex; align-items: center; gap: 13px; }
|
||||
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-color); }
|
||||
.kv-row:last-of-type { border-bottom: none; }
|
||||
.kv-row .k { color: var(--text-secondary); font-size: 13.5px; }
|
||||
.kv-row .v { color: var(--text-primary); font-size: 13.5px; font-weight: 600; font-family: var(--font-mono); }
|
||||
.kv-row .v select { font-family: var(--font-sans); font-weight: 500; width: auto; min-width: 150px; }
|
||||
.progress-wrap { display: none; margin-top: 18px; }
|
||||
.progress-bar { height: 8px; border-radius: var(--r-pill); background: var(--bg-hover); overflow: hidden; }
|
||||
.progress-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--accent); transition: width .3s; }
|
||||
.progress-msg { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
|
||||
.alert { display: none; margin: 16px 0 0; }
|
||||
.alert.show { display: flex; }
|
||||
.changelog {
|
||||
background: #f8f9fb; border-radius: 9px; padding: 14px; margin-top: 14px;
|
||||
font-size: 13px; color: #444; white-space: pre-wrap; max-height: 260px; overflow: auto;
|
||||
display: none;
|
||||
margin-top: 16px; padding: 14px;
|
||||
max-height: 260px; overflow: auto;
|
||||
background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--r-md);
|
||||
font-size: 13px; color: var(--text-secondary); white-space: pre-wrap;
|
||||
}
|
||||
.mig-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
|
||||
.badge { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
|
||||
.badge-on { background: #e3f6ea; color: #2a7; }
|
||||
.badge-off { background: #fdeaea; color: #c33; }
|
||||
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
|
||||
.tab { padding: 8px 14px; border-radius: 8px; background: #f0f0f0; cursor: pointer; font-size: 14px; }
|
||||
.tab.active { background: #667eea; color: #fff; }
|
||||
.mig-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-color); font-size: 13.5px; }
|
||||
.mig-item:last-child { border-bottom: none; }
|
||||
.mig-item span:first-child { font-family: var(--font-mono); font-size: 12.5px; }
|
||||
.badge-on { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); }
|
||||
.badge-off { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning-border); }
|
||||
.tabs { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 18px; background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: var(--r-md); }
|
||||
.tab { padding: 7px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 550; color: var(--text-secondary); cursor: pointer; }
|
||||
.tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-xs); font-weight: 600; }
|
||||
.pane { display: none; }
|
||||
.pane.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="app-body">
|
||||
<div class="wrap">
|
||||
<div class="topbar">
|
||||
<h1>🔄 System-Update</h1>
|
||||
<a href="/admin/">← Administration</a>
|
||||
<div class="update-head">
|
||||
<div class="title">
|
||||
<span class="focus-icon"><i class="fas fa-rotate"></i></span>
|
||||
<div>
|
||||
<h1 style="font-size:20px;">System-Update</h1>
|
||||
<p class="sub">Aktualisierung aus dem gewählten Release-Channel</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/admin/" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Administration</a>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
|
|
@ -99,8 +82,8 @@ $channels = \Updater\UpdateManager::CHANNELS;
|
|||
<div class="pane active" id="pane-update">
|
||||
<div class="card">
|
||||
<h2>Aktuelle Version</h2>
|
||||
<div class="row"><span class="k">Installierte Version (SHA)</span><span class="v" id="curSha"><?= htmlspecialchars($shortSha) ?></span></div>
|
||||
<div class="row"><span class="k">Update-Channel</span>
|
||||
<div class="kv-row"><span class="k">Installierte Version (SHA)</span><span class="v" id="curSha"><?= htmlspecialchars($shortSha) ?></span></div>
|
||||
<div class="kv-row"><span class="k">Update-Channel</span>
|
||||
<span class="v">
|
||||
<select id="channel">
|
||||
<?php foreach ($channels as $key => $url): ?>
|
||||
|
|
@ -114,8 +97,8 @@ $channels = \Updater\UpdateManager::CHANNELS;
|
|||
|
||||
<div class="card">
|
||||
<h2>Updates</h2>
|
||||
<button class="btn" id="btnCheck">Auf Updates prüfen</button>
|
||||
<button class="btn btn-green" id="btnInstall" style="display:none;">Update installieren</button>
|
||||
<button class="btn btn-primary" id="btnCheck"><i class="fas fa-magnifying-glass"></i> Auf Updates prüfen</button>
|
||||
<button class="btn btn-success" id="btnInstall" style="display:none;margin-left:8px;"><i class="fas fa-download"></i> Update installieren</button>
|
||||
|
||||
<div class="changelog" id="changelog"></div>
|
||||
|
||||
|
|
@ -133,7 +116,7 @@ $channels = \Updater\UpdateManager::CHANNELS;
|
|||
<div class="card">
|
||||
<h2>Migrations-Status</h2>
|
||||
<div id="migList"><p class="muted">Wird geladen …</p></div>
|
||||
<button class="btn" id="btnRunMig" style="margin-top:16px; display:none;">Ausstehende Migrationen ausführen</button>
|
||||
<button class="btn btn-primary" id="btnRunMig" style="margin-top:16px; display:none;">Ausstehende Migrationen ausführen</button>
|
||||
<div class="alert alert-ok" id="migAlert"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -171,7 +154,7 @@ $('channel').addEventListener('change', async (e) => {
|
|||
// Auf Updates pruefen
|
||||
$('btnCheck').addEventListener('click', async () => {
|
||||
clearAlerts();
|
||||
$('btnCheck').disabled = true; $('btnCheck').textContent = 'Prüfe …';
|
||||
$('btnCheck').disabled = true; $('btnCheck').innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Prüfe …';
|
||||
try {
|
||||
const r = await fetch('update.php?action=check');
|
||||
const d = await r.json();
|
||||
|
|
@ -193,7 +176,7 @@ $('btnCheck').addEventListener('click', async () => {
|
|||
} catch (e) {
|
||||
showAlert('error', 'Prüfung fehlgeschlagen: ' + e.message);
|
||||
} finally {
|
||||
$('btnCheck').disabled = false; $('btnCheck').textContent = 'Auf Updates prüfen';
|
||||
$('btnCheck').disabled = false; $('btnCheck').innerHTML = '<i class="fas fa-magnifying-glass"></i> Auf Updates prüfen';
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue