updated timeline UI

nj-coder · nj-coder · commit cb2dd773fc38 · 2019-10-27T19:08:49.000+11:00
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -1,5 +1,3 @@
-<home-timeline></home-timeline>
-
 <div class="home">
 
   <div class="header">
@@ -9,7 +7,7 @@
     <div class="right hide-sm">
       <div class="link-wrappeer">
         <a href="#">TECHS</a>
-        <a href="#">PORTFOLIO</a>
+        <a href="#timeline">PORTFOLIO</a>
         <a href="#" class="hire-me">Hire Me</a>
       </div>
     </div>
@@ -45,5 +43,6 @@
     </div>
   </div>
 
+  <home-timeline></home-timeline>
 
 </div>
diff --git a/src/app/pages/home/timeline/timeline.component.html b/src/app/pages/home/timeline/timeline.component.html
@@ -1,11 +1,22 @@
-<div class="timeline">
+<div class="timeline" id="timeline">
   <div class="timeline-item-wrapper">
-    <div class="timeline-item">
+    <div *ngFor="let item of timelineItems" class="timeline-item" [ngClass]="{'project': item.type == 'project', 
+    'education': item.type == 'education'}">
       <div class="item-head">
-          header
+        <span [ngSwitch]="item.type">
+          <span *ngSwitchCase="'education'">Education</span>
+          <span *ngSwitchCase="'project'">Project</span>
+          <span *ngSwitchDefault>Position</span>
+        </span>
       </div>
       <div class="item-content">
-          content
+        content
+      </div>
+      <div class="side-el">
+        <div class="arrow"></div>
+        <div class="circle">
+          <i class="fab fa-facebook-square"></i>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/app/pages/home/timeline/timeline.component.scss b/src/app/pages/home/timeline/timeline.component.scss
@@ -4,11 +4,12 @@
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
+    top: 1em;
     left: 50%;
     width: 1px;
-    height: 100%;
+    height: calc(100% - 4em);
     background: var(--app-grey);
   }
 
@@ -18,42 +19,92 @@
     .timeline-item {
       box-sizing: border-box;
       padding: 1em;
+      margin-bottom: 1em;
       border-radius: 2px;
-      max-width: calc(50% - 1em);
+      max-width: calc(50% - 2em);
       border: 1px solid var(--app-grey);
+      border-top: 3px solid #FF8A65;
       position: relative;
 
-      &::after {
-        content: '';
-        position: absolute;
-        right: -10px;
-        top: 1em;
-        width: 10px;
-        height: 10px;
-        background: blue;
-        clip-path: polygon(100% 50%, 0 0, 0 100%);
-      }
 
-      &.right {
-        margin-left: auto;
+      &.project {
+        border-top-color: #ba68c8;
 
-        &::after {
-          right: auto;
-          left: -10px;
-          clip-path: polygon(0 50%, 100% 0, 100% 100%);
+        i {
+          color: #ba68c8;
         }
       }
 
-      &.position {
-        border-top: 2px solid red;
+      &.education {
+        border-top-color: #aed581;
+
+        i {
+          color: #aed581;
+        }
       }
 
       .item-head {
         border-bottom: 1px solid var(--app-grey);
-        padding-bottom: 2px;
+        padding-bottom: 0.5em;
         font-size: 80%;
         color: #6a737c;
       }
+
+      .item-content {
+        padding-top: 0.5em;
+      }
+
+      .side-el {
+        position: absolute;
+        right: -100px;
+        top: 1em;
+        height: 10px;
+        width: 100px;
+        display: flex;
+        align-items: center;
+
+        .arrow {
+          width: 10px;
+          height: 10px;
+          background: var(--app-grey);
+          clip-path: polygon(100% 50%, 0 0, 0 100%);
+        }
+
+        .circle {
+          width: 30px;
+          height: 30px;
+          background: #fff;
+          border: 1px solid var(--app-grey);
+          border-radius: 50%;
+          margin-left: 0.5em;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #FF8A65;
+        }
+
+      }
+
+      &:nth-child(even) {
+        margin-left: auto;
+
+        .side-el {
+          right: auto;
+          left: -50px;
+
+          .arrow {
+            order: 1;
+            right: auto;
+            left: -10px;
+            clip-path: polygon(0 50%, 100% 0, 100% 100%);
+          }
+
+          .circle {
+            margin-left: 0;
+            margin-right: 0.5em;
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/app/pages/home/timeline/timeline.component.ts b/src/app/pages/home/timeline/timeline.component.ts
@@ -6,9 +6,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./timeline.component.scss']
 })
 export class TimelineComponent implements OnInit {
-  timelineItems = [{
 
+  timelineItems = [{
+    type: 'position'
+  }, {
+    type: 'project',
+    subtype: 'opensource'
+  }, {
+    type: 'education'
   }];
+
   constructor() { }
 
   ngOnInit() {
diff --git a/src/styles.scss b/src/styles.scss
@@ -17,5 +17,6 @@ body {
 :root {
   --primary: #1e3c72;
   --secondary: #2a5298;
-  --app-grey: #e4e6e8;
+  --app-grey: #e0e0e0;
+  --sm-breakpoint: 900px;
 }

Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,6 @@ body {`
`17`	`17`	`:root {`
`18`	`18`	`--primary: #1e3c72;`
`19`	`19`	`--secondary: #2a5298;`
`20`		`- --app-grey: #e4e6e8;`
	`20`	`+ --app-grey: #e0e0e0;`
	`21`	`+ --sm-breakpoint: 900px;`
`21`	`22`	`}`