Merge pull request #147 from SoftStackFactory/132-timeline-styling

132 timeline styling

Author: khoadnguyen

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,23 @@ timeline {
         }
     }
 
+    @media screen and (min-width:1024px){
+        background-position: 5.89% top;
+    }
 
-    .list-ios > .item-block:last-child, .list-ios > .item-wrapper:last-child .item-block{
-        border-bottom: none;
+    @media screen and (min-width:1360px){
+        background-position: 5.7% top;
     }
 
-    .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,83 +139,16 @@ timeline {
     }
 
     .checkbox-ios {
-        // position: absolute !important;
         margin: -6px 14px 8px -35px !important;
         padding-left: 4%;
         padding-top: 2%;
     }
-        
 
-    @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;
-        }
-      }
+    .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,'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;
-        }
-      }
-    }
+ 
   }

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