Merge pull request #126 from onepanelio/fix/onepanelio.core.336-columns.lineup

fix: issue where workflow template headers and content were not aligned

Author: rushtehrani

src/app/workflow-template/workflow-template.component.html

@@ -18,7 +18,7 @@
     <cdk-table [dataSource]="workflowTemplates">
       <ng-container cdkColumnDef="name">
         <cdk-header-cell *cdkHeaderCellDef>Name</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let workflowTemplate" class="flex-grow-1">
+        <cdk-cell *cdkCellDef="let workflowTemplate">
           <a class="name-link d-block" [routerLink]="['/', this.namespace, 'workflow-templates', workflowTemplate.uid]">{{workflowTemplate.name}}</a>
           <div class="d-inline-flex justify-content-between color-medium-gray font-roboto font-size-small mt-2">
             <div class="mr-5">{{workflowTemplate.versions}} versions</div>
@@ -31,15 +31,15 @@
 
       <ng-container cdkColumnDef="lastExecuted">
         <cdk-header-cell *cdkHeaderCellDef>Last executed</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let workflowTemplate" class="flex-grow-1">
+        <cdk-cell *cdkCellDef="let workflowTemplate">
           <div *ngIf="workflowTemplate.stats">{{ workflowTemplate.stats.lastExecuted | amTimeAgo }}</div>
           <div *ngIf="!workflowTemplate.stats">Not run</div>
         </cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="status">
         <cdk-header-cell *cdkHeaderCellDef>Status</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let workflowTemplate" class="flex-grow-1">
+        <cdk-cell *cdkCellDef="let workflowTemplate">
           <div>
             <app-workflow-template-status *ngIf="workflowTemplate.stats" [template]="workflowTemplate.stats"></app-workflow-template-status>
           </div>
@@ -48,23 +48,29 @@
 
       <ng-container cdkColumnDef="createdAt">
         <cdk-header-cell *cdkHeaderCellDef>Created</cdk-header-cell>
-        <cdk-cell *cdkCellDef="let workflowTemplate" class="flex-grow-1">
+        <cdk-cell *cdkCellDef="let workflowTemplate">
           <app-date [dateTime]="workflowTemplate.createdAt"></app-date>
         </cdk-cell>
       </ng-container>
 
       <ng-container cdkColumnDef="actions">
         <cdk-header-cell *cdkHeaderCellDef></cdk-header-cell>
-        <cdk-cell *cdkCellDef="let workflowTemplate" class="flex-grow-1">
+        <cdk-cell *cdkCellDef="let workflowTemplate">
           <div class="d-inline-flex flex-row-reverse w-100">
             <a class="link-button" [routerLink]="['/', this.namespace, 'workflow-templates', workflowTemplate.uid]">Open</a>
           </div>
         </cdk-cell>
       </ng-container>
 
+      <ng-container cdkColumnDef="spacer">
+        <cdk-header-cell *cdkHeaderCellDef></cdk-header-cell>
+        <cdk-cell *cdkCellDef="let workflowTemplate" class="flex-grow-1">
+        </cdk-cell>
+      </ng-container>
+
       <ng-container cdkColumnDef="labels">
         <cdk-header-cell *cdkHeaderCellDef></cdk-header-cell>
-        <cdk-cell *cdkCellDef="let workflowTemplate" class="flex-grow-1 w-100">
+        <cdk-cell *cdkCellDef="let workflowTemplate" class="w-100">
           <app-labels-list-view [labels]="workflowTemplate.labels" class="d-block"></app-labels-list-view>
         </cdk-cell>
       </ng-container>

src/app/workflow-template/workflow-template.component.scss

@@ -1,9 +1,7 @@
 .workflow-list {
 }
 
-.cdk-header-cell {
-  flex-grow: 1;
-}
+
 
 .cdk-column-name {
   flex-basis: 300px;
@@ -15,6 +13,7 @@
 
 .cdk-column-status {
   min-width: 400px;
+  margin-right: 40px;
 
   app-workflow-template-status {
     display: block;
@@ -52,7 +51,7 @@
 }
 
 .cdk-column-lastExecuted {
-  flex-basis: 150px;
+  flex-basis: 200px;
 }
 
 .cdk-column-labels {

src/app/workflow-template/workflow-template.component.ts

@@ -14,7 +14,7 @@ type WorkflowTemplateState = 'initialization' | 'loading' | 'new';
 export class WorkflowTemplateComponent implements OnInit {
   namespace: string;
 
-  displayedColumns = ['name', 'lastExecuted','status', 'createdAt', 'actions', 'labels'];
+  displayedColumns = ['name', 'lastExecuted', 'status', 'createdAt', 'spacer', 'actions', 'labels'];
 
   workflowTemplateResponse: ListWorkflowTemplatesResponse;
   workflowTemplates: WorkflowTemplate[] = [];