diff --git a/config.html b/config.html index dc3581c..dd04538 100644 --- a/config.html +++ b/config.html @@ -179,7 +179,7 @@ .device { display: grid; - grid-template-columns: 76px 1.35fr 1fr 1fr 1fr 1fr; + grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; border: 1px solid var(--line); @@ -188,17 +188,23 @@ background: var(--panel-2); } - .field-name { grid-column: span 2; } + .field-active { grid-column: span 2; } + .field-name { grid-column: span 3; } .field-id { grid-column: span 2; } - .field-role { grid-column: span 2; } + .field-role { grid-column: span 3; } + .field-model { grid-column: span 2; } .field-location { grid-column: span 2; } - .field-auth { grid-column: span 1; } - .password-credential, .key-credential { grid-column: span 2; } + .field-host { grid-column: span 3; } + .field-port { grid-column: span 1; } + .field-username { grid-column: span 2; } + .field-auth { grid-column: span 2; } + .password-credential, .key-credential { grid-column: span 4; } + .field-delete { grid-column: span 2; } .device[data-auth-method="password"] .key-credential { display: none; } .device[data-auth-method="key"] .password-credential { display: none; } .credential-note { - grid-column: span 2; + grid-column: span 8; color: var(--muted); font-size: 12px; line-height: 1.35; @@ -233,6 +239,10 @@ accent-color: var(--ok); } + .field-active input[type="checkbox"] { + align-self: center; + } + .actions { display: flex; gap: 10px; @@ -374,7 +384,11 @@ } @media (max-width: 1180px) { - .device { grid-template-columns: repeat(3, 1fr); align-items: start; } + .device { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; } + .field-name, .field-role, .field-host, .password-credential, .key-credential { grid-column: span 3; } + .field-id, .field-model, .field-location, .field-username, .field-auth, .field-active, .field-delete { grid-column: span 2; } + .field-port { grid-column: span 1; } + .credential-note { grid-column: span 4; } .top-grid { grid-template-columns: repeat(2, 1fr); } .threshold-row { grid-template-columns: 90px repeat(3, minmax(100px, 1fr)); } } @@ -383,6 +397,9 @@ header { flex-direction: column; align-items: flex-start; padding: 18px; } main { padding: 16px; } .top-grid, .device { grid-template-columns: 1fr; } + .field-active, .field-name, .field-id, .field-role, .field-model, .field-location, + .field-host, .field-port, .field-username, .field-auth, .password-credential, + .key-credential, .credential-note, .field-delete { grid-column: span 1; } .threshold-row { grid-template-columns: 1fr; } } @@ -565,17 +582,31 @@ const authMethod = device.privateKeyPath ? "key" : "password"; return `