You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
242 lines
5.8 KiB
HTML
242 lines
5.8 KiB
HTML
|
|
<ion-content>
|
|
<div class="head-title">
|
|
<ion-toolbar class="header-toolbar">
|
|
<ion-buttons slot="start">
|
|
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title color="light" >{{ts.trPK('itemforsale','title')}}</ion-title>
|
|
</ion-toolbar>
|
|
</div>
|
|
<div class="header"></div>
|
|
<div class="bottom"></div>
|
|
<div class="md-stepper-horizontal ">
|
|
<div class="md-step active " [ngClass]="step >1 ? 'green' : 'orange'">
|
|
<div class="md-step-circle"><span>✓</span></div>
|
|
<div class="md-step-title">{{ts.trPK('itemforsale','select-category')}}</div>
|
|
<div class="md-step-optional">{{ts.trPK('itemforsale','completed')}}</div>
|
|
<div class="md-step-bar-left"></div>
|
|
<div class="md-step-bar-right"></div>
|
|
</div>
|
|
<div class="md-step " [ngClass]="step >2 ? 'green' : step ==2 ? 'orange' : ''">
|
|
<div class="md-step-circle"><span>✓</span></div>
|
|
<div class="md-step-title">{{ts.trPK('itemforsale','add-details')}}</div>
|
|
|
|
<div class="md-step-optional">{{step >2 ? "Completed" : "Locked"}}</div>
|
|
<div class="md-step-bar-left"></div>
|
|
<div class="md-step-bar-right"></div>
|
|
</div>
|
|
<div class="md-step " [ngClass]="step >3 ? 'green' : step ==3 ? 'orange' : ''">
|
|
<div class="md-step-circle"><span>✓</span></div>
|
|
<div class="md-step-title">{{ts.trPK('itemforsale','review-sell')}}</div>
|
|
<div class="md-step-optional">{{step >3 ? "Completed" : "Locked"}}</div>
|
|
<div class="md-step-bar-left"></div>
|
|
<div class="md-step-bar-right"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
|
|
|
|
|
|
<div class="offering" *ngIf="step==1">
|
|
<h2>What are you offering?</h2>
|
|
</div>
|
|
<ion-grid *ngIf="step==1">
|
|
<ion-row>
|
|
<ion-col size="4">
|
|
<div class="sale-icon" (click)="nextStep()">
|
|
<div class="top">
|
|
<ion-icon name="images"></ion-icon>
|
|
</div>
|
|
<div class="bottom-icon">
|
|
<p>Mobile & Tablets</p>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="4">
|
|
<div class="sale-icon" (click)="openItem()">
|
|
<div class="top">
|
|
<ion-icon name="images"></ion-icon>
|
|
</div>
|
|
<div class="bottom-icon">
|
|
<p>Mobile & Tablets</p>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="4">
|
|
<div class="sale-icon">
|
|
<div class="top">
|
|
<ion-icon name="images"></ion-icon>
|
|
</div>
|
|
<div class="bottom-icon">
|
|
<p>Mobile & Tablets</p>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col size="4">
|
|
<div class="sale-icon">
|
|
<div class="top">
|
|
<ion-icon name="images"></ion-icon>
|
|
</div>
|
|
<div class="bottom-icon">
|
|
<p>Mobile & Tablets</p>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="4">
|
|
<div class="sale-icon">
|
|
<div class="top">
|
|
<ion-icon name="images"></ion-icon>
|
|
</div>
|
|
<div class="bottom-icon">
|
|
<p>Mobile & Tablets</p>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="4">
|
|
<div class="sale-icon">
|
|
<div class="top">
|
|
<ion-icon name="images"></ion-icon>
|
|
</div>
|
|
<div class="bottom-icon">
|
|
<p>Mobile & Tablets</p>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
<div class="offering" *ngIf="step==2">
|
|
<h2>Add Details</h2>
|
|
</div>
|
|
<div class="add-details" *ngIf="step==2">
|
|
<ion-grid>
|
|
<ion-row>
|
|
<p>Item Info</p>
|
|
<ion-col size="12">
|
|
<ion-item lines="none">
|
|
<ion-input placeholder="Item Info"></ion-input>
|
|
</ion-item>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
|
|
<ion-col size="12">
|
|
<ion-item lines="none">
|
|
|
|
|
|
<ion-textarea rows="6" cols="20" placeholder="Description"></ion-textarea>
|
|
</ion-item>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col>
|
|
<p>Item Condition</p>
|
|
<ion-radio-group value="new">
|
|
|
|
|
|
|
|
<ion-col>
|
|
<ion-radio value="new"></ion-radio>
|
|
<ion-label>New</ion-label>
|
|
</ion-col>
|
|
<ion-col>
|
|
<ion-radio value="used"></ion-radio>
|
|
<ion-label>Used</ion-label>
|
|
</ion-col>
|
|
|
|
|
|
</ion-radio-group>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
|
|
<ion-col size="12">
|
|
<p>Item Price</p>
|
|
<ion-item lines="none">
|
|
<ion-input placeholder="Item Price"></ion-input>
|
|
</ion-item>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
|
|
<p>Item Photos</p>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col lines="none" size="4">
|
|
<div class="image-container">
|
|
<div class="uploaded">
|
|
<div class="closed">X</div>
|
|
<img src="assets/imgs/itemsforsale/fashion .svg" />
|
|
</div>
|
|
|
|
</div>
|
|
</ion-col>
|
|
<ion-col lines="none" size="4">
|
|
<div class="image-container">
|
|
<div class="uploaded">
|
|
<div class="closed">X</div>
|
|
<img src="assets/imgs/itemsforsale/fashion .svg" />
|
|
</div>
|
|
|
|
</div>
|
|
</ion-col>
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
</ion-grid>
|
|
</div>
|
|
|
|
<div class="offering" *ngIf="step==3">
|
|
<h2>Review & Sell</h2>
|
|
</div>
|
|
|
|
|
|
<div class="add-details" *ngIf="step==3">
|
|
<h2>Furniture Table</h2>
|
|
|
|
|
|
|
|
<p>
|
|
Consectetur adipiscing elit. Donec blandit diam nulla, non euismod eros efficitur imperdiet. Fusce erat enim, volutpat at enim in, venenatis iaculis risus.
|
|
</p>
|
|
<div class="description-details">
|
|
<p class="orange">Used</p>
|
|
|
|
<img src="assets/imgs/itemsforsale/fashion .svg" />
|
|
<img src="assets/imgs/itemsforsale/fashion .svg" />
|
|
<div class="selling">
|
|
|
|
|
|
<strong>Selling for </strong> <h2>500 SAR</h2>
|
|
</div>
|
|
<div class="waring">
|
|
<ion-icon name="help-circle"></ion-icon> This ad will be valid for 2 week after approval
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ion-footer *ngIf="step>1">
|
|
<div class="centerDiv">
|
|
<ion-button class="footer-button" ion-button (click)="step =3" *ngIf="step ==2">
|
|
{{ts.trPK('general','next')}} </ion-button>
|
|
|
|
<ion-button class="footer-button" ion-button (click)="step =4" *ngIf="step ==3">
|
|
{{ts.trPK('general','submit')}} </ion-button>
|
|
</div>
|
|
</ion-footer>
|
|
|
|
</ion-content> |