diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css index 8726114..c194ac4 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css @@ -107,12 +107,16 @@ /* Layout horizontal: imagen + partición */ .deploy-config-row { display: flex; + align-items: flex-start; gap: 16px; margin-bottom: 4px; } .image-config-section { flex: 0 0 340px; + min-width: 0; + max-width: 340px; + overflow: hidden; } .image-config-section .filters-row { @@ -125,11 +129,26 @@ width: 100% !important; } +.partition-column { + display: flex; + flex-direction: column; + flex: 1; + min-width: 0; + gap: 8px; +} + .partition-select-section { flex: 1; min-width: 0; } +.deploy-mode-row { + background: #ffffff; + border: 1px solid #e9ecef; + border-radius: 8px; + padding: 8px 12px; +} + .form-section-title mat-icon { color: #667eea; font-size: 24px; @@ -343,27 +362,60 @@ table { /* Resumen de configuración avanzada */ .method-config-summary { display: flex; - align-items: center; - justify-content: space-between; + flex-direction: column; padding: 8px 12px; background: #f0f4ff; border: 1px solid #d0d9ff; border-radius: 8px; margin-top: 8px; + gap: 4px; + min-width: 0; + overflow: hidden; +} + +.summary-top-row { + display: flex; + align-items: center; + justify-content: space-between; +} + +.summary-header { + display: flex; + align-items: center; + gap: 4px; +} + +.summary-header-icon { + font-size: 16px; + width: 16px; + height: 16px; + color: #667eea; + flex-shrink: 0; +} + +.summary-header-label { + font-size: 12px; + font-weight: 600; + color: #667eea; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .summary-content { display: flex; align-items: center; - gap: 8px; + gap: 6px; min-width: 0; + overflow: hidden; } .summary-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: #667eea; + font-size: 16px; + width: 16px; + height: 16px; + color: #28a745; flex-shrink: 0; } @@ -374,6 +426,39 @@ table { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + min-width: 0; +} + +/* Estado pendiente de configurar método */ +.method-config-pending { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + padding: 10px 12px; + background: #fff8e1; + border: 1px solid #ffe082; + border-radius: 8px; + margin-top: 8px; +} + +.pending-message { + display: flex; + align-items: center; + gap: 6px; +} + +.pending-icon { + font-size: 18px; + width: 18px; + height: 18px; + color: #f9a825; + flex-shrink: 0; +} + +.pending-text { + font-size: 12px; + color: #795548; } /* Mensajes de error */ @@ -764,9 +849,9 @@ table { flex-wrap: wrap; margin-bottom: 20px; padding: 16px 20px; - background: #f7faff; + background: #ffffff; border-radius: 10px; - border: 1px solid #e2e8ff; + border: 1px solid #e9ecef; } .deploy-mode-label { diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html index d86dc8d..79da034 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html @@ -157,9 +157,51 @@ + + @if (imageType === 'monolithic' && selectedMethod && needsAdvancedConfig(selectedMethod)) { + @if (methodConfigured) { +