Hitonabi/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactor design system to align with dense mockup

Browse Source
This commit is contained in:
Hitonabi
2026-06-20 22:53:48 +02:00
parent a51f6ee88a
commit c76bcc7293
9 changed files with 940 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/panels/overview.js
+20 -20
View File
@@ -29,29 +29,29 @@ function renderHero() {
function renderQuickActions() {
// 3 Kacheln (Cookbook, Server-Status, Aktivität/Guides)
$("#ov-quick").innerHTML = `
<div class="card" style="cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:border-color 0.2s" onclick="document.querySelector('.nav-item[data-view=\\'cookbook\\']').click()" onmouseover="this.style.borderColor='var(--act)'" onmouseout="this.style.borderColor='var(--line)'">
<div style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0; font-size:16px;">Modell finden</h3>
<span style="color:var(--act)">${icon("book")}</span>
<button class="card-btn" onclick="document.querySelector('.nav-item[data-view=\\'cookbook\\']').click()">
<div class="flex justify-between items-center">
<h3>Modell finden</h3>
<span class="text-act">${icon("book")}</span>
</div>
<p style="margin:0; font-size:13px; color:var(--mut);">Durchsuche HuggingFace nach neuen Modellen im Cookbook.</p>
</div>
<p>Durchsuche HuggingFace nach neuen Modellen im Cookbook.</p>
</button>
<div class="card" style="cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:border-color 0.2s" onclick="document.querySelector('.nav-item[data-view=\\'activity\\']').click()" onmouseover="this.style.borderColor='var(--act)'" onmouseout="this.style.borderColor='var(--line)'">
<div style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0; font-size:16px;">Live Metriken</h3>
<span style="color:var(--act)">${icon("pulse")}</span>
<button class="card-btn" onclick="document.querySelector('.nav-item[data-view=\\'activity\\']').click()">
<div class="flex justify-between items-center">
<h3>Live Metriken</h3>
<span class="text-act">${icon("pulse")}</span>
</div>
<p style="margin:0; font-size:13px; color:var(--mut);">${SYS ? `System läuft (RAM: ${SYS.ram.percent.toFixed(0)}%, CPU: ${SYS.cpu.percent.toFixed(0)}%)` : 'Lade Metriken...'}</p>
</div>
<p>${SYS ? `System läuft (RAM: ${SYS.ram.percent.toFixed(0)}%, CPU: ${SYS.cpu.percent.toFixed(0)}%)` : 'Lade Metriken...'}</p>
</button>
<div class="card" style="cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:border-color 0.2s" onclick="document.querySelector('.nav-item[data-view=\\'server\\']').click()" onmouseover="this.style.borderColor='var(--act)'" onmouseout="this.style.borderColor='var(--line)'">
<div style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0; font-size:16px;">Wartung</h3>
<span style="color:var(--act)">${icon("server")}</span>
<button class="card-btn" onclick="document.querySelector('.nav-item[data-view=\\'server\\']').click()">
<div class="flex justify-between items-center">
<h3>Wartung</h3>
<span class="text-act">${icon("server")}</span>
</div>
<p style="margin:0; font-size:13px; color:var(--mut);">Server neustarten, VRAM leeren oder Engine aktualisieren.</p>
</div>
<p>Server neustarten, VRAM leeren oder Engine aktualisieren.</p>
</button>
`;
}
@@ -107,9 +107,9 @@ function renderRecentJobs() {
${latest.length
? `<div class="list">
${latest.map(j => `
<div class="li" style="padding:10px 4px">
<div class="li">
<div class="li-main">
<div class="li-id" style="font-size:12.5px">${esc(j.label)}</div>
<div class="li-id text-sm">${esc(j.label)}</div>
</div>
<div class="li-right">${statusBadge(j.state)}</div>
</div>