exta section

REMEMBER.txt

@@ -22,6 +22,9 @@ ionic generate page jobactive
 ionic generate component taskactivities
 ionic generate component suggestedlist
 
+ionic generate component extra2box
+
+
 ionic generate page addjob
 
 

src/app/components/familiy-dash/familiy-dash.component.ts

@@ -50,7 +50,10 @@ export class FamiliyDashComponent implements OnInit {
       this.pageItem.family_action = "";
       this.router.navigate(['family'],{state: {page_name: 0, family_action: ''}});
     });
-
+//
+    addEventListener('app_familiy_go_wallet', () => {
+      this.router.navigate(['tabs/tab4'],{state: {page_name: 0, family_action: ''}});
+    });
 
     this.bannerData = this.bannersDataService.bannerData;
     this.homebannerCount = this.bannersDataService.homebannerCount;

src/app/components/familycards/extra2box/extra2box.component.html

@@ -0,0 +1,14 @@
+<ion-grid class="extra-grid">
+  <ion-row>
+    <ion-col class="ext-col" (click)="lAction()">
+      <div class="ext-in l">
+        <div class="ban-text">Add Kids</div>
+      </div>
+    </ion-col>
+    <ion-col class="ext-col" (click)="rAction()">
+      <div class="ext-in r">
+        <div class="ban-text">Wallet</div>
+      </div>
+    </ion-col>
+  </ion-row>
+</ion-grid>

src/app/components/familycards/extra2box/extra2box.component.scss

@@ -0,0 +1,35 @@
+.extra-grid{
+  margin: 10px 0px 10px 0px;
+  padding: 0px;
+  height: 150px;
+  .ext-col{
+    padding: 5px;
+
+    //background-color: #2dd36f;
+    height: 150px;
+    .ext-in{
+      &.l{
+        background-image: linear-gradient(to right, #1f1f3b, #152f49,#152f49,#1f1f3b);
+        color: white;
+      }
+      &.r{
+        background-image: linear-gradient(to right, #866508, #906D0B,#866508);
+        color: white;
+      }
+      background-color: antiquewhite;
+      height: 140px;
+      border-radius: 10px;
+
+      box-shadow: 1px 1px lightgray;
+      text-align: center;
+
+      .ban-text{
+        font-size: 24px;
+        font-weight: bolder;
+        padding-top: 80px;
+        // color: #8b198e;
+      }
+
+    }
+  }
+}

src/app/components/familycards/extra2box/extra2box.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { Extra2boxComponent } from './extra2box.component';
+
+describe('Extra2boxComponent', () => {
+  let component: Extra2boxComponent;
+  let fixture: ComponentFixture<Extra2boxComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Extra2boxComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Extra2boxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/familycards/extra2box/extra2box.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-extra2box',
+  templateUrl: './extra2box.component.html',
+  styleUrls: ['./extra2box.component.scss'],
+})
+export class Extra2boxComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  lAction(){
+    dispatchEvent(new Event("app_familiy_nokids_action"));
+  }
+  rAction(){
+    dispatchEvent(new Event("app_familiy_go_wallet"));
+  }
+}

src/app/components/familycards/familiy-notask/familiy-notask.component.html

@@ -7,17 +7,17 @@
     </ion-col>
   </ion-row>
 </ion-grid>
-<ion-grid class="extra-grid">
+<!--<ion-grid class="extra-grid">-->
-  <ion-row>
+<!--  <ion-row>-->
-    <ion-col class="ext-col">
+<!--    <ion-col class="ext-col">-->
-      <div class="ext-in">
+<!--      <div class="ext-in">-->
-        AAAA
+<!--        AAAA-->
-      </div>
+<!--      </div>-->
-    </ion-col>
+<!--    </ion-col>-->
-    <ion-col class="ext-col">
+<!--    <ion-col class="ext-col">-->
-      <div class="ext-in">
+<!--      <div class="ext-in">-->
-        BBB
+<!--        BBB-->
-      </div>
+<!--      </div>-->
-    </ion-col>
+<!--    </ion-col>-->
-  </ion-row>
+<!--  </ion-row>-->
-</ion-grid>
+<!--</ion-grid>-->

src/app/components/familycards/fastreward/fastreward.component.html

@@ -24,17 +24,19 @@
     </div>
   </ion-card-content>
 </ion-card>
-<ion-grid class="extra-grid">
+<app-extra2box></app-extra2box>
-  <ion-row>
+
-    <ion-col class="ext-col">
+<!--<ion-grid class="extra-grid">-->
-      <div class="ext-in">
+<!--  <ion-row>-->
-        <div class="ban-text">Add Kids</div>
+<!--    <ion-col class="ext-col">-->
-      </div>
+<!--      <div class="ext-in">-->
-    </ion-col>
+<!--        <div class="ban-text">Add Kids</div>-->
-    <ion-col class="ext-col">
+<!--      </div>-->
-      <div class="ext-in">
+<!--    </ion-col>-->
-        <div class="ban-text">Wallet</div>
+<!--    <ion-col class="ext-col">-->
-      </div>
+<!--      <div class="ext-in">-->
-    </ion-col>
+<!--        <div class="ban-text">Wallet</div>-->
-  </ion-row>
+<!--      </div>-->
-</ion-grid>
+<!--    </ion-col>-->
+<!--  </ion-row>-->
+<!--</ion-grid>-->

src/app/components/familycards/fastreward/fastreward.component.scss

@@ -1,6 +1,7 @@
 ion-card {
   margin: 20px 0px 0px 0px;
   background-color: #4e0650;
+  box-shadow: 1px 1px lightgray;
   color: white;
   ion-card-title {
     color: white;
@@ -19,7 +20,7 @@ ion-card {
       background-color: antiquewhite;
       height: 140px;
       border-radius: 10px;
-      box-shadow: 2px 2px;
+      box-shadow: 1px 1px lightgray;
       text-align: center;
       .ban-text{
         font-size: 24px;

src/app/pages/home/home-routing.module.ts

@@ -10,6 +10,8 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { HomePage } from './home.page';
+import {Extra2boxComponent} from "../../components/familycards/extra2box/extra2box.component";
+import {IonicModule} from "@ionic/angular";
 
 const routes: Routes = [
   {
@@ -19,7 +21,10 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [RouterModule.forChild(routes), IonicModule],
-  exports: [RouterModule],
+  exports: [RouterModule, Extra2boxComponent],
+  declarations: [
+    Extra2boxComponent
+  ]
 })
 export class HomePageRoutingModule { }