Skip to content

G
getme
Commit 1292d2ba by Arjun
Options

design fix

parent 26a80bf1
Showing with 660 additions and 116 deletions
src/app/address/address.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { AddressPage } from './address.page';
const routes: Routes = [
{
path: '',
component: AddressPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [AddressPage]
})
export class AddressPageModule {}
src/app/address/address.page.html 0 → 100644
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png">
</button>
<div class="nav_title floatLeft">
<h4>Address</h4>
</div>
<div class="clear"></div>
</div>
<ion-content>
<div class="address-wrapper">
<ion-grid>
<ion-row>
<ion-col size="1">
<input type="radio" class="address-radio" name="address" checked>
</ion-col>
<ion-col size="9">
<h1>Shamjith KS</h1>
<h1>+00 0000 888 888</h1>
<p>Carnival Infopark, Infopark Kochi 682030, Kerala, India</p>
</ion-col>
<ion-col size="2"><button class="show-btn"><img src="../../assets/delete.png"></button></ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col size="1">
<input type="radio" class="address-radio" name="address">
</ion-col>
<ion-col size="9">
<h1>Shamjith KS</h1>
<h1>+00 0000 888 888</h1>
<p>Carnival Infopark, Infopark Kochi 682030, Kerala, India</p>
</ion-col>
<ion-col size="2"><button><img src="../../assets/delete.png"></button></ion-col>
</ion-row>
</ion-grid>
<div class="address-btn-wrapper"><button class="show-btn">Add New Address</button></div>
</div>
</ion-content>
\ No newline at end of file
src/app/address/address.page.scss 0 → 100644
.address-wrapper {
padding: 15px;
.address-radio {
background-image: url("../../assets/radio.png");
-webkit-appearance: none;
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
height: auto;
padding: 15px;
border-radius: 5px;
outline: none;
transition: all .6s ease-in-out;
}
.address-radio:checked {
background-image: url("../../assets/radio-checked.png");
}
.address-radio:checked+.show-btn {
opacity: 1;
}
h1 {
font-size: 18px;
margin-top: 6px;
padding-left: 10px;
}
p {
margin-top: 20px;
padding-left: 10px;
color: #B0AEC7;
}
button {
background: none;
outline: none;
}
img {
width: 35px;
}
}
.address-btn-wrapper {
padding: 15px;
position: absolute;
bottom: 50px;
left: 0;
right: 0;
button {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
text-transform: uppercase;
}
}
\ No newline at end of file
src/app/address/address.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddressPage } from './address.page';
describe('AddressPage', () => {
let component: AddressPage;
let fixture: ComponentFixture<AddressPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddressPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddressPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/address/address.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-address',
templateUrl: './address.page.html',
styleUrls: ['./address.page.scss'],
})
export class AddressPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/app-routing.module.ts
...@@ -95,7 +95,9 @@ const routes: Routes = [ ...@@ -95,7 +95,9 @@ const routes: Routes = [
{ {
path: 'searchmodal', path: 'searchmodal',
loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule' loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule'
}, { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' } }, { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' },
{ path: 'feedback', loadChildren: './feedback/feedback.module#FeedbackPageModule' },
{ path: 'address', loadChildren: './address/address.module#AddressPageModule' }
]; ];
@NgModule({ @NgModule({
......
src/app/app.component.html
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<ion-menu-toggle> <ion-menu-toggle>
<div class="top_banner"> <div class="top_banner">
<div class="top_image"> <div class="top_image">
<img src="../assets/avatar.png"> <img src="../assets/asset_avatar.png">
</div> </div>
<div class="top_detail"> <div class="top_detail">
<h4>John Doe</h4> <h4>John Doe</h4>
......
src/app/app.component.scss
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
height: 60px; height: 60px;
float: left; float: left;
border-radius: 50%; border-radius: 50%;
background-color: #fff;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/app/feedback/feedback.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { FeedbackPage } from './feedback.page';
const routes: Routes = [
{
path: '',
component: FeedbackPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [FeedbackPage]
})
export class FeedbackPageModule {}
src/app/feedback/feedback.page.html 0 → 100644
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png">
</button>
<div class="nav_title floatLeft">
<h4>Complaints & Feedback</h4>
</div>
<div class="clear"></div>
</div>
<ion-content>
<div class="feedback_wrapper">
<div class="form_div">
<div class="row">
<p>From</p>
<input class="form-control" type="text" placeholder="[email protected]">
</div>
<div class="row">
<p>To</p>
<input class="form-control" type="text" placeholder="[email protected]">
</div>
<div class="row">
<p>Comments</p>
<textarea class="form-control" rows="8" placeholder="Type here.."></textarea>
</div>
<div class="row">
<button class="login_btn">SENT</button>
</div>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/feedback/feedback.page.scss 0 → 100644
.feedback_wrapper {
width: 80%;
margin: 0 auto;
padding-top: 30px;
.form_div {
.row {
margin-bottom: 20px;
.form-control {
border: 1px solid rgba(215, 213, 228, 1);
background: transparent;
color: #333;
width: 100%;
border-radius: 8px;
font-size: 16px;
padding: 11px 15px;
resize: none;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
margin-bottom: 50px;
}
P {
text-align: left;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bolder;
padding-bottom: 10px;
}
}
}
}
\ No newline at end of file
src/app/feedback/feedback.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FeedbackPage } from './feedback.page';
describe('FeedbackPage', () => {
let component: FeedbackPage;
let fixture: ComponentFixture<FeedbackPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FeedbackPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FeedbackPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/feedback/feedback.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-feedback',
templateUrl: './feedback.page.html',
styleUrls: ['./feedback.page.scss'],
})
export class FeedbackPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/noresult/noresult.page.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
width: 100px; width: 100px;
} }
h1 { h1 {
font-size: 22px; font-size: 18px;
font-weight: bolder; font-weight: bolder;
text-transform: uppercase; text-transform: uppercase;
color: #3B394D; color: #3B394D;
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
height: 50px; height: 50px;
width: 48%; width: 48%;
color: #fff; color: #fff;
font-size: 22px; font-size: 18px;
font-weight: lighter; font-weight: lighter;
text-transform: uppercase; text-transform: uppercase;
margin-top: 10px; margin-top: 10px;
......
src/app/profile/profile.page.html
<div class="nav_header"> <div class="nav_header">
<ion-menu-toggle> <ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"></button> <button class="nav_btn nav_menu floatLeft"></button>
</ion-menu-toggle> </ion-menu-toggle>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<img src="../../assets/Group [email protected]" /> <img src="../../assets/Group [email protected]" />
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="profile_wrapper"> <div class="profile_wrapper">
<div class="profile_banner"> <div class="profile_banner">
<div class="profile_circle"> <div class="profile_circle">
<div class="edit"></div> <div class="edit"></div>
</div> </div>
<h5>{{user && user.name}}</h5> <h5>{{user && user.name}}</h5>
<p>LOGOUT</p> <p (click)="istoggle()">LOGOUT</p>
</div>
<div class="account_wrapper">
<div class="account_header">
<h5 class="floatLeft">ACCOUNT INFORMATION</h5>
<span class="floatRight" (click)="goToPage('changedetails', user && user)"><img
src="../../assets/edit.png" /></span>
<div class="clear"></div>
</div>
<div class="row">
<ion-row>
<ion-col class="textLeft p0">
<p>
Name<span>{{user && phoneVerified? "Verified": "Not Verified yet"}}</span>
</p>
</ion-col>
<ion-col class="textRight p0">
<h6>{{user && user.name}}</h6>
</ion-col>
</ion-row>
</div>
<div class="row">
<ion-row>
<ion-col class="textLeft p0">
<p>
Email<span>{{user && emailVerified? "Verified": "Not Verified yet"}}</span>
</p>
</ion-col>
<ion-col class="textRight p0">
<h6>{{user && user.emailId}}</h6>
</ion-col>
</ion-row>
</div>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>Wishlist</p>
</ion-col>
<ion-col class="textRight p0">
<h6>(3)</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>Address</p>
</ion-col>
<ion-col class="textRight p0">
<h6>(1)</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>My Cards</p>
</ion-col>
<ion-col class="textRight p0">
<h6>
<ion-icon name="arrow-forward"></ion-icon>
</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>My Order</p>
</ion-col>
<ion-col class="textRight p0">
<h6>
<ion-icon name="arrow-forward"></ion-icon>
</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>Currency</p>
</ion-col>
<ion-col class="textRight p0">
<h6>
<span>AUD</span>
</h6>
</ion-col>
</ion-row>
</div>
</div> </div>
<div class="account_wrapper"> <div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="account_header"> <div class="logout_inner">
<h5 class="floatLeft">ACCOUNT INFORMATION</h5> <h4>Logout</h4>
<span <p>Are you sure to Logout ?</p>
class="floatRight" <div class="logout_footer">
(click)="goToPage('changedetails', user && user)"
><img src="../../assets/edit.png" <button class="btn-cancel floatLeft" (click)="istoggle();">Cancel</button>
/></span> <button class="btn-logout floatRight" (click)="istoggle()">Logout</button>
<div class="clear"></div>
</div>
<div class="row"> <div class="clear"></div>
<ion-row> </div>
<ion-col class="textLeft p0"> </div>
<p>
Name<span
>{{user && phoneVerified? "Verified": "Not Verified yet"}}</span
>
</p>
</ion-col>
<ion-col class="textRight p0">
<h6>{{user && user.name}}</h6>
</ion-col>
</ion-row>
</div>
<div class="row">
<ion-row>
<ion-col class="textLeft p0">
<p>
Email<span
>{{user && emailVerified? "Verified": "Not Verified yet"}}</span
>
</p>
</ion-col>
<ion-col class="textRight p0">
<h6>{{user && user.emailId}}</h6>
</ion-col>
</ion-row>
</div>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>Wishlist</p>
</ion-col>
<ion-col class="textRight p0">
<h6>(3)</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>Address</p>
</ion-col>
<ion-col class="textRight p0">
<h6>(1)</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>My Cards</p>
</ion-col>
<ion-col class="textRight p0">
<h6>
<ion-icon name="arrow-forward"></ion-icon>
</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>My Order</p>
</ion-col>
<ion-col class="textRight p0">
<h6>
<ion-icon name="arrow-forward"></ion-icon>
</h6>
</ion-col>
</ion-row>
<hr />
<ion-row>
<ion-col class="textLeft p0">
<p>Currency</p>
</ion-col>
<ion-col class="textRight p0">
<h6>
<span>AUD</span>
</h6>
</ion-col>
</ion-row>
</div> </div>
</div> </ion-content>
</ion-content> \ No newline at end of file
src/app/profile/profile.page.scss
...@@ -102,4 +102,65 @@ ...@@ -102,4 +102,65 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
}
.logout-pop-wrapper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.logout_inner {
margin: 0 auto;
width: 280px;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 50%;
border-radius: 10px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
}
p {
text-align: center;
}
.logout_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
text-transform: uppercase;
}
.btn-cancel {
border: 1px solid #29285B;
background-color: #29285B;
}
.btn-logout {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
color: #000;
}
}
}
} }
\ No newline at end of file
src/app/profile/profile.page.ts
...@@ -3,16 +3,29 @@ import { User } from "../../config/services/user"; ...@@ -3,16 +3,29 @@ import { User } from "../../config/services/user";
import { UserService } from "../../config/user.service"; import { UserService } from "../../config/user.service";
import { ServiceService } from "../../config/service.service"; import { ServiceService } from "../../config/service.service";
import { Router, ActivatedRoute } from "@angular/router"; import { Router, ActivatedRoute } from "@angular/router";
import { trigger, transition, animate, style } from "@angular/animations";
@Component({ @Component({
selector: "app-profile", selector: "app-profile",
templateUrl: "./profile.page.html", templateUrl: "./profile.page.html",
styleUrls: ["./profile.page.scss"] styleUrls: ["./profile.page.scss"],
animations: [
trigger("slideInOut", [
transition(":enter", [
style({ transform: "translateY(100%)" }),
animate("200ms ease-in", style({ transform: "translateY(0%)" }))
]),
transition(":leave", [
animate("200ms ease-out", style({ transform: "translateY(100%)" }))
])
])
]
}) })
export class ProfilePage implements OnInit { export class ProfilePage implements OnInit {
user: User; user: User;
userdata: any; userdata: any;
custId: String; custId: String;
isShow = false;
constructor( constructor(
private router: Router, private router: Router,
...@@ -50,4 +63,8 @@ export class ProfilePage implements OnInit { ...@@ -50,4 +63,8 @@ export class ProfilePage implements OnInit {
this.service.set("params", this.user); this.service.set("params", this.user);
}, 500); }, 500);
} }
istoggle() {
this.isShow = !this.isShow;
}
} }
src/app/wishlist/wishlist.page.html
<ion-header> <div class="nav_header">
<ion-toolbar> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<ion-title>wishlist</ion-title> <img src="../assets/Group17_2.png">
</ion-toolbar> </button>
</ion-header> <div class="nav_title floatLeft">
<h4>WISHLIST</h4>
</div>
<div class="clear"></div>
</div>
<ion-content> <ion-content>
</ion-content> <div class="wishlist-wrapper">
<ul>
<li>
<div class="wishlist_image">
<img src="../../assets/img-list.png">
</div>
<div class="wishlist_detail">
<p class="floatLeft">European Style V Neck</p>
<span class="floatRight"><img src="../../assets/heart.png"></span>
<div class="clear"></div>
<p>Green, Small</p>
<h1>AU$88.00</h1>
</div>
<div class="clear"></div>
</li>
<li>
<div class="wishlist_image">
<img src="../../assets/img-list.png">
</div>
<div class="wishlist_detail">
<p class="floatLeft">European Style V Neck</p>
<span class="floatRight"><img src="../../assets/heart.png"></span>
<div class="clear"></div>
<p>Green, Small</p>
<h1>AU$88.00</h1>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="empty-wishlist-wrapper">
<img src="../../assets/wishlist.png">
<h1>There is no products added</h1>
<button>shop now</button>
</div>
<div class="footer-btns-wrapper">
<button class="btn-clear">Clear All</button>
<button class="btn-cart">add all to cart</button>
</div>
</ion-content>
\ No newline at end of file
src/app/wishlist/wishlist.page.scss
.wishlist-wrapper {
padding: 20px 0 50px 0;
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 20px;
.wishlist_image {
width: 120px;
height: 125px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.wishlist_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 18px;
img {
width: 16px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
font-size: 18px;
color: #000;
font-weight: bolder;
margin-top: 20px;
}
}
}
}
}
.empty-wishlist-wrapper {
text-align: center;
padding-top: 25%;
img {
width: 100px;
}
h1 {
font-size: 18px;
font-weight: bolder;
text-transform: uppercase;
color: #3B394D;
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 10px;
}
}
.footer-btns-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
button {
width: 50%;
padding: 12px 0;
text-transform: uppercase;
font-size: 18px;
}
.btn-clear {
border-top: 1px solid #d2d2d2;
border-top-left-radius: 15px;
background-color: #fff;
}
.btn-cart {
border-top: 1px solid #29285B;
border-top-right-radius: 15px;
background-color: #29285B;
color: #fff;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment