Changes Done by suren

ng8-seed/src/app/components/project-list/project-list.component.html

@@ -2,16 +2,16 @@
         <mat-card-title><h5 class="mt-0">Projects</h5></mat-card-title>
         <hr><br/>
       
-         <div fxLayout="row" fxLayoutAlign="center center" >
+         <!-- <div fxLayout="row" fxLayoutAlign="center center" > -->
              <!-- <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap" style="margin-left: 5px;"> -->
-                <mat-button-toggle-group appearance="legacy"  [(ngModel)]="filter_toggle" (click)="checktop()" layout-align="center center">
+                <!-- <mat-button-toggle-group appearance="legacy"  [(ngModel)]="filter_toggle" (click)="checktop()" layout-align="center center">
                         <mat-button-toggle value="all_items">All</mat-button-toggle>
                         <mat-button-toggle value="furnitures">Furnitures</mat-button-toggle>
                         <mat-button-toggle value="water">Drinking Water</mat-button-toggle>
                         <mat-button-toggle value="class">Smart Class</mat-button-toggle>
-                      </mat-button-toggle-group>
+                      </mat-button-toggle-group> -->
          <!-- </div> -->
-        </div>
+        <!-- </div> -->
         
         <div fxLayout="row wrap" [routerLink]="'/home/project-detail'">
          <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap" style="margin-left: 5px;">

ng8-seed/src/app/components/project-list/project-list.component.scss

@@ -197,12 +197,3 @@ mat-card{
     height: 100%;
     width:100%;
 }
-.logo_one {
-    transition: transform 1.5s;    
-  }
-  .logo_one:hover, .logo_one:focus {
-    transform: scale3d(1.186, 1.186, 2);
-  }
-  .logo_one:hover::after, .logo_one:focus::after {
-    opacity: 1;
-  }

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

@@ -39,7 +39,7 @@ showCaptions="true"
 </slideshow>
 <!-- <div align="center">
   <button mat-raised-button class="button-cyan">Contribute</button>
-</div> --> a 
+</div> --> 
 <!-- <div class="middle">
   <button mat-stroked-button class="text" >Contribute</button>
 </div>  -->
@@ -48,31 +48,31 @@ showCaptions="true"
 <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">Project Count</h5></mat-card-title>
+    <mat-card-title><h5 class="mt-0 mb-1 text-center">Support Recieved</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-1 mb-1">
          <div fxFlex="50">
-               <h2 class="mt-0" style="color: #f9a22b !important;"><span>23,8</span>K</h2>
+               <h2 class="mt-0 logo_one" style="color: #f9a22b !important;"><span>1000+</span></h2>
-               <p>Construction</p>
+               <p>Desktop Computers</p>
             </div>
             <div fxFlex="50">
-               <h2 class="mt-0" style="color: #000000 !important;"><span>23,000</span>K</h2>
+               <h2 class="mt-0 logo_one" style="color: #000000 !important;"><span>75+</span></h2>
-               <p>Construction</p>
+               <p>Smart Boards</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>
+                  <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>80+</span></h2>
-                  <p>Construction</p>
+                  <p>Televisions</p>
                </div>
                <div fxFlex="50">
-                  <h2 class="mt-0" style="color: #a978e0 !important;"><span>30,000</span>K</h2>
+                  <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>50+</span></h2>
-                  <p>Construction</p>
+                  <p>Printers</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>
+                  <button mat-stroked-button class="text button" [routerLink]="['/contribute']"><span>Contribute</span></button>
                </div>
          </div>
 </div>

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

@@ -708,20 +708,14 @@ hr{
     text-align: center;
   }
   
-  .container:hover .image {
+//   .container:hover .image {
-    opacity: 0.3;
+//     opacity: 0.3;
-  }
+//   }
   
-  .container:hover .middle {
+//   .container:hover .middle {
-    opacity: 1;
+//     opacity: 1;
-  }
+//   }
   
-  .text {
-    background-color: rgb(81, 202, 202);
-    color: white;
-    font-size: 16px;
-    // padding: 16px 32px;
-  }
   .html,body{
       height: 100%;
 
@@ -758,3 +752,49 @@ html body{
     padding:0;
     width: 100%;
 }
+.text {
+    border-radius: 4px;
+    background-color: #e91e63;
+    border: none;
+    color: #FFFFFF;
+    text-align: center;
+    font-size: 18px;
+    padding: 5px;
+    width: 200px;
+    transition: all 0.5s;
+    cursor: pointer;
+  }
+  
+  .text span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+  }
+  
+  .text span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+  }
+  
+  .text:hover span {
+    padding-right: 25px;
+  }
+  
+  .text:hover span:after {
+    opacity: 1;
+    right: 0;
+  }
+  .logo_one {
+    transition: transform 1.5s;    
+  }
+  .logo_one:hover, .logo_one:focus {
+    transform: scale3d(1.186, 1.186, 2);
+  }
+  .logo_one:hover::after, .logo_one:focus::after {
+    opacity: 1;
+  }

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

@@ -53,27 +53,27 @@ export class DashboardComponent {
   imageSources=[{
     // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56748793/dbohn_170625_1801_0018.0.0.jpg',
     url:'assets/images/csr-img/s1.jpg',
-    caption:'First'
+    // caption:'First'
   },
   {
     // url:'https://cdn.vox-cdn.com/uploads/chorus_asset/file/9278671/jbareham_170917_2000_0124.jpg',
     url:'assets/images/csr-img/s2.jpg',
-    caption:'Second'
+    // caption:'Second'
   },
   {
     // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56789263/akrales_170919_1976_0104.0.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'
+    // 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'
+    // caption:'Third'
   }
 ]