feat: add support for long items

phodal · Mar 16, 2020 · 1c11513 · 1c11513
1 parent e9c02b3
commit 1c11513
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.ts b/src/app/shared/components/markdown-render/markdown-render.component.ts
@@ -402,6 +402,12 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
     const maxItem = maxBy(items, (d) => d.childrens.length);
     const maxLength = maxItem.childrens.length;
 
+    let maxWidthClass = '';
+    const MAX_ONE_COLUMN = 10;
+    if (maxLength > MAX_ONE_COLUMN) {
+      maxWidthClass = 'process-step-max';
+    }
+
     let cols = '';
     // tslint:disable-next-line:prefer-for-of
     for (let i = 0; i < items.length; i++) {
@@ -413,12 +419,12 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
           text = items[i].childrens[j].item.text;
         }
         if (text !== '') {
-          itemsStr += `<div class="process-step-item">${text}</div>`;
+          itemsStr += `<div class="process-step-item ${maxWidthClass}">${text}</div>`;
         }
       }
 
       cols += `<div class="process-step-column">
-  <div class="process-title">${title}</div><div class="process-body">${itemsStr}</div>
+  <div class="process-title">${title}</div><div class="process-body ${maxWidthClass === '' ? '' : 'process-long-body' }">${itemsStr}</div>
 </div>`;
     }
 

diff --git a/src/styles/_process-table.scss b/src/styles/_process-table.scss
@@ -232,6 +232,16 @@
 
     .process-body {
       padding: 1em;
+
+      &.process-long-body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+        flex-flow: row wrap;
+        align-content: flex-end;
+      }
     }
 
     .process-step-item {
@@ -241,6 +251,10 @@
       border-right: 1px solid #222;
       border-top: 1px solid #222;
       border-bottom: 1px solid #222;
+
+      &.process-step-max {
+        width: 50%;
+      }
     }
   }
 }