fix(list-view): fix alignment of work item cells

fabric8-ui · May 18, 2018 · 32fba7a · 32fba7a
1 parent 1dea93a
commit 32fba7a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 29 deletions.
diff --git a/src/app/components_ngrx/planner-list/planner-list.component.html b/src/app/components_ngrx/planner-list/planner-list.component.html
@@ -216,7 +216,7 @@ <h4>Please wait, we are loading your data.</h4>
             </ng-template>
 
             <ng-template ngx-datatable-cell-tree-loader *ngIf="c.name==='Title'">
-              <div class="spinner spinner-xs icon-loader margin-top-15"></div>
+              <div class="spinner spinner-xs icon-loader margin-top-5"></div>
             </ng-template>
               <ng-template let-row="row"
                 ngx-datatable-cell-template>
@@ -241,9 +241,10 @@ <h4>Please wait, we are loading your data.</h4>
           [sortable]="false"
           [cellClass]="'cell-class'"
           [frozenLeft]="false">
-            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
+            <ng-template let-row="row" let-expanded="expanded"
+              ngx-datatable-cell-template>
               <span class="table-dnd-container">
-                 <span class="table-dnd-header"></span>
+                <span class="table-dnd-header"></span>
               </span>
               <a class="quick-add-icon pficon-add-circle-o disabled"
                 placement="right"

diff --git a/src/app/components_ngrx/planner-list/planner-list.component.less b/src/app/components_ngrx/planner-list/planner-list.component.less
@@ -202,31 +202,38 @@ button.btn.btn-link.dropdown-toggle:focus {
 
 a.disabled {
   &:hover, &:focus, &:active {
-    color: #8b8d8f;
+    color: @color-pf-black-200;
   }
 }
 /// ng x-datatables css
 
 
 .cell-class {
-  overflow: visible !important;
+  display: table !important;
   padding-top: 3px !important;
-  padding-bottom: 4px !important;
-  line-height: 44px !important;
+  padding-bottom: 3px !important;
+}
+.datatable-body-cell-label {
+  display: table-cell;
+  vertical-align: middle;
+  height: 100%;
+  align-items: center;
+  label {
+    margin: 0;
+  }
 }
-
 .header-cell{
-  font-weight: bold !important;
-  overflow: visible !important;
-  color: #363636 !important;
+  font-weight: bold;
+  overflow: visible;
+  color: @color-pf-black-800;
 }
 
 .datatable-row-detail {
   overflow-y: visible;
 }
 
 .datatable-header {
-  overflow: visible !important;
+  overflow: visible;
 }
 
 .fullscreen {

diff --git a/src/app/components_ngrx/work-item-cell/work-item-cell.component.html b/src/app/components_ngrx/work-item-cell/work-item-cell.component.html
@@ -19,10 +19,10 @@
 <div class="width-100"
   *ngIf="col === 'title'">
   <div class="wi-detail-title">
-    <p class="truncate pointer"
-        [class.bold]="row.bold"
-        [innerHTML]="row.title"
-        (click)="onPreview($event, row['id'])"></p>
+    <p class="truncate pointer margin-0"
+      [class.bold]="row.bold"
+      [innerHTML]="row.title"
+      (click)="onPreview($event, row['id'])"></p>
   </div>
   <div class="dib text-right wi-detail-icon">
     <a class="fa fa-list-alt padding-v-5 pointer"
@@ -45,31 +45,32 @@
 
 <div *ngIf="col === 'label'">
   <f8-label
-      [labels]="row?.labels ? row?.labels : []"
-      [truncateAfter]='4'
-      [allowDelete]="false"
-      (onLabelClick)="labelClick($event)"></f8-label>
+    [labels]="row?.labels ? row?.labels : []"
+    [truncateAfter]='4'
+    [allowDelete]="false"
+    (onLabelClick)="labelClick($event)"></f8-label>
 </div>
 
 <!-- Iteration -->
-  <span id="table-iteration" *ngIf="col === 'iteration'">
-    {{row.iteration?.parentPath === '/' ? 'NA' : row.iteration?.name}}
-  </span>
+<span id="table-iteration" *ngIf="col === 'iteration'">
+  {{row.iteration?.parentPath === '/' ? 'NA' : row.iteration?.name}}
+</span>
 
 <!-- Creator -->
 
 <div *ngIf="col === 'creator'" class="user-avatar">
   <img placement="left"
-        tooltip="{{row.creator?.name}}"
-        src="{{row.creator?.avatar + '&s=23'}}"
-        onError="this.src='https://avatars0.githubusercontent.com/u/563119?v=3&s=23'" />
+    tooltip="{{row.creator?.name}}"
+    src="{{row.creator?.avatar + '&s=23'}}"
+    onError="this.src='https://avatars0.githubusercontent.com/u/563119?v=3&s=23'" />
 </div>
 
 <!-- Assignee -->
-<div *ngIf="col === 'assignees'" >
+<div class="assignees-cell"
+  *ngIf="col === 'assignees'">
   <f8-assignee
     [showFullName]="false"
     [truncateAfter]="3"
-    [assignees]="row.assignees ? row.assignees : []"
-  ></f8-assignee>
+    [assignees]="row.assignees ? row.assignees : []">
+  </f8-assignee>
 </div>
diff --git a/src/app/components_ngrx/work-item-cell/work-item-cell.component.less b/src/app/components_ngrx/work-item-cell/work-item-cell.component.less
@@ -15,4 +15,10 @@
 }
 .bold {
   font-weight: bold;
+}
+.assignees-cell {
+  .f8-assignees {
+    margin: 0 !important;
+    display: initial;
+  }
 }