Merge pull request #149 from SoftStackFactory/dev

Dev

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

src/components/timeline/timeline.ts

@@ -48,7 +48,7 @@ <h1 id="hello" text-center>Hello, Austin!</h1>
             are.
             <br>
             <br>
-            <a id="separationLink">See what's next
+            <a (click)="toTimeline()" id="separationLink">See what's next
               <ion-icon class="linkIcons" name="arrow-round-forward"></ion-icon>
             </a>
           </ion-card-content>

src/pages/dashboard/dashboard.html

@@ -42,11 +42,6 @@ page-dashboard {
         justify-content: center
     }
 
-    #lifeWheel {
-        width: 250px; 
-        height: 250px;
-    }
-
     #networkingContent {
         padding: 0px 16px; 
         display: flex; 

src/pages/dashboard/dashboard.scss

@@ -3,6 +3,8 @@ import { NavController, NavParams } from 'ionic-angular';
 import { Chart } from 'chart.js';
 import 'chartjs-plugin-datalabels';
 
+import { TimelinePage} from '../timeline/timeline';
+
 
 /**
  * Generated class for the DashboardPage page. 
@@ -23,7 +25,31 @@ export class DashboardPage {
   constructor(public navCtrl: NavController, public navParams: NavParams) {
   }
 
-  ionViewDidLoad() {
+/** This block of code is for everything contained in ionViewDidLoad right below it
+ *
+ Everything above the options property in the chart code below relates to the chart data. Everything below that property modifies the display in some way.
+ 
+ Everything below the plugins property in options relates to the snazzy labels that surround the chart.
+
+ The layout.padding property gives room for the snazzy labels.
+
+ In plugins.datalabels:
+
+            anchor, align, and offset are all used to position the labels. the anchor value sets the anchor point from which you'll relate a label's position
+            align defines what direction you'll position your labels relative to the anchor point
+            offset defines how far away from the anchor point you will position the labels
+            For more explanation: https://chartjs-plugin-datalabels.netlify.com/positioning.html
+
+            Some properties have functions as their values. This makes the values dynamic, changing based on certain conditions.
+            You'll notice that the functions take an argument called context. This object contains helpful information about the chart. Console log it if you're curious!
+
+            The "rotation" property is what rotates the labels to match where they are around the graph
+            The "BorderRadius property " controls how round the edges of the label containers are.
+            The "Font" and "Offset" functions scale the font and positioning according to the chart's width.
+            The "Formatter" property is what allows us to display the data names and values.
+            */
+
+ionViewDidLoad() {
     this.chart = new Chart(this.canvas.nativeElement, {
       type: 'polarArea',
       data: {
@@ -47,20 +73,22 @@ export class DashboardPage {
         legend: {
           display: false
         },
+
         plugins: {
           datalabels: {
             textAlign: 'center',
             anchor: 'start',
             align: 'end',
             offset: function (context) {
-              let chart = context.chart.width;
-              return chart / 3.6 - 55;
-            },
-            backgroundColor: function (context) {
-              return ["rgba(0,0,255, .2)", "rgba(255,0,0, .2)", "rgba(128,0,128, .2)", "rgba(0,128,0, .2)", "rgba(255,165,0, .2)", "rgba(0,128,128, .2)", "rgba(255,0,255, .2)", "rgba(0,255,0, .2)"];
+              let chartWidth = context.chart.width;
+              return chartWidth / 3.6 - 55;
             },
+            backgroundColor: ["rgba(0,0,255, .2)", "rgba(255,0,0, .2)", "rgba(128,0,128, .2)", "rgba(0,128,0, .2)", "rgba(255,165,0, .2)", "rgba(0,128,128, .2)", "rgba(255,0,255, .2)", "rgba(0,255,0, .2)"],
             borderColor: 'black',
-            rotation: function (context) { if (context.dataIndex === 0 || context.dataIndex === 1 || context.dataIndex === 6 || context.dataIndex === 7) { return 45 / 2 + (45 * context.dataIndex) } else { return 45 / 2 + (45 * context.dataIndex) + 180 } },
+            rotation: function (context) {
+              if (context.dataIndex === 0 || context.dataIndex === 1 || context.dataIndex === 6 || context.dataIndex === 7) { return 45 / 2 + (45 * context.dataIndex) }
+              else { return 45 / 2 + (45 * context.dataIndex) + 180 }
+            },
             borderRadius: 5,
             borderWidth: 0,
             color: 'black',
@@ -87,4 +115,7 @@ export class DashboardPage {
     this.chart.update();
   }
 
+  toTimeline() {
+    this.navCtrl.setRoot(TimelinePage);
+  }
 }