fix layout

This commit is contained in:
CHIEFSOFT\ameye
2024-06-29 13:21:11 -04:00
parent 143633be93
commit 545b205816
2 changed files with 106 additions and 51 deletions
@@ -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;
+105 -51
View File
@@ -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>