update seznamu sluzeb

app/static/portal.js

@@ -82,3 +82,38 @@ function copyText(button) {
         .catch(() => showCopied(button, false));
     return false;
 }
+
+function openResourceModal(id) {
+    const modal = document.getElementById(id);
+    if (!modal) {
+        return false;
+    }
+
+    if (typeof modal.showModal === "function") {
+        modal.showModal();
+    } else {
+        modal.setAttribute("open", "");
+    }
+    return false;
+}
+
+function closeResourceModal(id) {
+    const modal = document.getElementById(id);
+    if (!modal) {
+        return false;
+    }
+
+    if (typeof modal.close === "function") {
+        modal.close();
+    } else {
+        modal.removeAttribute("open");
+    }
+    return false;
+}
+
+document.addEventListener("click", (event) => {
+    const modal = event.target;
+    if (typeof HTMLDialogElement !== "undefined" && modal instanceof HTMLDialogElement && modal.classList.contains("resource-modal")) {
+        modal.close();
+    }
+});

app/static/styles.css

@@ -397,6 +397,51 @@ button:hover,
     color: var(--muted);
 }
 
+.health-dot {
+    display: inline-block;
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: var(--muted);
+    box-shadow: 0 0 0 4px rgba(98, 121, 135, 0.14);
+    flex: 0 0 auto;
+}
+
+.health-dot-success {
+    background: var(--success);
+    box-shadow: 0 0 0 4px var(--success-bg);
+}
+
+.health-dot-warning {
+    background: var(--warning);
+    box-shadow: 0 0 0 4px var(--warning-bg);
+}
+
+.health-dot-danger {
+    background: var(--danger);
+    box-shadow: 0 0 0 4px var(--danger-bg);
+}
+
+.health-dot-muted {
+    background: var(--muted);
+}
+
+.info-dot {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    margin-left: 4px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--muted);
+    border-radius: 999px;
+    color: var(--muted);
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 1;
+    text-transform: none;
+}
+
 input,
 select {
     padding: 8px;
@@ -447,6 +492,192 @@ input[readonly] {
     margin: 0 0 8px;
 }
 
+.service-row td {
+    vertical-align: middle;
+}
+
+.service-name-cell {
+    min-width: 260px;
+}
+
+.service-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.resource-summary {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 5px;
+    min-width: 170px;
+}
+
+.resource-summary span {
+    color: var(--muted);
+    font-size: 13px;
+}
+
+.resource-summary strong {
+    color: var(--text);
+}
+
+.btn-compact {
+    width: fit-content;
+    min-height: 30px;
+    padding: 6px 10px;
+    font-size: 13px;
+}
+
+.resource-modal {
+    width: min(520px, calc(100vw - 32px));
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+    color: var(--text);
+    box-shadow: 0 18px 48px rgba(10, 31, 42, 0.26);
+}
+
+.resource-modal::backdrop {
+    background: rgba(10, 31, 42, 0.34);
+}
+
+.resource-modal form {
+    display: grid;
+    gap: 10px;
+    margin: 0;
+}
+
+.resource-modal h3 {
+    margin: 0;
+    color: var(--secondary);
+}
+
+.resource-modal label {
+    font-weight: 800;
+    color: var(--secondary);
+}
+
+.resource-modal input {
+    width: 100%;
+}
+
+.modal-header,
+.modal-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.modal-actions {
+    justify-content: flex-end;
+    margin-top: 8px;
+}
+
+.icon-button {
+    width: 34px;
+    min-height: 34px;
+    padding: 0;
+    border: 1px solid var(--border);
+    background: white;
+    color: var(--secondary);
+    font-size: 22px;
+    line-height: 1;
+}
+
+.icon-button:hover {
+    background: #eef6f9;
+    color: var(--secondary-dark);
+}
+
+.clone-details {
+    min-width: 170px;
+}
+
+.clone-details summary {
+    color: var(--text);
+}
+
+.service-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: auto;
+    min-width: 250px;
+}
+
+.service-actions .btn {
+    margin: 0;
+}
+
+.action-menu {
+    position: relative;
+}
+
+.action-menu summary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    min-height: 34px;
+    border-radius: 8px;
+    color: var(--secondary);
+    font-weight: 900;
+    list-style: none;
+    cursor: pointer;
+}
+
+.action-menu summary::-webkit-details-marker {
+    display: none;
+}
+
+.action-menu summary:hover,
+.action-menu[open] summary {
+    background: #eef6f9;
+    text-decoration: none;
+}
+
+.action-menu-panel {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    z-index: 12;
+    width: 210px;
+    padding: 6px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: white;
+    box-shadow: 0 16px 34px rgba(10, 31, 42, 0.18);
+}
+
+.action-menu-panel form {
+    margin: 0;
+}
+
+.menu-action {
+    width: 100%;
+    padding: 10px 12px;
+    background: white;
+    color: var(--text);
+    text-align: left;
+    font-weight: 700;
+}
+
+.menu-action:hover {
+    background: #eef6f9;
+    color: var(--secondary-dark);
+}
+
+.menu-action-danger {
+    color: var(--danger);
+}
+
+.menu-action-danger:hover {
+    background: var(--danger-bg);
+    color: var(--danger-dark);
+}
+
 .running-row td {
     background: var(--warning-bg);
 }
@@ -640,6 +871,33 @@ pre {
         width: 100%;
     }
 
+    .service-title {
+        align-items: flex-start;
+    }
+
+    .service-actions {
+        align-items: stretch;
+        flex-direction: column;
+        min-width: 180px;
+    }
+
+    .service-actions .btn,
+    .service-actions .action-menu,
+    .action-menu summary {
+        width: 100%;
+    }
+
+    .action-menu-panel {
+        position: static;
+        width: 100%;
+        margin-top: 6px;
+    }
+
+    .modal-actions {
+        align-items: stretch;
+        flex-direction: column-reverse;
+    }
+
     .pagination {
         align-items: flex-start;
         flex-direction: column;