status detail alignment in integration list
@@ -8,6 +8,7 @@ import { ConfigService } from '@syndesis/ui/config.service';
template: `
<div class="integration-status-detail">
<ng-container *ngIf="statusDetail">
+ <div class="statusDetail">
<div>
<i [innerHtml]="statusDetailText"></i>&nbsp;
<span class="pull-right" *ngIf="logUrl" [innerHtml]="'log-link' | synI18n: logUrl"></span>
@@ -19,9 +20,11 @@ import { ConfigService } from '@syndesis/ui/config.service';
<span class="sr-only">{{ 'bar-width' | synI18n: barWidth.width }}</span>
</div>
</div>
+ </div>
</ng-container>
<!-- this is a fallback -->
<ng-container *ngIf="!statusDetail">
+ <div class="statusState">
<div class="spinner spinner-sm spinner-inline"></div>
<ng-container [ngSwitch]="integration.targetState">
<ng-container *ngSwitchCase="'Published'">
@@ -34,6 +37,7 @@ import { ConfigService } from '@syndesis/ui/config.service';
{{ 'integrations.pending' | synI18n }}
</ng-container>
</ng-container>
+ </div>
</ng-container>
</div>
`,
@@ -42,9 +46,18 @@ import { ConfigService } from '@syndesis/ui/config.service';
.integration-status-detail {
width: 180px;
}
- .integration-status-detail .progress.progress-xs: {
- padding: 0;
- margin-bottom: 0;
+ .integration-status-detail .statusDetail {
+ position: relative;
+ transform: translateY(-4px);
+ }
+ .integration-status-detail .progress.progress-xs {
+ position: absolute;
+ top: 100%;
+ width: 100%;
+ }
+ .integration-status-detail .statusState {
+ display: inline-flex;
+ align-items: center;
}
`
]
