Match Docker socket status to health-tile styling, fix restart-status spacing (v0.16.5)

This commit is contained in:
marvin
2026-09-18 16:51:55 -04:00
parent 157c680e58
commit cb94e5c63c
6 changed files with 10 additions and 5 deletions
+2 -1
View File
@@ -453,7 +453,7 @@ function renderDockerPanel() {
if (!section) {
section = document.createElement("div");
section.className = "docker-integration-section";
section.innerHTML = '<p class="docker-integration-heading">Docker container selection</p><p class="muted" id="docker-integration-help"></p><label class="check-control"><input id="docker-integration-toggle" type="checkbox"><span>Let Proxy and Streaming hosts pick a running container as their target</span></label>';
section.innerHTML = '<p class="docker-integration-heading">Docker container selection</p><div class="health-tile" id="docker-integration-status"><span class="status-dot"></span><span class="health-tile-copy"><strong>Docker socket</strong><small id="docker-integration-help"></small></span></div><label class="check-control"><input id="docker-integration-toggle" type="checkbox"><span>Let Proxy and Streaming hosts pick a running container as their target</span></label>';
panel.append(section);
section.querySelector("#docker-integration-toggle").addEventListener("change", async event => {
const checkbox = event.currentTarget;
@@ -466,6 +466,7 @@ function renderDockerPanel() {
const toggle = section.querySelector("#docker-integration-toggle");
toggle.checked = enabled;
toggle.disabled = !socketMounted;
section.querySelector("#docker-integration-status .status-dot").className = `status-dot ${socketMounted ? "running" : "idle"}`;
section.querySelector("#docker-integration-help").textContent = socketMounted
? "Site Gateway reads the Docker socket read-only to list running containers, and only offers containers that share a Docker network with it."
: "Docker socket not detected — mount /var/run/docker.sock into this container to enable container selection.";
+2 -2
View File
@@ -8,7 +8,7 @@
<title>Site Gateway</title>
<meta name="description" content="Host sites, proxy services, and manage HTTPS from one simple dashboard.">
<link rel="icon" type="image/png" href="/site-gateway-icon-approved.png">
<link rel="stylesheet" href="/styles.css?v=0.16.4">
<link rel="stylesheet" href="/styles.css?v=0.16.5">
</head>
<!-- ================================================================
@@ -439,6 +439,6 @@
<div id="toast" class="toast" role="status"></div>
<div id="update-banner" class="update-banner hidden" role="status"><span>A new version of Site Gateway is available.</span><div class="update-banner-actions"><button id="update-banner-refresh" class="button primary">Refresh</button><button id="update-banner-dismiss" class="text-button">Dismiss</button></div></div>
<!-- App scripts: core (app.js) then extended views/admin (features.js) -->
<script src="/app.js?v=0.16.4" defer></script><script src="/features.js?v=0.16.4" defer></script><script src="/select-enhance.js?v=0.16.4" defer></script>
<script src="/app.js?v=0.16.5" defer></script><script src="/features.js?v=0.16.5" defer></script><script src="/select-enhance.js?v=0.16.5" defer></script>
</body>
</html>
+2
View File
@@ -775,7 +775,9 @@ label.check-control:has(input[name="upstreamTlsInsecure"]) small{position:absolu
.docker-integration-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.docker-integration-heading{font-weight:600;margin:0 0 var(--space-2)}
.docker-integration-section .health-tile{margin-bottom:var(--space-3)}
.docker-integration-section .check-control{margin-top:var(--space-3)}
#system-restart-status{margin-top:var(--space-3)}
/* Custom-drawn select (Task #20): native <select> popups can't be reliably themed dark across
browsers, so this replaces the popup only -- the native select stays for value/form/event