From 545b2058160c9f7a1df3e916732f8169a687ba91 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Sat, 29 Jun 2024 13:21:11 -0400
Subject: [PATCH] fix layout

---
 .../pages/marketdetail/marketdetail.page.scss |   1 +
 src/app/pages/mytasks/mytasks.page.html       | 156 ++++++++++++------
 2 files changed, 106 insertions(+), 51 deletions(-)

diff --git a/src/app/pages/marketdetail/marketdetail.page.scss b/src/app/pages/marketdetail/marketdetail.page.scss
index 712bf38..281fafb 100644
--- a/src/app/pages/marketdetail/marketdetail.page.scss
+++ b/src/app/pages/marketdetail/marketdetail.page.scss
@@ -3,6 +3,7 @@ ion-content {
   .back_image {
     width: 100%;
     height: 150px;
+    max-height: 150px;
     background-size: contain;
     background-repeat: no-repeat;
     border-radius: 20px;
diff --git a/src/app/pages/mytasks/mytasks.page.html b/src/app/pages/mytasks/mytasks.page.html
index 6a66787..85cd8c9 100644
--- a/src/app/pages/mytasks/mytasks.page.html
+++ b/src/app/pages/mytasks/mytasks.page.html
@@ -25,6 +25,14 @@
       </ion-segment-button>
     </ion-segment>
 
+
+    <div *ngIf="tabs =='tasks'"  class="lesson">
+      <div class="flex">
+        <ion-label class="bold">Available Task(s)</ion-label>
+      </div>
+
+    </div>
+
     <div *ngIf="tabs =='tasks'" class="lesson">
       <div *ngIf="active_job_count == 0 && active_offers_count == 0 ">
         <ion-card style="background-color: #f4f1f0;">
@@ -54,30 +62,45 @@
         <ion-button (click)="startOfferPage()"  style="margin-top: 5px;" expand="block" shape="round" color="secondary">Start Now</ion-button>
       </div>
 
-      <div class="chat" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
-        <div class="flex">
-          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>
-          <div style="margin-left: 10px;">
-            <ion-label class="bold_text"> {{item.title}}</ion-label>
-            <div style="display: flex;">
-              <div class="grey_text" [innerHTML]="item.job_description"></div>
-            </div>
-            <ion-label>{{item.price*0.01}} {{item.currency}}</ion-label>
-            <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>
+      <div class="video" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
+<!--        <div class="video" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">-->
+          <div class="left">
+            <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>
 
-            <div>
+            <div class="text">
+              <div class="bold_text" [innerHTML]="item.title"></div>
+              <ion-label class="price_line"> Reward : {{item.price*0.01| number : '1.2-2'}} {{item.currency_code}}  </ion-label>
+              <ion-label class="due_date">Timeline: {{item.timeline_days}} days</ion-label>
             </div>
           </div>
-        </div>
-        <div class="column">
-          <ion-icon name="chevron-forward-outline"></ion-icon>
-          <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
-          <!--        <ion-label class="color_text"> 10</ion-label>-->
-        </div>
+          <div class="right">
+            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
+      </div>
+<!--        </div>-->
+
+<!--        <div class="flex">-->
+<!--          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>-->
+<!--          <div style="margin-left: 10px;">-->
+<!--            <ion-label class="bold_text"> {{item.title}}</ion-label>-->
+<!--            <div style="display: flex;">-->
+<!--              <div class="grey_text" [innerHTML]="item.job_description"></div>-->
+<!--            </div>-->
+<!--            <ion-label>{{item.price*0.01}} {{item.currency}}</ion-label>-->
+<!--            <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>-->
+
+<!--            <div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="column">-->
+<!--          <ion-icon name="chevron-forward-outline"></ion-icon>-->
+<!--          &lt;!&ndash;        <ion-label class="small_text"> 11:30 PM</ion-label>&ndash;&gt;-->
+<!--          &lt;!&ndash;        <ion-label class="color_text"> 10</ion-label>&ndash;&gt;-->
+<!--        </div>-->
       </div>
     </div>
 
-    <div *ngIf="tabs =='pastdue'">
+    <div *ngIf="tabs =='pastdue'"   class="lesson">
       <div *ngIf="pastdue_job_count == 0">
         <ion-card>
           <img alt="WrenchBoard Past Due" src="https://www.wrenchboard.com/assets/images/apps/pastdue-task.png" />
@@ -91,32 +114,47 @@
           </ion-card-content>
         </ion-card>
       </div>
-      <div class="chat" *ngFor="let item of jobsPastDueData;"  (click)="activeSeleted(item)">
-        <div class="flex">
+      <div class="video" *ngFor="let item of jobsPastDueData;"  (click)="activeSeleted(item)">
+        <div class="left">
           <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>
-          <div style="margin-left: 10px;">
-            <ion-label class="bold_text"> {{item.title}}</ion-label>
-            <div style="display: flex;">
-              <div class="grey_text" [innerHTML]="item.job_description"></div>
-<!--              <ion-label class="grey_text"> {{item.job_description}} </ion-label>-->
 
-            </div>
-            <div>
-<!--              <hr />-->
-              <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>
-              <ion-label *ngIf="item.ext_request !=''; " class="due_date"> Extension Request: {{item.ext_request | date}}</ion-label>
-            </div>
+          <div class="text">
+            <div class="bold_text" [innerHTML]="item.title"></div>
+            <ion-label class="price_line"> Reward : {{item.price*0.01| number : '1.2-2'}} {{item.currency_code}}  </ion-label>
+            <ion-label class="due_date">Timeline: {{item.timeline_days}} days</ion-label>
           </div>
         </div>
-        <div class="column">
-          <ion-icon name="chevron-forward-outline"></ion-icon>
-          <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
-          <!--        <ion-label class="color_text"> 10</ion-label>-->
+        <div class="right">
+          <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
         </div>
+
+
+<!--        <div class="flex">-->
+<!--          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>-->
+<!--          <div style="margin-left: 10px;">-->
+<!--            <ion-label class="bold_text"> {{item.title}}</ion-label>-->
+<!--            <div style="display: flex;">-->
+<!--              <div class="grey_text" [innerHTML]="item.job_description"></div>-->
+<!--&lt;!&ndash;              <ion-label class="grey_text"> {{item.job_description}} </ion-label>&ndash;&gt;-->
+
+<!--            </div>-->
+<!--            <div>-->
+<!--&lt;!&ndash;              <hr />&ndash;&gt;-->
+<!--              <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>-->
+<!--              <ion-label *ngIf="item.ext_request !=''; " class="due_date"> Extension Request: {{item.ext_request | date}}</ion-label>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="column">-->
+<!--          <ion-icon name="chevron-forward-outline"></ion-icon>-->
+<!--          &lt;!&ndash;        <ion-label class="small_text"> 11:30 PM</ion-label>&ndash;&gt;-->
+<!--          &lt;!&ndash;        <ion-label class="color_text"> 10</ion-label>&ndash;&gt;-->
+<!--        </div>-->
       </div>
     </div>
 
-    <div *ngIf="tabs =='review'">
+    <div *ngIf="tabs =='review'"  class="lesson">
+
       <div *ngIf="review_job_count == 0">
         <ion-card>
           <img alt="WrenchBoard Review" src="https://www.wrenchboard.com/assets/images/apps/review-task.png" />
@@ -132,26 +170,42 @@
       </div>
 
 
-      <div class="chat" *ngFor="let item of jobsInReviewData;"  (click)="activeSeleted(item)">
-        <div class="flex">
+      <div class="video" *ngFor="let item of jobsInReviewData;" (click)="activeSeleted(item)">
+        <!--        <div class="video" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">-->
+        <div class="left">
           <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>
-          <div style="margin-left: 10px;">
-            <ion-label class="bold_text"> {{item.title}}</ion-label>
-            <div style="display: flex;">
-              <div class="grey_text" [innerHTML]="item.job_description"></div>
-            </div>
-            <div>
-<!--              <hr />-->
-              <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>
-            </div>
+
+          <div class="text">
+            <div class="bold_text" [innerHTML]="item.title"></div>
+            <ion-label class="price_line"> Reward : {{item.price*0.01| number : '1.2-2'}} {{item.currency_code}}  </ion-label>
+            <ion-label class="due_date">Timeline: {{item.timeline_days}} days</ion-label>
           </div>
         </div>
-        <div class="column">
-          <ion-icon name="chevron-forward-outline"></ion-icon>
-          <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
-          <!--        <ion-label class="color_text"> 10</ion-label>-->
+        <div class="right">
+          <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
         </div>
       </div>
+
+<!--      <div class="video" *ngFor="let item of jobsInReviewData;"  (click)="activeSeleted(item)">-->
+<!--        <div class="flex">-->
+<!--          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></div>-->
+<!--          <div style="margin-left: 10px;">-->
+<!--            <ion-label class="bold_text"> {{item.title}}</ion-label>-->
+<!--            <div style="display: flex;">-->
+<!--              <div class="grey_text" [innerHTML]="item.job_description"></div>-->
+<!--            </div>-->
+<!--            <div>-->
+<!--&lt;!&ndash;              <hr />&ndash;&gt;-->
+<!--              <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="column">-->
+<!--          <ion-icon name="chevron-forward-outline"></ion-icon>-->
+<!--          &lt;!&ndash;        <ion-label class="small_text"> 11:30 PM</ion-label>&ndash;&gt;-->
+<!--          &lt;!&ndash;        <ion-label class="color_text"> 10</ion-label>&ndash;&gt;-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
 
   </div>