FINALLY FIXED THE TIMELINE BLUE DOT ISSUEgit status! thx khoa

Author: jal040

src/assets/imgs/blueline.png

@@ -1,33 +1,28 @@
 <!-- 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>
 
           <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>

src/components/timeline/timeline.html

@@ -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')){

src/components/timeline/timeline.scss

@@ -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
     }
   ];