New segment style

This commit is contained in:
CHIEFSOFT\ameye
2023-11-04 08:08:59 -04:00
parent b34ef2850a
commit 857117ae34
14 changed files with 98 additions and 49 deletions
@@ -57,10 +57,10 @@
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/wrench.jpg)'"></div>
<div style="margin-left: 10px; margin-top: 10px">
<!-- <ion-label class="bold">Jonathon Williams</ion-label>-->
<ion-label class="grey">{{blogData.post_date}}</ion-label>
<ion-label class="grey">{{blogData.post_date | date}}</ion-label>
</div>
</div>
<ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>
<!-- <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>-->
</div>
<!-- <ion-label class="head_text">About Course</ion-label>-->
+44 -25
View File
@@ -38,7 +38,7 @@
<!-- </div>-->
</div>
<ion-segment [(ngModel)]="tabs">
<ion-segment class="common_segment" [(ngModel)]="tabs">
<ion-segment-button value="members">
<ion-label>Members ({{total_family}})</ion-label>
</ion-segment-button>
@@ -46,14 +46,15 @@
<ion-label>Tasks ({{family_active}})</ion-label>
</ion-segment-button>
<ion-segment-button value="pending">
<ion-label>Pending {{suggestion_total}} </ion-label>
<ion-label>Pending ({{suggestion_total}}) </ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="tabs =='members'" class="lesson">
<div class="video" *ngFor="let item of familyData" (click)="familyMemebr(item)">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/familymember.svg)'"></div>
<div class="bg_image men_image" [style.backgroundImage]="'url('+item.profile_picture+')'"></div>
<div class="text">
<ion-label class="bold_text">{{item.firstname}} {{item.lastname}} ({{item.age}})</ion-label>
@@ -64,6 +65,7 @@
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
</div>
<div *ngIf="tabs =='lesson'" class="lesson">
@@ -94,7 +96,7 @@
</div>
<div *ngIf="tabs =='pending'" class="review_tab">
<div *ngIf="tabs =='pending'" class="lesson">
<div *ngIf="suggestion_total == 0">
<ion-card>
@@ -120,31 +122,48 @@
<!-- <ion-label class="color">See all</ion-label>-->
</div>
<div class="reviw_list" *ngFor="let item of familyPendingData">
<div class="profile">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold">{{item.title}}</ion-label>
</div>
</div>
<div class="right">
<div class="select">
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<ion-label class="rate_num">{{item.status_text}}</ion-label>
</div>
<!-- <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
<div class="video" *ngFor="let item of familyPendingData" >
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div class="text">
<ion-label class="bold_text name_bg_text">{{item.firstname}} </ion-label>
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="grey_text">{{item.description}}</ion-label>
<ion-label class="extra_text"><span class="title">Added:</span> {{item.added}}</ion-label>
<ion-label class="extra_text"><span class="title">Status:</span> {{item.status_text}}</ion-label>
</div>
</div>
<ion-label>{{item.description}}
</ion-label>
<div class="like">
<!-- <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
<ion-label class="name_bg_text">{{item.firstname}} </ion-label>
<ion-label class="time">{{item.added}}</ion-label>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
<!-- <div class="reviw_list" *ngFor="let item of familyPendingData">-->
<!-- <div class="profile">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>-->
<!-- <div style="margin-left: 10px;">-->
<!-- <ion-label class="bold">{{item.title}}</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- <div class="select">-->
<!-- &lt;!&ndash; <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>&ndash;&gt;-->
<!-- <ion-label class="rate_num">{{item.status_text}}</ion-label>-->
<!-- </div>-->
<!-- &lt;!&ndash; <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- <ion-label>{{item.description}}-->
<!-- </ion-label>-->
<!-- <div class="like">-->
<!-- &lt;!&ndash; <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>&ndash;&gt;-->
<!-- <ion-label class="name_bg_text">{{item.firstname}} </ion-label>-->
<!-- <ion-label class="time">{{item.added}}</ion-label>-->
<!-- </div>-->
<!-- </div>-->
</div>
<!-- <div class="story-item">-->
+13 -4
View File
@@ -1,14 +1,13 @@
ion-content {
.name_bg_text{
background-color:aliceblue;;
font-size: 10px;
padding-right: 5px;
color: #8b198e;
font-weight: bolder;
}
.back_image {
margin-top: 10px;
width: 100%;
height: 230px;
height: 200px;
.back {
font-size: 25px;
@@ -16,6 +15,16 @@ ion-content {
}
}
.extra_text{
font-size: 11px;
margin-left: 20px;
.title{
font-weight: bolder;
color: #030728;
}
}
.due_date{
color: red;
font-size: 12px;
@@ -40,7 +40,7 @@
<!-- </div>-->
</div>
<ion-segment [(ngModel)]="tabs">
<ion-segment class="common_segment" [(ngModel)]="tabs">
<ion-segment-button value="about">
<ion-label>Task</ion-label>
</ion-segment-button>
@@ -86,7 +86,7 @@
<ion-row>
<ion-col>
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/task-list.svg)'"></div>
<div class="bg_image men_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/currency/'+item.description.toLowerCase()+'.svg)'"></div>
<div class="text">
<ion-label class="bold_text"> {{item.amount*0.01 | number : '1.2-2'}} {{item.description}}</ion-label>
</div>
@@ -187,12 +187,13 @@
<ion-label class="dark_text">{{member_pin}}</ion-label>
</div>
<div class="flex">
<qrcode
[qrdata]="member_qr_string"
[width]="256"
[errorCorrectionLevel]="'M'">
</qrcode>
<div class="qr-div">
<qrcode
[qrdata]="member_qr_string"
[width]="256"
[errorCorrectionLevel]="'M'">
</qrcode>
</div>
</div>
</div>
@@ -45,6 +45,11 @@ ion-content {
ion-icon {
font-size: 22px;
}
qr-div{
width: 100%;
text-align: center;
margin: 0px auto 0px auto;
}
}
.row {
@@ -122,6 +127,7 @@ ion-content {
height: 50px;
width: 50px;
border-radius: 100%;
color: #3dc2ff;
}
.bold {
+2 -1
View File
@@ -39,7 +39,7 @@ ion-header {
}
}
.top-tool{
--background: #f1eeeb;
--background: #eceae9;
border-radius: 10px;
ion-buttons{
ion-button{
@@ -383,6 +383,7 @@ ion-content {
text-align: center;
height: 38px;
width: 100%;
overflow: hidden;
.ovf{
overflow: hidden;
}
@@ -34,7 +34,7 @@
<!-- </div>-->
</div>
<ion-segment [(ngModel)]="tabs">
<ion-segment class="common_segment" [(ngModel)]="tabs">
<ion-segment-button value="about">
<ion-label>Details</ion-label>
</ion-segment-button>
+1 -1
View File
@@ -12,7 +12,7 @@
<ion-content class="ion-padding">
<div class="boxed_contents">
<ion-segment [(ngModel)]="tabs">
<ion-segment class="common_segment" [(ngModel)]="tabs">
<ion-segment-button value="on">
<ion-label>Available</ion-label>
</ion-segment-button>
+1 -1
View File
@@ -39,7 +39,7 @@
<!-- </div>-->
</div>
<ion-segment [(ngModel)]="tabs">
<ion-segment class="common_segment" [(ngModel)]="tabs">
<ion-segment-button value="about">
<ion-label>Pending</ion-label>
</ion-segment-button>
+1 -1
View File
@@ -13,7 +13,7 @@
<ion-content class="ion-padding">
<div class="boxed_contents">
<ion-segment [(ngModel)]="tabs">
<ion-segment class="common_segment" [(ngModel)]="tabs">
<ion-segment-button value="tasks">
<ion-label>Active</ion-label>
</ion-segment-button>
+1 -1
View File
@@ -13,7 +13,7 @@
<ion-label class="color_text">Balance: {{curr_balance| number : '1.2-2'}} {{currency_description}}</ion-label>
<ion-segment [(ngModel)]="tabs">
<ion-segment class="common_segment" [(ngModel)]="tabs">
<ion-segment-button value="bank_redeem">
<ion-label>To Bank</ion-label>
</ion-segment-button>
@@ -48,7 +48,7 @@
<div class="video wallets" *ngFor="let item of walletData">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/money-cycle.svg)'"></div>
<div class="bg_image men_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/currency/'+item.code.toLowerCase()+'.svg)'"></div>
</div>
<div class="text">
<ion-label class="bold_text">{{item.description}}</ion-label>
@@ -65,6 +65,7 @@ export class SessionDataProviderService {
isPedningJob: number = 0;
isOfferJob: number = 0;
profile_pic:string='';
profile_pic_url:string='';
member_uid:string;
user_state:string;
city:string;
@@ -98,6 +99,7 @@ export class SessionDataProviderService {
this.balance = loginResult.balance;
this.ccard=loginResult.ccard;
this.profile_pic=loginResult.profile_pic;
this.profile_pic_url = loginResult.profile_pic_url;
this.isPedningJob = loginResult.pedningjob;
this.isOfferJob = loginResult.offerjob;
this.user_state=loginResult.state;
@@ -186,8 +188,9 @@ export class SessionDataProviderService {
profilePicture(){
var defualtProfilePicture = "https://www.wrenchboard.com/assets/images/profile.jpg";
var profile_p = '';
if (this.profile_pic !=''){
profile_p="https://www.wrenchboard.com/smedia/LIVE/profile/"+this.profile_pic;
if (this.profile_pic_url !=''){
//profile_p="https://www.wrenchboard.com/smedia/LIVE/profile/"+this.profile_pic;
profile_p = this.profile_pic_url;
}
else{
profile_p = defualtProfilePicture;
+11 -1
View File
@@ -233,4 +233,14 @@ ion-content{
.scan_login_button{
font-size: 16px;
font-weight: bolder;
}
}
.common_segment{
background-color: #3dc2ff;
font-weight: bolder;
ion-segment-button{
ion-label{
font-weight: bolder;
}
}
}