suggest actions

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

@@ -1,9 +1,11 @@
 
 <div *ngIf = "suggested_count == 0; else elseFulltag">
+
   <ion-grid class="fam1">
     <ion-row>
       <ion-col class="famleft"></ion-col>
       <ion-col class="mid_place">
+        <ion-label class="sug_text">You have "0" suggested task.</ion-label>
         <ion-button shape="round" (click)="suggestNewTasks()" fill="outline">Suggested Tasks</ion-button>
       </ion-col>
     </ion-row>

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

@@ -10,6 +10,8 @@ ion-content {
     }
   }
 
+
+
   .flex {
     display: flex;
     justify-content: space-between;
@@ -358,6 +360,7 @@ ion-content {
 .fam1{
   margin:10px 0px 10px 0px;
   background-color: aliceblue;
+  border-radius: 10px;
   min-height: 100px;
   .famleft{
     background-image: url("https://www.wrenchboard.com/assets/images/apps/family/kids-waiting.jpg");
@@ -370,6 +373,11 @@ ion-content {
   .mid_place{
     margin: auto;
     text-align: center;
+    .sug_text{
+      font-weight: bolder;
+      font-size: 14px;
+      padding: 5px;
+    }
   }
 }
 

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

@@ -59,7 +59,7 @@
           <ion-grid>
               <ion-row>
                   <ion-col size="6" size-md="4" size-lg="2"  *ngFor="let item of sampleSuggestData; let i = index" (click)="suggestDetails(item)" >
-                      <ion-card >
+                      <ion-card>
                           <img alt="{{item.post_title}}" src="https://www.wrenchboard.com/assets/images/apps/family/{{item.banner}}" />
                           <ion-card-content class="blog_text">
 
@@ -99,7 +99,7 @@
             <ion-content class="ion-padding">
 
                 <ion-card>
-                    <img alt="{{modalSeleted.title}}" src="https://www.wrenchboard.com/assets/images/apps/family/{{modalSeleted.banner}}" />
+                    <img class="back_image_sug" 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>
@@ -107,23 +107,36 @@
 
                     <ion-card-content>
                         {{modalSeleted.description}}
+
+                        <ion-toolbar>
+                            <ion-buttons slot="start">
+                                <ion-button color="danger"  (click)="cancel()">Cancel</ion-button>
+                            </ion-buttons>
+<!--                            <ion-title>Buttons</ion-title>-->
+                            <ion-buttons slot="end">
+                                <ion-button color="secondary" (click)="sendSuggestedTask()">Send</ion-button>
+                            </ion-buttons>
+                        </ion-toolbar>
+
+
                     </ion-card-content>
                 </ion-card>
 
-
+<!--                <ion-button fill="clear">Action 1</ion-button>-->
+<!--                <ion-button fill="clear">Send</ion-button>-->
             </ion-content>
-            <ion-footer>
-                <ion-toolbar>
-<!--                    <ion-buttons slot="start">-->
+<!--            <ion-footer>-->
+<!--                <ion-toolbar>-->
+<!--&lt;!&ndash;                    <ion-buttons slot="start">&ndash;&gt;-->
+<!--&lt;!&ndash;                        <ion-button (click)="cancel()" color="danger">Cancel</ion-button>&ndash;&gt;-->
+<!--&lt;!&ndash;                    </ion-buttons>&ndash;&gt;-->
+<!--                    <ion-buttons slot="end">-->
+<!--&lt;!&ndash;                        <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>&ndash;&gt;-->
 <!--                        <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>
+<!--                    </ion-buttons>-->
+<!--                </ion-toolbar>-->
+<!--            </ion-footer>-->
         </ng-template>
     </ion-modal>
 

src/app/pages/suggest/suggest.page.scss

@@ -10,6 +10,20 @@ ion-content {
     }
   }
 
+  .back_image_sug {
+    width: auto;
+    height: 130px;
+    margin: auto;
+    padding: 10px;
+    text-align: center;
+
+    .back {
+      font-size: 25px;
+      color: white;
+    }
+  }
+
+
   .flex {
     display: flex;
     justify-content: space-between;
@@ -401,3 +415,9 @@ ion-grid{
   }
 }
 
+ion-modal{
+  ion-card{
+    margin: 0px;
+  }
+}
+

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

@@ -69,9 +69,13 @@ export class SuggestPage implements OnInit {
 modalSeleted:any;
     suggestDetails(item){
         this.modalSeleted =  item;
-this.modal.present();
+        this.modal.present();
     }
 
+    sendSuggestedTask(){
+
+        this.cancel();
+    }
 
 
     message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';