updated timeline

nj-coder · nj-coder · commit d48d0d9b013d · 2019-11-02T16:41:22.000+11:00
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -51,7 +51,11 @@
       </p>
     </div>
     <div class="tech-stack">
-      <span class="badge">Angular</span>
+      <div class="badge-wrapper">
+          <span class="badge">Angular</span>
+          <span class="badge">Ionic Framework</span>
+          <span class="badge">Angular</span>
+      </div>
     </div>
     <home-timeline></home-timeline>
   </div>
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
@@ -172,15 +172,22 @@
 
     .tech-stack {
       text-align: center;
-      
-      .badge {
-        color: var(--primary);
-        background-color: #E1ECF4;
-        font-size: 12px;
-        padding: 2px 6px;
-        border-radius: 3px;
+
+      .badge-wrapper {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(50px, auto));
+        grid-gap: 4px;
+        justify-content: center;
+
+        .badge {
+          color: var(--primary);
+          background-color: #E1ECF4;
+          font-size: 12px;
+          padding: 2px 6px;
+          border-radius: 3px;
+        }
       }
-      
+
       &:after {
         content: "";
         border-bottom: 2px solid var(--app-grey);
diff --git a/src/app/pages/home/timeline/timeline.component.html b/src/app/pages/home/timeline/timeline.component.html
@@ -3,14 +3,34 @@
     <div *ngFor="let item of timelineItems" class="timeline-item" [ngClass]="{'project': item.type == 'project', 
     'education': item.type == 'education'}">
       <div class="item-head">
-        <span [ngSwitch]="item.type">
+        <span [ngSwitch]="item.type" class="item-type">
           <span *ngSwitchCase="'education'">Education</span>
           <span *ngSwitchCase="'project'">Project</span>
           <span *ngSwitchDefault>Position</span>
         </span>
+        <span class="timeperiod">
+          <span *ngIf="item.startDate">{{ item.startDate | date:'MMM, y'}}</span>
+          <span [ngSwitch]="item.endDate">
+            <span *ngSwitchCase="'current'"> - Current</span>
+            <span *ngSwitchDefault>
+              <span *ngIf="item.endDate"> - {{ item.endDate | date:'MMM, y'}}</span>
+            </span>
+          </span>
+        </span>
       </div>
       <div class="item-content">
-        content
+        <div class="image"></div>
+        <div class="details">
+          <div class="heading" *ngIf="item.company">
+            {{ item.company.title }} <a [href]="item.company.link" target="_blank">{{ item.company.name }}</a>
+          </div>
+          <div class="tech-stack" *ngIf="item.techs && item.techs.length > 0">
+            <span class="badge" *ngFor="let tech of item.techs">
+              {{ tech }}
+            </span>
+          </div>
+          <div class="description" *ngIf="item.description"></div>
+        </div>
       </div>
       <div class="side-el">
         <div class="arrow"></div>
diff --git a/src/app/pages/home/timeline/timeline.component.scss b/src/app/pages/home/timeline/timeline.component.scss
@@ -1,14 +1,14 @@
-.timeline { 
-  margin: 2em auto;
+.timeline {
+  margin: 4em auto;
   position: relative;
 
   &::before {
     content: "";
     position: absolute;
-    top: -2em;
+    top: -4em;
     left: 50%;
     width: 1px;
-    height: calc(100% - 2em);
+    height: calc(100%);
     background: var(--app-grey);
   }
 
@@ -47,10 +47,52 @@
         padding-bottom: 0.5em;
         font-size: 80%;
         color: #6a737c;
+
+        .item-type {
+          font-weight: bold;
+        }
+
+        .timeperiod {
+          margin-left: 4px;
+        }
       }
 
       .item-content {
         padding-top: 0.5em;
+        display: grid;
+        grid-template-columns: 50px 1fr;
+        grid-gap: 1em;
+
+        .details {
+          .heading {
+            font-weight: bold;
+
+            a {
+              text-decoration: none;
+            }
+          }
+
+          .tech-stack {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            padding-top: 0.5em;
+
+            .badge {
+              color: var(--primary);
+              background-color: #E1ECF4;
+              font-size: 12px;
+              padding: 2px 6px;
+              border-radius: 3px;
+              text-align: center;
+              margin: 0 4px 4px 0;
+            }
+          }
+
+          .description {
+            padding-top: calc(0.5em - 4px);
+          }
+        }
       }
 
       .side-el {
diff --git a/src/app/pages/home/timeline/timeline.component.ts b/src/app/pages/home/timeline/timeline.component.ts
@@ -8,7 +8,16 @@ import { Component, OnInit } from '@angular/core';
 export class TimelineComponent implements OnInit {
 
   timelineItems = [{
-    type: 'position'
+    type: 'position',
+    company: {
+      name: '152HQ',
+      link: 'https://www.152hq.com/wp/',
+      title: 'Senior Front-end Developer'
+    },
+    techs: ['Angular', 'Ionic', 'AngularJS', 'Cordova'],
+    startDate: '07-07-2017',
+    endDate: 'current',
+    itemImage: ''
   }, {
     type: 'project',
     subtype: 'opensource'
