[BS5] make container status more visible

data/web/css/build/013-mailcow.css

@@ -121,6 +121,21 @@
     transform: rotate(359deg);
   }
 }
+@keyframes blink {
+  50% { 
+    color: transparent 
+  }
+}
+.loader-dot { 
+  animation: 1s blink infinite 
+}
+.loader-dot:nth-child(2) { 
+  animation-delay: 250ms 
+}
+.loader-dot:nth-child(3) { 
+  animation-delay: 500ms 
+}
+
 pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
 /* Fix modal moving content left */
 body.modal-open {

data/web/lang/lang.de.json

@@ -492,6 +492,8 @@
     "debug": {
         "chart_this_server": "Chart (dieser Server)",
         "containers_info": "Container-Information",
+        "container_running": "Läuft",
+        "container_stopped": "Angehalten",
         "disk_usage": "Festplattennutzung",
         "docs": "Dokumente",
         "external_logs": "Externe Logs",

data/web/lang/lang.en.json

@@ -492,6 +492,8 @@
     "debug": {
         "chart_this_server": "Chart (this server)",
         "containers_info": "Container information",
+        "container_running": "Running",
+        "container_stopped": "Stopped",
         "disk_usage": "Disk usage",
         "docs": "Docs",
         "external_logs": "External logs",

data/web/templates/debug.twig

@@ -89,9 +89,22 @@
                     <span>{{ container }}</span>
                     <span class="d-block d-md-inline">({{ container_info.Config.Image }})</span>
                     <small class="d-block">({{ lang.debug.started_on }} <span class="parse_date">{{ container_info.State.StartedAtHR }}</span>)</small>
+                    {% if container_info.State.Running == 1 %}
+                      <span class="badge fs-7 bg-success loader" style="min-width:100px">
+                        {{ lang.debug.container_running }}
+                        <span class="loader-dot">.</span>
+                        <span class="loader-dot">.</span>
+                        <span class="loader-dot">.</span>
+                      </span>
+                    {% elseif container_info.State %}
+                      <span class="badge fs-7 bg-danger" style="min-width:100px">
+                        {{ lang.debug.container_stopped }}
+                        <i class="bi-x ms-1"></i>
+                      </span>
+                    {% endif %}
                   </div>
                   <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="ms-auto btn btn-xs btn-secondary d-flex align-items-center">{{ lang.debug.restart_container }}
-                    <i class="ms-auto bi
+                    <i class="ms-1 bi
                     {% if container_info.State.Running == 1 %}
                     bi-record-fill text-success
                     {% elseif container_info.State %}