design fixes and change correct address

Fatima-Q2-June
Sultan Khan 5 years ago
parent 675cdc06b6
commit 0e19eb555f

@ -17,6 +17,7 @@
<div class="header"></div> <div class="header"></div>
<div class="bottom"></div> <div class="bottom"></div>
<div class="md-stepper-horizontal "> <div class="md-stepper-horizontal ">
<ion-row>
<ion-col size="4"> <div class="md-step active " [ngClass]="step >1 ? 'green' : 'orange'"> <ion-col size="4"> <div class="md-step active " [ngClass]="step >1 ? 'green' : 'orange'">
<div class="md-step-circle"><span style="content: url(/assets/imgs/check-white.svg)"></span></div> <div class="md-step-circle"><span style="content: url(/assets/imgs/check-white.svg)"></span></div>
<div class="md-step-title">{{ts.trPK('itemforsale','select-category')}}</div> <div class="md-step-title">{{ts.trPK('itemforsale','select-category')}}</div>
@ -25,6 +26,7 @@
<!-- <div class="md-step-bar-right" [ngClass]="step ==1 ? 'orange-border' : 'green-border'"></div> --> <!-- <div class="md-step-bar-right" [ngClass]="step ==1 ? 'orange-border' : 'green-border'"></div> -->
</div> </div>
</ion-col> </ion-col>
<ion-col size="4"> <div class="md-step" [ngClass]="step >2 ? 'green' : step ==2 ? 'orange' : 'grey'"> <ion-col size="4"> <div class="md-step" [ngClass]="step >2 ? 'green' : step ==2 ? 'orange' : 'grey'">
<div class="md-step-circle"><span *ngIf="step==1" style="content: url(/assets/imgs/check.svg)"></span> <div class="md-step-circle"><span *ngIf="step==1" style="content: url(/assets/imgs/check.svg)"></span>
<span *ngIf="step>2 || step==2" style="content: url(/assets/imgs/check-white.svg)"> <span *ngIf="step>2 || step==2" style="content: url(/assets/imgs/check-white.svg)">
@ -44,6 +46,7 @@
<div class="md-step-bar-left"></div> <div class="md-step-bar-left"></div>
</div></ion-col> </div></ion-col>
</ion-row>
</div> </div>
<div class="content"> <div class="content">
@ -77,7 +80,7 @@
<ion-col size="4"> <ion-col size="4">
<div class="sale-icon"> <div class="sale-icon">
<div class="top"> <div class="top">
<img src="/assets/imgs/itemsforsale/electronic appliances.svg"> <img src="/assets/imgs/itemsforsale/electronic_appliances.svg">
</div> </div>
<div class="bottom-icon"> <div class="bottom-icon">
<p>Electronic Applicance</p> <p>Electronic Applicance</p>
@ -183,7 +186,7 @@
<div class="image-container"> <div class="image-container">
<div class="uploaded"> <div class="uploaded">
<div class="closed">X</div> <div class="closed">X</div>
<img src="assets/imgs/itemsforsale/fashion .svg" /> <img src="assets/imgs/itemsforsale/fashion.svg" />
</div> </div>
</div> </div>
@ -192,7 +195,7 @@
<div class="image-container"> <div class="image-container">
<div class="uploaded"> <div class="uploaded">
<div class="closed">X</div> <div class="closed">X</div>
<img src="assets/imgs/itemsforsale/fashion .svg" /> <img src="assets/imgs/itemsforsale/fashion.svg" />
</div> </div>
</div> </div>
@ -229,15 +232,15 @@
<div class="description-details"> <div class="description-details">
<p class="orange">Used</p> <p class="orange">Used</p>
<img src="assets/imgs/itemsforsale/fashion .svg" /> <img src="assets/imgs/itemsforsale/fashion.svg" />
<img src="assets/imgs/itemsforsale/fashion .svg" /> <img src="assets/imgs/itemsforsale/fashion.svg" />
<div class="selling"> <div class="selling">
<strong>Selling for </strong> <h2>500 SAR</h2> <strong>Selling for </strong> <h2>500 SAR</h2>
</div> </div>
<div class="waring"> <div class="waring">
<img src="/assets/imgs/itemsforsale/alert.svg"> This ad will be valid for 2 week after approval <img src="/assets/imgs/itemsforsale/alert.svg"> <label>This ad will be valid for 2 week after approval</label>
</div> </div>
</div> </div>

@ -10,9 +10,9 @@
border-radius: 25px; border-radius: 25px;
} }
.md-stepper-horizontal .md-step { .md-stepper-horizontal .md-step {
display:table-cell; display: table-cell;
position:relative; position: relative;
padding:20px 15px; padding: 20px 10px;
text-align: left; text-align: left;
} }
.md-stepper-horizontal .md-step:hover, .md-stepper-horizontal .md-step:hover,
@ -48,7 +48,7 @@
z-index: 3; z-index: 3;
} }
.md-stepper-horizontal .md-step:last-child .md-step-circle { .md-stepper-horizontal .md-step:last-child .md-step-circle {
margin-left:20px margin-left:0px
} }
.md-stepper-horizontal.green .md-step.active .md-step-circle { .md-stepper-horizontal.green .md-step.active .md-step-circle {
background-color:#00AE4D; background-color:#00AE4D;
@ -88,6 +88,7 @@ margin-left:20px
.md-stepper-horizontal .md-step .md-step-optional { .md-stepper-horizontal .md-step .md-step-optional {
text-align: center; text-align: center;
color:rgba(0,0,0,.26); color:rgba(0,0,0,.26);
margin-left:0 ;
} }
.md-stepper-horizontal .md-step.orange .md-step-title, .md-stepper-horizontal .md-step.green .md-step-title { .md-stepper-horizontal .md-step.orange .md-step-title, .md-stepper-horizontal .md-step.green .md-step-title {
font-weight: 600; font-weight: 600;
@ -107,13 +108,14 @@ margin-left:20px
top: 36px; top: 36px;
height: 2px; height: 2px;
background: #DDDDDD; background: #DDDDDD;
width: 95%; width: 120px;
z-index: 0; z-index: 0;
left: 25px;
} }
.md-stepper-horizontal .md-step .md-step-bar-left { .md-stepper-horizontal .md-step .md-step-bar-left {
margin-right: 0px; margin-right: 0px;
left: 58%; left: 40%;
} }
.orange .md-step-bar-left { .orange .md-step-bar-left {
background:#CC9B14 !important; background:#CC9B14 !important;
@ -154,6 +156,7 @@ font-weight: bold;
color: #ffffff !important; color: #ffffff !important;
padding:2px 5px 2px 5px; padding:2px 5px 2px 5px;
border-radius: 5px; border-radius: 5px;
margin-left:0 ;
} }
.green .md-step-optional{ .green .md-step-optional{
font-size: 12px; font-size: 12px;
@ -273,8 +276,15 @@ position: relative;
font-size: 10px; font-size: 10px;
} }
.waring label{
font-size: 11px;
padding: 0px 10px;
display: inline-block;
position: relative;
position: absolute;
}
.waring img{ .waring img{
margin: 0 10px; margin: 0px;
} }
.selling h2{ .selling h2{
display: inline-block; display: inline-block;

@ -73,7 +73,7 @@ ion-footer{
bottom: 0; bottom: 0;
} }
.icon-footer{ .icon-footer{
margin: 6px; margin: 0px;
position: absolute; position: relative;
left: 35px; left: -10px;
} }

@ -85,8 +85,8 @@
</div> </div>
</div> </div>
<div class="grid-row">
<ion-row> <ion-row >
<ion-col size="6" (click)="openDetails()"> <ion-col size="6" (click)="openDetails()">
<ion-card> <ion-card>
<ion-card-header> <ion-card-header>
@ -142,7 +142,7 @@
</ion-card> </ion-card>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div>
</div> </div>
<div class="my-ads" *ngIf="segment =='2'"> <div class="my-ads" *ngIf="segment =='2'">

@ -100,6 +100,7 @@ ion-card-content p{
} }
.my-ads .details-text{ .my-ads .details-text{
font-size: 11px; font-size: 11px;
margin: 0;
} }
.my-ads .yellow, .my-ads .green{ .my-ads .yellow, .my-ads .green{
font-size: 11px; font-size: 11px;
@ -215,4 +216,7 @@ ion-card-content strong{
ion-fab-button{ ion-fab-button{
height: 60px; height: 60px;
width: 60px; width: 60px;
}
.grid-row{
margin:10px;
} }

@ -47,7 +47,7 @@
</div> </div>
<div class="grid-container">
<ion-row> <ion-row>
<ion-col size="6" *ngFor="let item of offersData" (click)="openDetails(item)"> <ion-col size="6" *ngFor="let item of offersData" (click)="openDetails(item)">
<ion-card class="offers-discount-card"> <ion-card class="offers-discount-card">
@ -79,6 +79,7 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</div>
</div> </div>

@ -23,15 +23,17 @@
--border-radius: 25px; --border-radius: 25px;
} }
.filterText{ .filterText{
margin: 5px 15px 5px; padding: 0 4px 10px 5px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin: 0px 10px;
} }
.container-icon{ .container-icon{
padding: 0 10px 10px; padding: 0 5px 10px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
margin: 0 10px;
} }
.box-icon{ .box-icon{
@ -111,13 +113,16 @@ ion-item{
--background: #fff; --background: #fff;
margin: 10px; margin: 10px;
border-radius: 25px; border-radius: 25px;
padding: 5px; padding: 0px;
} }
ion-item h3{ ion-item h3{
color: #000; color: #000;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
.grid-container{
margin: 10px;
}
.yellow{ .yellow{
color:#ffc107; color:#ffc107;
} }
@ -179,7 +184,7 @@ ion-card-content{
padding: 0 15px 0px 15px; padding: 0 15px 0px 15px;
} }
ion-card{ ion-card{
margin: 0px; margin: 3px;
--background: #fff; --background: #fff;
--border-radius: 53px; --border-radius: 53px;
border-radius: 10px; border-radius: 10px;

@ -130,6 +130,9 @@ ion-card{
background-repeat: no-repeat; background-repeat: no-repeat;
margin-top: 5px; margin-top: 5px;
} }
.related-offers-container{
margin: 10px;
}
.header-img-main{ .header-img-main{
height: 170px; height: 170px;
width: 100%; width: 100%;

@ -77,7 +77,7 @@ export class AddAddressComponent implements OnInit {
selectedCountryName: any; selectedCountryName: any;
public effectiveDate: any; public effectiveDate: any;
public submitAbsObjList: any = []; public submitAbsObjList: any = [];
public selectedStatus: any = {};
public isUpdate: boolean; public isUpdate: boolean;
constructor( constructor(
public modalController: ModalController, public modalController: ModalController,
@ -141,12 +141,15 @@ export class AddAddressComponent implements OnInit {
ngAfterViewInit() { ngAfterViewInit() {
console.log("ngAfterViewInit"); console.log("ngAfterViewInit");
// console.log(this.containerDiv.nativeElement); // console.log(this.containerDiv.nativeElement);
this.selectedStatus = this.cs.sharedService.getSharedData(ProfileService.SELECTED_STATUS);
var addressEntries = this.cs.sharedService.getSharedData(ProfileService.ADRESS_ENTRIES); var addressEntries = this.cs.sharedService.getSharedData(ProfileService.ADRESS_ENTRIES);
if (addressEntries && addressEntries.UPDATE_BUTTON === 'Y') { if (addressEntries && addressEntries.UPDATE_BUTTON === 'Y') {
this.isUpdate = true; this.isUpdate = true;
let countryDetail = this.cs.sharedService.getSharedData(ProfileService.COUNTRY); let countryDetail = this.cs.sharedService.getSharedData(ProfileService.COUNTRY);
this.selectedCountryName = countryDetail.name; this.selectedCountryName = countryDetail.name;
this.country = countryDetail.code; this.country = countryDetail.code;
} else {
this.isUpdate = false;
} }
this.getEitDffStructure(); this.getEitDffStructure();
// this.addFieldToDOM(this.buttonInput, 'btnSubmit', this.cs.presentAlert('Clicked!'), true) // this.addFieldToDOM(this.buttonInput, 'btnSubmit', this.cs.presentAlert('Clicked!'), true)
@ -1606,7 +1609,7 @@ export class AddAddressComponent implements OnInit {
EITTransactionTBL: this.arrValues, EITTransactionTBL: this.arrValues,
P_COUNTRY_CODE: this.country, P_COUNTRY_CODE: this.country,
P_EFFECTIVE_DATE: moment(this.effectiveDate).format('DD-MMM-YYYY'), P_EFFECTIVE_DATE: moment(this.effectiveDate).format('DD-MMM-YYYY'),
P_ACTION: 'NEW' P_ACTION: this.selectedStatus.data == '1' ? 'CHANGE' : this.selectedStatus.data == '2' ? 'CORRECT' : 'NEW'
}; };
this.profileService this.profileService

@ -306,10 +306,12 @@ export class HomeComponent implements OnInit {
modal.onDidDismiss() modal.onDidDismiss()
.then((data) => { .then((data) => {
console.log(data); console.log(data);
this.cs.sharedService.setSharedData(data.data, ProfileService.SELECTED_STATUS);
if (data.data && data.data.data == 1) { if (data.data && data.data.data == 1) {
this.cs.sharedService.setSharedData(this.addressSubMenu, ProfileService.ADRESS_ENTRIES); this.cs.sharedService.setSharedData(this.addressSubMenu, ProfileService.ADRESS_ENTRIES);
this.cs.sharedService.setSharedData(this.employeeAdress, ProfileService.EMP_ADDRESS); this.cs.sharedService.setSharedData(this.employeeAdress, ProfileService.EMP_ADDRESS);
this.cs.sharedService.setSharedData(this.country, ProfileService.COUNTRY); this.cs.sharedService.setSharedData(this.country, ProfileService.COUNTRY);
this.cs.openAddAddress(); this.cs.openAddAddress();
} else if (data.data && data.data.data == 2) { } else if (data.data && data.data.data == 2) {
this.cs.openAddAddress(); this.cs.openAddAddress();

@ -34,6 +34,7 @@ export class ProfileService {
public static ADRESS_ENTRIES = 'address-entries'; public static ADRESS_ENTRIES = 'address-entries';
public static EMP_ADDRESS = 'emp-address'; public static EMP_ADDRESS = 'emp-address';
public static COUNTRY = 'country'; public static COUNTRY = 'country';
public static SELECTED_STATUS = 'selected-status';
constructor( constructor(
public con: ConnectorService, public con: ConnectorService,
public authService: AuthenticationService public authService: AuthenticationService

Loading…
Cancel
Save