From ecd40be72613b42a43e5e00a19dbd81d7358a45d Mon Sep 17 00:00:00 2001
From: jal040 <jamielee3136@gmail.com>
Date: Wed, 17 Oct 2018 19:44:15 -0700
Subject: [PATCH 1/2] FINALLY FIXED THE TIMELINE BLUE DOT ISSUEgit status! thx
 khoa

---
 src/assets/imgs/blueline.png          | Bin 0 -> 275 bytes
 src/components/timeline/timeline.html |  23 ++++----
 src/components/timeline/timeline.scss |  75 ++++++++++++--------------
 src/components/timeline/timeline.ts   |  15 ++++--
 4 files changed, 52 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/imgs/blueline.png

diff --git a/src/assets/imgs/blueline.png b/src/assets/imgs/blueline.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b089639df3730f101327226ad7daa6be26997ee
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^KsKWl2OE&3Z-00RkYX$ja(7}_cTVOdkaO14#W5s<
z_3fpNoDBvNtcj2R?cNc<w$V7Dv_N6y(;(Zv{l8A^c=lID`u&|9mHt+LrgW*xaemQs
zIV8Yuy5+GTr?btK3w`b?JRbv`t>q>f9C7A-TQM+_AGGJO`g*c{n-}v<ALua#Pgg&e
IbxsLQ0I`;3tN;K2

literal 0
HcmV?d00001

diff --git a/src/components/timeline/timeline.html b/src/components/timeline/timeline.html
index 6301665d..e667d9c7 100644
--- a/src/components/timeline/timeline.html
+++ b/src/components/timeline/timeline.html
@@ -1,14 +1,17 @@
 <!-- Generated template for the TimelineComponent component -->
+
 <div class="timeline">
 
-    <ion-list>
+    <ion-list class="border-thingy">
         <ng-template #recursiveList let-list>
-        <!-- <div class="cd-timeline__img cd-timeline__img--5"></div> -->
         <ion-list *ngFor="let item of list">
 
-          <h2 *ngIf="!item.checkmark" (click)="toggleItem(item)">{{item.title}} </h2>
-          
-          <ion-item *ngIf="item.checkmark">
+          <ion-item *ngIf="!item.checkmark" (click)="toggleItem(item)" no-padding>
+              <div *ngIf="item.dot" class="cd-timeline__img cd-timeline__img--5"></div>
+            <h2>{{item.title}}</h2>
+          </ion-item>
+
+          <ion-item *ngIf="item.checkmark" no-padding>
             <ion-label>{{item.title}}</ion-label>
             <ion-checkbox color="dark" checked="false"></ion-checkbox>
           </ion-item>
@@ -16,18 +19,10 @@ <h2 *ngIf="!item.checkmark" (click)="toggleItem(item)">{{item.title}} </h2>
           <ion-item *ngIf="item.itemExpand && item.children.length > 0 && !item.checkmark">
             <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
           </ion-item>
-          <!-- <ion-item *ngIf="item.checkmark">
-              <ion-checkbox color="dark" checked="false"></ion-checkbox>
-          </ion-item> -->
+
         </ion-list>
         </ng-template>
         <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
       </ion-list>
 
-    <!-- <ng-content></ng-content>
-  
-    <timeline-item>
-      <ion-icon class="" [name]="endIcon"></ion-icon>
-    </timeline-item> -->
-  
   </div>
\ No newline at end of file
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 32c95ec7..5156f632 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -15,43 +15,43 @@ timeline {
     position: absolute;
     top: 0;
     left: 0;
-    width: 40px;
-    height: 40px;
+    width: 25px;
+    height: 25px;
+    z-index: 1000;
     border-radius: 50%;
-    -webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
-            box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+    // -webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+    //         box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
   }
   
-  .cd-timeline__img img {
-    display: block;
-    width: 24px;
-    height: 24px;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    margin-left: -12px;
-    margin-top: -12px;
-  }
 
   .cd-timeline__img.cd-timeline__img--5 {
     background: #64c5b1;
   }
 
+  .item-ios h2:last-child, .item-ios h3:last-child, .item-ios h4:last-child, .item-ios h5:last-child, .item-ios h6:last-child, .item-ios p:last-child {
+      padding-left: 3%;
+  }
+
+  .item-ios{
+      background-color: transparent !important;
+      padding-left: 10px !important;
+  }
+  
+  .item-checkbox {
+      margin-left: 10%;
+  }
+
+.border-thingy {
+    padding-left: 5%;
+}
 .timeline {
-    margin: 30px 0 0 0;
+    margin-top: 30px;
     padding: 0;
     position: relative;
+    background-image: url('../assets/imgs/blueline.png');
+    background-repeat: repeat-y;
+    background-position: 6.2% top;
 
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 10px;
-      background: #afdcf8;
-      left: 20%;
-      margin-left: -10px;
-    }
     timeline-item {
       position: relative;
       display: inline-block;
@@ -114,27 +114,15 @@ timeline {
         }
     }
 
-
-    .list-ios > .item-block:last-child, .list-ios > .item-wrapper:last-child .item-block{
-        border-bottom: none;
-    }
-
-    .list-ios > .item-block:first-child {
-        border-top: none;
+    .list-ios, .item-block, .item-inner {
+        border-bottom: none !important;
+        border-top: none !important;
     }
 
     .list-ios {
-        margin: -1px 0 20px !important;
+        margin: -1px 0 15px !important;
     }
 
-    
-
-    &:before {
-        left: 3% !important;
-    }
-    .list, .list-md{
-        margin-left:3% !important;
-    }
 
     .item.item-md .checkbox-md {
         margin: -6px 14px 8px -35px !important;
@@ -143,11 +131,14 @@ timeline {
     }
 
     .checkbox-ios {
-        // position: absolute !important;
         margin: -6px 14px 8px -35px !important;
         padding-left: 4%;
         padding-top: 2%;
     }
+
+    .item-ios h2:last-child, .item-ios h3:last-child, .item-ios h4:last-child, .item-ios h5:last-child, .item-ios h6:last-child, .item-ios p:last-child {
+        padding-left: 6% !important;
+    }
         
 
     @media screen and (max-width: map-get($grid-breakpoints,'lg')){
diff --git a/src/components/timeline/timeline.ts b/src/components/timeline/timeline.ts
index ad9cf9fd..faba1511 100644
--- a/src/components/timeline/timeline.ts
+++ b/src/components/timeline/timeline.ts
@@ -58,7 +58,8 @@ export class TimelineComponent {
           ]
         }
       ],
-      itemExpand: false
+      itemExpand: false,
+      dot: true
     },
     {
       title: 'Starting Up',
@@ -102,25 +103,29 @@ export class TimelineComponent {
           ]
         }
       ],
-      itemExpand: false
+      itemExpand: false,
+      dot: true
     },
     {
       title: 'Taking care of myself',
       checkmark: false,
       children: [],
-      itemExpand: false
+      itemExpand: false,
+      dot: true
     },
     {
       title: 'Reinventing myself',
       checkmark: false,
       children: [],
-      itemExpand: false
+      itemExpand: false,
+      dot: true
     },
     {
       title: 'Putting down roots',
       checkmark: false,
       children: [],
-      itemExpand: false
+      itemExpand: false,
+      dot: true
     }
   ];
 

From dbea20955f0c74a2ae316626d72a0bcc369bf614 Mon Sep 17 00:00:00 2001
From: jal040 <jamielee3136@gmail.com>
Date: Wed, 17 Oct 2018 20:52:34 -0700
Subject: [PATCH 2/2] fixed ipad pro styling

---
 src/components/timeline/timeline.scss | 80 +++------------------------
 1 file changed, 9 insertions(+), 71 deletions(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 5156f632..5d975aa6 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -114,6 +114,14 @@ timeline {
         }
     }
 
+    @media screen and (min-width:1024px){
+        background-position: 5.89% top;
+    }
+
+    @media screen and (min-width:1360px){
+        background-position: 5.7% top;
+    }
+
     .list-ios, .item-block, .item-inner {
         border-bottom: none !important;
         border-top: none !important;
@@ -141,76 +149,6 @@ timeline {
     }
         
 
-    @media screen and (max-width: map-get($grid-breakpoints,'lg')){
-        .list-ios{
-            margin-top: -1px;
-            margin-right: 25px;
-            margin-bottom: 32px;
-            margin-left: 25px;
-        }
-      timeline-item{
-        timeline-time{
-          font-size: 0.7em;
-        }
-      }
-    }
-    @media screen and (max-width: map-get($grid-breakpoints,'md')){
-      &:before{
-        left: 30px;
-      }
-      timeline-item{
-        ion-card{
-          margin-left: 80px !important;
-        }
-        ion-icon{
-          left: 30px;
-        }
-        timeline-time{
-          font-size: 0.8em;
-          width: 100%;
-          left: 80px;
-          position: relative;
-          span{
-            text-align: left;
-          }
-
-        }
-      }
-    }
-    @media screen and (max-width: map-get($grid-breakpoints, 'sm' )){
-      &:before{
-        display: none;
-      }
-      timeline-item{
-        &:last-child{
-          visibility: hidden;
-        }
-        ion-icon{
-          position: relative;
-          float: right;
-          left: auto;
-          margin: -55px 5px 0 0;
-          &:after{
-            border-left-color: transparent;
-            border-top-color: #afdcf8;
-            top: 46px;
-            left: 10px;
-          }
-        }
-        timeline-time{
-          width: 100%;
-          position: relative;
-          padding: 0 0 20px 0;
-          left: 20px;
-          span{
-            text-align: left;
-          }
-        }
 
-        ion-card{
-          width: calc(100% - 20px) !important;
-          margin-left: 10px !important;
-        }
-      }
-    }
+ 
   }
\ No newline at end of file