fix: fix arrow issue for process step && fixed #37

phodal · Apr 5, 2020 · 614e7e4 · 614e7e4
1 parent 1bd30b6
commit 614e7e4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/projects/ledge-render/src/lib/ledge-render.component.html b/projects/ledge-render/src/lib/ledge-render.component.html
@@ -54,11 +54,12 @@
 
       <div *ngSwitchCase="'process-step'">
         <div class="markdown-process-step">
-          <div class="process-step-column" *ngFor="let row of item.data.children">
+          <div class="process-step-column" *ngFor="let row of item.data.children;let last = last;">
             <div class="process-title">{{row.name}}</div>
             <div class="process-body">
               <div class="process-step-item" *ngFor="let cell of row.children">{{cell.name}}</div>
             </div>
+            <div class="step-symbol" *ngIf="!last"></div>
           </div>
         </div>
       </div>

diff --git a/src/styles/mdstyles/_process-table.scss b/src/styles/mdstyles/_process-table.scss
@@ -230,6 +230,7 @@
     text-align: center;
     flex: 1;
     margin-left: 2em;
+    position: relative;
 
     &:first-child {
       margin-left: 0;
@@ -239,7 +240,14 @@
       font-size: 1.2em;
       line-height: 1.5em;
       margin-top: 1em;
+    }
 
+    .step-symbol {
+      position: absolute;
+      top: 50%;
+      right: -32px;
+      height: 10px;
+      width: 20px;
       background: url("/assets/resources/images/arrow-right-thin.svg") no-repeat center right 10px;
     }