fix: make arrow to center && fixed #88

phodal · Apr 14, 2020 · 3db59ec · 3db59ec
1 parent c7cd501
commit 3db59ec
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/projects/ledge-render/src/lib/components/ledge-table-step/ledge-table-step.component.html b/projects/ledge-render/src/lib/components/ledge-table-step/ledge-table-step.component.html
@@ -13,9 +13,9 @@
         <div
           class="arrow"
           *ngIf="isShowIconBeforeCard(data, hIndex, column, index, last, lastH)">
-          <span *ngIf="index === arr.length - 1 ">
+          <span *ngIf="index === arr.length - 1" class="arrow-down-symbol">
             <span class="arrow-down"></span><span class="rect-down"></span></span>
-          <span *ngIf="index !== arr.length - 1 ">
+          <span *ngIf="index !== arr.length - 1">
             <span class="arrow-left"></span><span class="rect-right"></span>
           </span>
         </div>
@@ -27,10 +27,10 @@
             cells: data.cells[hIndex * column + index],
             index: hIndex * column + index
           }"></ledge-card>
-        <div class="arrow" *ngIf="(hIndex + 1) % 2 !== 0 && (hIndex * column + index)!==data.header.length-1">
-          <span *ngIf="index === arr.length - 1 ">
+        <div class="arrow" *ngIf="(hIndex + 1) % 2 !== 0 && (hIndex * column + index) !== data.header.length - 1">
+          <span *ngIf="index === arr.length - 1" class="arrow-down-symbol">
             <span class="rect-down"></span><span class="arrow-down"></span></span>
-          <span *ngIf="index !== arr.length - 1 ">
+          <span *ngIf="index !== arr.length - 1">
             <span class="rect-left"></span><span class="arrow-right"></span>
           </span>
         </div>

diff --git a/projects/ledge-render/src/lib/components/ledge-table-step/ledge-table-step.component.scss b/projects/ledge-render/src/lib/components/ledge-table-step/ledge-table-step.component.scss
@@ -54,6 +54,11 @@ $gray: #999aaa;
   }
 }
 
+.arrow-down-symbol {
+  position: relative;
+  left: 18px;
+}
+
 .arrow {
   position: relative;
   width: 68px;