job page

src/app/components/add-jobs/add-jobs.component.html

@@ -6,7 +6,7 @@
 <!--REQ_STRING(in, "description", 5, 299, "(.*)");-->
 <!--REQ_STRING (in, "job_detail",  4, 1440, "(.*)");-->
 
-<div>
+<div style="padding: 5px;">
     <ion-list>
         <ion-item>
             <ion-textarea label="Title"

src/app/pages/joblist/joblist.page.html

@@ -94,16 +94,56 @@
 
 <div *ngIf="isModalOpenBackdrop==true">
   <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
-  <ion-modal class="common_modal_addjob" [isOpen]="isModalOpen"><ng-template>
-    <ion-header  class="modal-head">
+  <ion-modal class="common_modal" [isOpen]="isModalOpen"><ng-template>
+    <!-- <ion-header  class="modal-head">
       <ion-toolbar>
         <ion-title>Add Job</ion-title>
         <ion-buttons slot="end">
           <ion-button (click)="setCloseModal()">Close</ion-button>
         </ion-buttons>
       </ion-toolbar>
+    </ion-header> -->
+    <ion-header>
+      <div style="width:100%;">
+        <ion-grid style="width: 100%;">
+          <ion-row>
+            <ion-col style="font-weight: bold; color: rgba(10, 103, 124, 0.888);">
+              Add Job
+            </ion-col>
+            <ion-col style="width:40px; text-align: right; padding: 0px;">
+              <ion-button 
+              color="danger" 
+              fill="clear" 
+              size="small" 
+              (click)="setCloseModal()">
+                <!-- <ion-icon slot="icon-only" name="star"></ion-icon> -->
+                <ion-icon slot="icon-only"  name="close-circle-outline"></ion-icon>
+              </ion-button>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </div>
     </ion-header>
+
     <ion-content class="ion-padding">
+      <!-- <div style="width:100%;">
+        <ion-grid style="width: 100%;">
+          <ion-row>
+            <ion-col style="font-weight: bold; color: rgba(10, 103, 124, 0.888);">
+              Add Job
+            </ion-col>
+            <ion-col style="width:40px; text-align: right; padding: 0px;">
+              <ion-button 
+              color="danger" 
+              fill="clear" 
+              size="small" 
+              (click)="setCloseModal()">
+                <ion-icon slot="icon-only"  name="close-circle-outline"></ion-icon>
+              </ion-button>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </div> -->
       <app-add-jobs></app-add-jobs>
     </ion-content>
     <ion-footer>

src/app/pages/joblist/joblist.page.scss

@@ -386,15 +386,15 @@ ion-footer {
   }
 }
 
-.common_modal_addjob{
-  background-color: aliceblue;
-  //height: 99%;
-  max-width: 320px;
-  min-width: 300px ;
-  min-height: 490px;
-  max-height: 550px;
-  border-radius: 20px;
-  margin: auto;
+// .common_modal_addjob{
+//   background-color: aliceblue;
+//   //height: 99%;
+//   max-width: 320px;
+//   min-width: 300px ;
+//   min-height: 490px;
+//   max-height: 550px;
+//   border-radius: 20px;
+//   margin: auto;
 
-}
+// }
 

src/global.scss

@@ -301,6 +301,20 @@ ion-content{
   max-height: 550px;
   border-radius: 20px;
   margin: auto;
+
+  .modal-head{
+    padding: 0px;
+    height: 45px  !important;
+    color: white;
+    font-weight: bolder;
+    font-size: 18px;
+    ion-toolbar{
+      height: 45px !important;
+      ion-title{
+        height: 45px !important;
+      }
+    }
+  }
 }
 
 
@@ -313,15 +327,3 @@ ion-backdrop {
 height: 45px;
   background-color: green;
 }
-.modal-head{
-  height: 45px  !important;
-  color: white;
-  font-weight: bolder;
-  font-size: 18px;
-  ion-toolbar{
-    height: 45px !important;
-    ion-title{
-      height: 45px !important;
-    }
-  }
-}