suggest pages

src/app/components/suggestedlist/suggestedlist.component.html

@@ -3,8 +3,8 @@
   <ion-grid class="fam1">
     <ion-row>
       <ion-col class="famleft"></ion-col>
-      <ion-col>
-        <ion-button shape="round" (click)="suggestNewTasks()">Suggested Tasks</ion-button>
+      <ion-col class="mid_place">
+        <ion-button shape="round" (click)="suggestNewTasks()" fill="outline">Suggested Tasks</ion-button>
       </ion-col>
     </ion-row>
   </ion-grid>

src/app/components/suggestedlist/suggestedlist.component.scss

@@ -367,6 +367,10 @@ ion-content {
     height: 130px;
     border-radius: 10px 0px 0px 10px;
   }
+  .mid_place{
+    margin: auto;
+    text-align: center;
+  }
 }
 
 ion-footer {

src/app/pages/suggest/suggest.page.html

@@ -1,11 +1,16 @@
 
+<ion-header mode="ios" class="ion-no-border">
+    <ion-toolbar>
+        <ion-buttons slot="end">
+            <!--      <ion-button>-->
+            <!--        <ion-icon name="search-outline"></ion-icon>-->
+            <!--      </ion-button>-->
+        </ion-buttons>
+        <ion-title>Suggest Task(s)</ion-title>
+    </ion-toolbar>
+</ion-header>
+
 <ion-content>
-  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'">
-    <div class="ion-padding">
-      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
-    </div>
-  </div>
-
   <div class="ion-padding">
     <div class="boxed_contents">
       <div class="flex">
@@ -77,6 +82,51 @@
 
     </div>
   </div>
+
+    <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
+        <ng-template>
+            <ion-header>
+                <ion-toolbar>
+<!--                    <ion-buttons slot="start">-->
+<!--                        <ion-button (click)="cancel()">Cancel</ion-button>-->
+<!--                    </ion-buttons>-->
+                    <ion-title>Suggest Task</ion-title>
+<!--                    <ion-buttons slot="end">-->
+<!--                        <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>-->
+<!--                    </ion-buttons>-->
+                </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+
+                <ion-card>
+                    <img alt="{{modalSeleted.title}}" src="https://www.wrenchboard.com/assets/images/apps/family/{{modalSeleted.banner}}" />
+                    <ion-card-header>
+<!--                        <ion-card-title>{{modalSeleted.title}}</ion-card-title>-->
+                        <ion-card-subtitle>{{modalSeleted.title}}</ion-card-subtitle>
+                    </ion-card-header>
+
+                    <ion-card-content>
+                        {{modalSeleted.description}}
+                    </ion-card-content>
+                </ion-card>
+
+
+            </ion-content>
+            <ion-footer>
+                <ion-toolbar>
+<!--                    <ion-buttons slot="start">-->
+<!--                        <ion-button (click)="cancel()" color="danger">Cancel</ion-button>-->
+<!--                    </ion-buttons>-->
+                    <ion-buttons slot="end">
+<!--                        <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>-->
+                        <ion-button (click)="cancel()" color="danger">Cancel</ion-button>
+
+                    </ion-buttons>
+                </ion-toolbar>
+            </ion-footer>
+        </ng-template>
+    </ion-modal>
+
 </ion-content>
 
 <!--<ion-footer>-->

src/app/pages/suggest/suggest.page.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import {NavController} from "@ionic/angular";
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {IonModal, NavController} from "@ionic/angular";
 import {Router} from "@angular/router";
 import {WrenchService} from "../../services/wrench.service";
 import {SessionDataProviderService} from "../../store/session-data-provider.service";
+import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-suggest',
@@ -10,7 +11,7 @@ import {SessionDataProviderService} from "../../store/session-data-provider.serv
   styleUrls: ['./suggest.page.scss'],
 })
 export class SuggestPage implements OnInit {
-
+    @ViewChild(IonModal) modal: IonModal;
 
   tabs = 'about';
 
@@ -65,8 +66,29 @@ export class SuggestPage implements OnInit {
     );
 
   }
-
+modalSeleted:any;
     suggestDetails(item){
+        this.modalSeleted =  item;
+this.modal.present();
+    }
 
+
+
+    message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
+    name: string;
+
+    cancel() {
+        this.modal.dismiss(null, 'cancel');
+    }
+
+    confirm() {
+        this.modal.dismiss(this.name, 'confirm');
+    }
+
+    onWillDismiss(event: Event) {
+        const ev = event as CustomEvent<OverlayEventDetail<string>>;
+        if (ev.detail.role === 'confirm') {
+            this.message = `Hello, ${ev.detail.data}!`;
+        }
     }
 }