From e6d9b724e596dcba0280d146bc86256bd28a6dad Mon Sep 17 00:00:00 2001
From: Aaron Louie <aaron@sartography.com>
Date: Wed, 16 Oct 2019 11:38:50 -0400
Subject: [PATCH] Connects items in each column vertically with a line

---
 src/app/about-us/about-us.component.html | 37 ++++++++----
 src/app/about-us/about-us.component.scss | 75 ++++++++++++++++++------
 src/app/about-us/about-us.component.ts   |  9 +++
 3 files changed, 90 insertions(+), 31 deletions(-)

diff --git a/src/app/about-us/about-us.component.html b/src/app/about-us/about-us.component.html
index ed6485e..db733e0 100644
--- a/src/app/about-us/about-us.component.html
+++ b/src/app/about-us/about-us.component.html
@@ -1,29 +1,42 @@
-<div class="about-us" fxLayout="row" [@scrollAnimation]="state" fxLayoutAlign="center start">
-  <div fxFlex="33.33%" class="title">
+<div class="about-us" gdColumns="1fr 2fr" [@scrollAnimation]="state" gdAlignRows="start stretch" gdAlignColumns="start stretch">
+  <div class="title">
     <h1 class="mat-display-1">About Us</h1>
     <h2 class="mat-display-3">What We Do</h2>
   </div>
 
-  <div fxFlex="67.67%" fxLayout="column" class="capabilities">
+  <div class="capabilities">
     <div
       *ngFor="let c of capabilities; let i = index"
-      [fxLayout]="i % 2 === 0 ? 'row' : 'row-reverse'"
-      [ngClass]="i % 2 === 0 ? 'even' : 'odd'"
-      fxLayoutAlign="start start"
+      gdColumns="3fr 1fr 1fr 3fr"
+      [ngClass]="isEven(i, 'even', 'odd')"
     >
-      <div class="details" fxFlex="37.5%">
-        <h3>{{c.title}}</h3>
-        <p>{{c.description}}</p>
+      <div class="details-left">
+        <ng-container *ngIf="isEven(i)">
+          <h3>{{c.title}}</h3>
+          <p>{{c.description}}</p>
+        </ng-container>
       </div>
 
-      <div class="icon" fxFlex="12.5%">
+      <div class="icon-left">
         <span
+          *ngIf="isEven(i)"
           [inlineSVG]="c.icon_url"
           class="capability-icon"
         ></span>
       </div>
-      <div class="icon-spacer" fxFlex="12.5%"></div>
-      <div class="details-spacer" fxFlex="37.5%"></div>
+      <div class="icon-right">
+        <span
+          *ngIf="!isEven(i)"
+          [inlineSVG]="c.icon_url"
+          class="capability-icon"
+        ></span>
+      </div>
+      <div class="details-right">
+        <ng-container *ngIf="!isEven(i)">
+          <h3>{{c.title}}</h3>
+          <p>{{c.description}}</p>
+        </ng-container>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/about-us/about-us.component.scss b/src/app/about-us/about-us.component.scss
index c97d890..d834e58 100644
--- a/src/app/about-us/about-us.component.scss
+++ b/src/app/about-us/about-us.component.scss
@@ -21,6 +21,7 @@
 
   .capabilities {
     margin-top: 300px;
+    margin-left: 80px;
     margin-right: 80px;
 
     ::ng-deep .capability-icon svg {
@@ -28,45 +29,81 @@
       width: 128px;
       height: 128px;
     }
+
+    .icon-left,
+    .icon-right {
+      position: relative;
+      background-color: transparent;
+
+      &:after {
+        position: absolute;
+        left: 50%;
+        content: '';
+        width: 2px;
+      }
+    }
   }
 
   .even {
     text-align: right;
 
-    .details {
+    .details-left {
       background-color: transparent;
       h3 { color: $brand-primary-dark-1; }
     }
-    .icon {
-      background-color: transparent;
+    .icon-left {
       ::ng-deep .capability-icon svg path { fill: $brand-primary; }
-    }
-    .icon-spacer {
-      background-color: $brand-gray;
 
-      &::after {
-        content: '';
-        width: 1px;
-        height: 100%;
-        background-color: $brand-gray-light-4;
+      &:after {
+        bottom: 0;
+        height: calc(100% - 64px);
+        background-color: $brand-gray-light-3;
       }
     }
-    .details-spacer { background-color: $brand-gray; }
+    .icon-right {
+      &:after {
+        top: 0;
+        height: calc(100% - 40px);
+        background-color: $brand-gray-light-1;
+      }
+    }
+    .details-right { background-color: transparent; }
+
+    &:first-of-type .icon-right:after { background-color: transparent; }
+
+    &:last-of-type,
+    &:nth-last-of-type(2) {
+       .icon-left:after { background-color: transparent; }
+    }
   }
 
   .odd {
     text-align: left;
 
-    .details-spacer { background-color: transparent; }
-    .icon-spacer { background-color: transparent; }
-    .icon {
-      background-color: $brand-gray;
-      ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; }
+    .details-left { background-color: transparent; }
+    .icon-left {
+      &:after {
+        top: 0;
+        height: calc(100% - 40px);
+        background-color: $brand-gray-light-3;
+      }
     }
-    .details {
-      background-color: $brand-gray;
+    .icon-right {
+      ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; }
+
+      &:after {
+        bottom: 0;
+        height: calc(100% - 64px);
+        background-color: $brand-gray-light-1;
+      }
+    }
+    .details-right {
+      background-color: transparent;
       color: white;
       h3 { color: $brand-primary-light-2; }
     }
+
+    &:last-of-type .icon-right:after { background-color: transparent; }
+    &:last-of-type .icon-left:after { background-color: transparent; }
   }
 }
diff --git a/src/app/about-us/about-us.component.ts b/src/app/about-us/about-us.component.ts
index caed437..94277e1 100644
--- a/src/app/about-us/about-us.component.ts
+++ b/src/app/about-us/about-us.component.ts
@@ -51,4 +51,13 @@ export class AboutUsComponent implements OnInit {
     const scrollPosition = window.pageYOffset + hOffset;
     this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
   }
+
+  isEven(i: number, ifTrue?: string, ifFalse?: string): string | boolean {
+    const test = i % 2 === 0;
+    if (ifTrue && ifFalse) {
+      return test ? ifTrue : ifFalse;
+    } else {
+      return test;
+    }
+  }
 }