changes by suren

ng8-seed/angular.json

@@ -34,7 +34,9 @@
               "src/assets/glyphicons/glyphicons.css",
               "node_modules/font-awesome/scss/font-awesome.scss",
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
-              "node_modules/simple-line-icons/scss/simple-line-icons.scss"
+              "node_modules/simple-line-icons/scss/simple-line-icons.scss",
+              "node_modules/slick-carousel/slick/slick.scss",
+              "node_modules/slick-carousel/slick/slick-theme.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
@@ -42,7 +44,9 @@
               "node_modules/hammerjs/hammer.min.js",
               "node_modules/sortablejs/Sortable.js",
               "node_modules/chart.js/dist/Chart.bundle.min.js",
-              "src/assets/cropper/cropper.js"
+              "src/assets/cropper/cropper.js",
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/slick-carousel/slick/slick.min.js"
             ]
           },
           "configurations": {

ng8-seed/package-lock.json

@@ -7347,6 +7347,14 @@
         }
       }
     },
+    "ngx-slick-carousel": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/ngx-slick-carousel/-/ngx-slick-carousel-0.4.6.tgz",
+      "integrity": "sha512-J+TTswuhKA/R2If+tPcHeWF+NIaFxn9dVPhz+vEjlT8qFrB7PtAmP4hXKE2kEMGETWY9iJeyIFvMQcr3yj40fA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -9344,6 +9352,11 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
+    "slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
+    },
     "smart-buffer": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.0.2.tgz",

ng8-seed/package.json

@@ -37,7 +37,7 @@
     "dragula": "^3.7.2",
     "font-awesome": "4.7.0",
     "hammerjs": "^2.0.8",
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.1",
     "leaflet": "^1.3.4",
     "leaflet-map": "^0.2.1",
     "moment": "^2.22.2",
@@ -49,12 +49,14 @@
     "ng2-validation": "^4.2.0",
     "ngx-color-picker": "^7.0.2",
     "ngx-perfect-scrollbar": "5.0.0-7",
+    "ngx-slick-carousel": "^0.4.6",
     "perfect-scrollbar": "^1.4.0",
     "quill": "^1.3.6",
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.3.3",
     "screenfull": "^3.3.3",
     "simple-line-icons": "^2.4.1",
+    "slick-carousel": "^1.8.1",
     "sortablejs": "^1.7.0",
     "tether": "^1.4.0",
     "zone.js": "~0.9.1"

ng8-seed/src/app/app.module.ts

@@ -29,6 +29,7 @@ import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSelectModule} from '@angular/material/select';
 import {MatCardModule} from '@angular/material/card';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
+import { SlickCarouselModule } from 'ngx-slick-carousel';
 
 import { AppRoutes } from './app.routing';
 import { AppComponent } from './app.component';
@@ -89,6 +90,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     NgxDatatableModule,
     MatCheckboxModule,
     MatProgressBarModule,
+    SlickCarouselModule,
     MatSelectModule,
     MatCardModule,
     DemoMaterialModule,

ng8-seed/src/app/dashboard/dashboard.component.html

@@ -39,67 +39,68 @@ showCaptions="true"
 </slideshow>
 <!-- <div align="center">
   <button mat-raised-button class="button-cyan">Contribute</button>
-</div> -->
+</div> --> a 
-<div class="middle">
+<!-- <div class="middle">
-  <button mat-stroked-button class="text">Contribute</button>
+  <button mat-stroked-button class="text" >Contribute</button>
-</div> 
+</div>  -->
 </div>
 </div>
 <div class="text-center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
+   <h5 style="color:#e41f1f;font-style: italic;">"Be a Champion of Change for Government Schools"</h5>
 <div class="mt-0">
-    <mat-card-title><h5 class="mt-0 mb-1 text-center">Our Partner</h5></mat-card-title>
+    <mat-card-title><h5 class="mt-0 mb-1 text-center">Project Count</h5></mat-card-title>
     <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
-    <div fxLayout="row" class="text-center mt-2 mb-2">
+    <div fxLayout="row" class="text-center mt-1 mb-1">
-         <div fxFlex="50" style="border-right: 1px solid cadetblue;">
+         <div fxFlex="50">
-               <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
+               <h2 class="mt-0" style="color: #f9a22b !important;"><span>23,8</span>K</h2>
-              </div>
+               <p>Construction</p>
-              <div fxFlex="50">
-               <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
-              </div>
-      </div>
-      <div fxLayout="row" class="text-center mt-2 mb-2">
-            <div fxFlex="50" style="border-right: 1px solid cadetblue;">
-                  <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
-                 </div>
-                 <div fxFlex="50">
-                  <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
-                 </div>
-         </div>
-         <div fxLayout="row" class="text-center mt-2 mb-2">
-               <div fxFlex="50" style="border-right: 1px solid cadetblue;">
-                     <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
-                    </div>
-                    <div fxFlex="50">
-                     <a href="#"><img src="../../assets/images/csr-img/logo.jpg" alt="" style=" width: 200px;"></a>
-                    </div>
             </div>
+            <div fxFlex="50">
+               <h2 class="mt-0" style="color: #000000 !important;"><span>23,000</span>K</h2>
+               <p>Construction</p>
+            </div>
+      </div>
+      <div fxLayout="row" class="text-center mt-1 mb-1">
+            <div fxFlex="50">
+                  <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+                  <p>Construction</p>
+               </div>
+               <div fxFlex="50">
+                  <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+                  <p>Construction</p>
+               </div>
+         </div> 
+         <div fxLayout="row" class="text-center mt-1 mb-1">
+               <div fxFlex="100">
+                  <button mat-stroked-button class="text" [routerLink]="'/home/project-detail'">Contribute</button>
+               </div>
+         </div>
 </div>
 </div>
 </div>
 
 <div class="">
-   <mat-card-title><h5 class="mt-0 text-center">Projects Count</h5></mat-card-title>
+   <mat-card-title><h5 class="mt-0 text-center">Our Supporters</h5></mat-card-title>
    <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
    <div fxLayout="row" class="text-center">
-       <div fxFlex="30.33">
+      <div class="text-center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-          <h2 class="mt-0" style="color: #f9a22b !important;"><span>23,8</span>K</h2>
+               <!-- You can now use your library component in app.component.html -->
-          <p>Construction</p>
+         <ngx-slick-carousel class="carousel" 
-       </div>
+         #slickModal="slick-carousel" 
-       <div fxFlex="30.33">
+         [config]="slideConfig" 
-          <h2 class="mt-0" style="color: #000000 !important;"><span>23,000</span>K</h2>
+         (init)="slickInit($event)"
-          <p>Construction</p>
+         (breakpoint)="breakpoint($event)"
-       </div>  
+         (afterChange)="afterChange($event)"
-        <div fxFlex="30.33">
+         (beforeChange)="beforeChange($event)">
-           <h2 class="mt-0" style="color: #61c524 !important;"><span>25,000</span>K</h2>
+         <div ngxSlickItem *ngFor="let slide of slides" class="slide text-center">
-           <p>Construction</p>
+         <img src="{{ slide.img }}" alt="" width="50%">
-        </div>
+         </div>
-        <div fxFlex="30.33">
+         </ngx-slick-carousel>
-         <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+
-         <p>Construction</p>
+         <!-- <button (click)="addSlide()">Add</button>
-      </div>
+         <button (click)="removeSlide()">Remove</button>
-      <div fxFlex="30.33">
+         <button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
-         <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+         <button (click)="slickModal.unslick()">unslick</button> -->
-         <p>Construction</p>
       </div>
      </div>
 </div>

ng8-seed/src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { SlickCarouselComponent } from 'ngx-slick-carousel';
 
 @Component({
   selector: 'app-dashboard',
@@ -6,24 +7,74 @@ import { Component } from '@angular/core';
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent { 
+  @ViewChild('slickModal', { static: true }) slickModal: SlickCarouselComponent;
+  slides = [
+    {img: "assets/images/csr-img/TN_client_logo/1.png"},
+    {img: "assets/images/csr-img/TN_client_logo/2.png"},
+    {img: "assets/images/csr-img/TN_client_logo/3.jpg"},
+    {img: "assets/images/csr-img/TN_client_logo/4.png"},
+    {img: "assets/images/csr-img/TN_client_logo/5.png"},
+    {img: "assets/images/csr-img/TN_client_logo/6.jpg"},
+    {img: "assets/images/csr-img/TN_client_logo/7.png"},
+    {img: "assets/images/csr-img/TN_client_logo/8.png"},
+    {img: "assets/images/csr-img/TN_client_logo/9.png"},
+    {img: "assets/images/csr-img/TN_client_logo/10.png"},
+    {img: "assets/images/csr-img/TN_client_logo/11.png"},
+    {img: "assets/images/csr-img/TN_client_logo/12.png"}
+  ];
+  slideConfig = {"slidesToShow": 8, "slidesToScroll": 1,"dots": true,"infinite": true,"autoplay": true,"autoplaySpeed": 1200};
+  
+  // addSlide() {
+  //   this.slides.push({img: "http://placehold.it/350x150/777777"})
+  // }
+  
+  // removeSlide() {
+  //   this.slides.length = this.slides.length - 1;
+  // }
+  
+  slickInit(e) {
+    console.log('slick initialized');
+  }
+  
+  breakpoint(e) {
+    console.log('breakpoint');
+  }
+  
+  afterChange(e) {
+    console.log('afterChange');
+  }
+  
+  beforeChange(e) {
+    console.log('beforeChange');
+  }
   txt:string;
   height:string="400px"
   width:string="300px;"
   imageSources=[{
     // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56748793/dbohn_170625_1801_0018.0.0.jpg',
-    url:'assets/images/csr-img/IMG_2535.jpg',
+    url:'assets/images/csr-img/s1.jpg',
     caption:'First'
   },
   {
     // url:'https://cdn.vox-cdn.com/uploads/chorus_asset/file/9278671/jbareham_170917_2000_0124.jpg',
-    url:'assets/images/csr-img/IMG_2928.jpg',
+    url:'assets/images/csr-img/s2.jpg',
     caption:'Second'
-  }
+  },
-  // {
+  {
     // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56789263/akrales_170919_1976_0104.0.jpg',
-    // url:'assets/images/csr-img/ban3.jpg',
+    url:'assets/images/csr-img/s3.jpg',
-    // caption:'Third'
+    caption:'Third'
-  // }
+  },
+  {
+    // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56789263/akrales_170919_1976_0104.0.jpg',
+    url:'assets/images/csr-img/s4.jpg',
+    caption:'Third'
+  },
+  {
+    // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56789263/akrales_170919_1976_0104.0.jpg',
+    url:'assets/images/csr-img/s5.jpg',
+    caption:'Third'
+  }
 ]
 
   flexContent=[{

ng8-seed/src/app/dashboard/dashboard.module.ts

@@ -16,6 +16,7 @@ import {SlideshowModule} from 'ng-simple-slideshow'
 import { ProjectListComponent } from 'app/components/project-list/project-list.component';
 import { ProjectDetailComponent } from 'app/components/project-detail/project-detail.component';
 import {FooterComponent} from 'app/components/footer/footer.component'
+import { SlickCarouselModule } from 'ngx-slick-carousel';
 
 @NgModule({
   imports: [
@@ -29,6 +30,7 @@ import {FooterComponent} from 'app/components/footer/footer.component'
     MatMenuModule,
     MatSelectModule,
     MatRadioModule,
+    SlickCarouselModule,
     ChartsModule,
     // NgxChartsModule,
     NgxDatatableModule,