Skip to content

G
getme
Commit eeaab424 by Adarsh K
Options

Merge branch 'master' of https://gitlab.techware.co.in/amal/getme

parents 3e41f00f 643e6df0
Showing with 1490 additions and 41 deletions
src/app/addaddresss/addaddresss.page.html
<ion-header> <div class="nav_header">
<ion-toolbar> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<ion-title>addaddresss</ion-title> <img src="../assets/Group17_2.png">
</ion-toolbar> </button>
</ion-header> <div class="nav_title floatLeft">
<h4>ADD ADDRESS</h4>
</div>
<div class="clear"></div>
</div>
<ion-content> <ion-content>
<div class="login_wrapper">
<div class="form_div">
<div class="row">
<input class="" type="text" placeholder="Full name">
</div>
<div class="row">
<input class="" type="text" placeholder="Phone Number">
</div>
<div class="row">
<input class="" type="text" placeholder="Country">
</div>
<div class="row">
<input class="" type="text" placeholder="State">
</div>
<div class="row">
<input class="" type="text" placeholder="District">
</div>
<div class="row">
<input class="" type="text" placeholder="City">
</div>
<div class="row">
<input class="" type="text" placeholder="Area">
</div>
<div class="row">
<input class="" type="text" placeholder="Landmark">
</div>
<div class="row">
<button class="login_btn">ADD</button>
</div>
</div>
</div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/addaddresss/addaddresss.page.scss
.login_wrapper {
width: 80%;
margin: 0 auto;
padding-top: 30px;
.logo_wrapper {
width: 100%;
text-align: center;
padding-top: 50px;
padding-bottom: 30px;
img {
width: 180px;
}
}
.form_div {
.row {
margin-bottom: 20px;
input {
border: 1px solid rgba(215, 213, 228, 1);
background: transparent;
color: rgba(215, 213, 228, 1);
width: 100%;
height: 45px;
text-align: left;
border-radius: 8px;
font-size: 16px;
padding-left: 15px;
padding-right: 15px;
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
}
hr {
border: 1px solid rgba(215, 213, 228, 1);
border-bottom: none;
margin-top: 30px;
margin-bottom: 10px;
}
P {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
position: relative;
bottom: 20px;
span {
background-color: #fff;
padding: 10px;
font-size: 18px;
}
}
h4 {
color: rgba(59, 57, 77, 1);
text-align: center;
margin: 0px;
padding-top: 15px;
}
h6 {
color: rgba(41, 40, 91, 1);
span {
position: relative;
top: 5px;
}
a {
color: rgba(41, 40, 91, 1);
text-decoration: none;
font-weight: 900;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 30px;
height: 30px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 10px;
top: 15px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
.social_div {
border: 1px solid rgba(215, 213, 228, 1);
height: 45px;
border-radius: 20px;
.social_btn {
display: inline-block;
width: 50%;
text-align: center;
height: 100%;
font-size: 18px;
padding: 9px;
}
}
}
}
}
\ No newline at end of file
src/app/addaddresss/addaddresss.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-addaddresss', selector: 'app-addaddresss',
...@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core';
}) })
export class AddaddresssPage implements OnInit { export class AddaddresssPage implements OnInit {
constructor() { } constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() { ngOnInit() {
} }
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
} }
src/app/app-routing.module.ts
...@@ -26,7 +26,9 @@ const routes: Routes = [ ...@@ -26,7 +26,9 @@ const routes: Routes = [
{ path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' }, { path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' },
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' }, { path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
{ path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' }, { path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' },
{ path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' }, { path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' } { path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' }, { path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' },
{ path: 'review', loadChildren: './review/review.module#ReviewPageModule' },
{ path: 'delivery', loadChildren: './delivery/delivery.module#DeliveryPageModule' }
]; ];
......
src/app/app.component.html
<ion-app> <ion-app>
<ion-router-outlet></ion-router-outlet> <ion-split-pane>
<ion-menu type="overlay">
<ion-content>
<div class="side_menu_wrapper">
<div class="top_banner">
<div class="top_image">
</div>
<div class="top_detail">
<h4>John Doe</h4>
<p>[email protected]</p>
</div>
<div class="clear"></div>
</div>
<div class="sidemenu_list">
<ul>
<li>Shop</li>
<li>About us</li>
<li>Catagories</li>
<div class="sub_menu">
<ul>
<li>Men's Fashion</li>
<li>Women's Fashion</li>
<li>Features</li>
<li>Bags</li>
<li>Shoes</li>
<li>Electronics</li>
</ul>
</div>
<li>Complaints & Feedback</li>
<li>
<span class="floatLeft">Logout</span>
<span class="floatRight version">Version 1.2.0.3</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app> </ion-app>
\ No newline at end of file
src/app/app.component.scss
...@@ -4,3 +4,83 @@ ...@@ -4,3 +4,83 @@
font-family: 'Abel', sans-serif; font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.side_menu_wrapper {
background: rgba(41, 40, 91, 1);
width: 100%;
height: 100vh;
padding-left: 20px;
padding-top: 20px;
padding-right: 10px;
.top_banner {
.top_image {
width: 60px;
height: 60px;
float: left;
background-color: #fff;
border-radius: 50%;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.top_detail {
width: calc(100% - 60px);
float: left;
padding: 7px;
padding-left: 15px;
h4 {
margin: 0px;
padding: 0px;
color: #fff;
}
p {
margin: 0px;
padding: 0px;
color: #fff;
color: rgba(176, 174, 199, 1);
}
}
}
.sidemenu_list {
padding-top: 30px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
font-size: 16px;
&:focus {
background-color: rgba(40, 36, 88, 1);
}
&:hover {
background-color: rgba(40, 36, 88, 1);
}
.version {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
}
.sub_menu {
padding-left: 25px;
margin-bottom: 40px;
padding-top: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(176, 174, 199, 1);
}
}
}
}
}
}
\ No newline at end of file
src/app/app.component.ts
...@@ -24,7 +24,6 @@ export class AppComponent { ...@@ -24,7 +24,6 @@ export class AppComponent {
this.statusBar.styleDefault(); this.statusBar.styleDefault();
this.splashScreen.hide(); this.splashScreen.hide();
this.statusBar.overlaysWebView(false); this.statusBar.overlaysWebView(false);
}); });
} }
} }
src/app/cart/cart.page.html
...@@ -99,12 +99,13 @@ ...@@ -99,12 +99,13 @@
<span class="floatRight">CHANGE</span> <span class="floatRight">CHANGE</span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<p>AfterPay</p>
<div class="card_div"> <div class="card_div">
<input class="card_no" placeholder="**** **** **** 1458"> <input class="card_no" placeholder="**** **** **** 1458">
<input class="cv_number" placeholder="CVV"> <input class="cv_number" placeholder="CVV">
</div> </div>
<div class="after_pay"> <div class="after_pay">
<input class="" placeholder="After Pay"> Pay Pal
</div> </div>
<div class="delivery_time"> <div class="delivery_time">
<ul> <ul>
...@@ -148,8 +149,9 @@ ...@@ -148,8 +149,9 @@
</ion-slides> </ion-slides>
</div> </div>
</div> </div>
<div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0" (click)="next(1)"> <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
CHECKOUT <div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div>
<div class="checkout" (click)="next(1)">CHECKOUT</div>
</div> </div>
<div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);"> <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
PAY PAY
...@@ -159,3 +161,9 @@ ...@@ -159,3 +161,9 @@
</div> --> </div> -->
</div> </div>
</ion-content> </ion-content>
<!-- <div class="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div> -->
\ No newline at end of file
src/app/cart/cart.page.scss
...@@ -66,6 +66,13 @@ ...@@ -66,6 +66,13 @@
padding-bottom: 15px; padding-bottom: 15px;
padding-top: 10px; padding-top: 10px;
} }
p {
margin: 0px;
text-align: left;
color: rgba(41, 40, 91, 1);
padding-bottom: 15px;
padding-top: 15px;
}
h6 { h6 {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
...@@ -109,14 +116,13 @@ ...@@ -109,14 +116,13 @@
} }
} }
.after_pay { .after_pay {
height: 50px; height: 60px;
border-bottom: 1px solid rgba(176, 174, 199, 1); border-top: 1px solid #b0aec7;
input { border-bottom: 1px solid #b0aec7;
width: 100%; color: #b0aec7;
height: 100%; text-align: left;
padding-left: 20px; padding-top: 17px;
border: none; margin-top: 25px;
}
} }
.delivery_time { .delivery_time {
width: 100%; width: 100%;
...@@ -216,6 +222,7 @@ ...@@ -216,6 +222,7 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
border-radius: 8px;
} }
} }
.cart_detail { .cart_detail {
...@@ -340,6 +347,7 @@ ...@@ -340,6 +347,7 @@
z-index: 999; z-index: 999;
left: 0px; left: 0px;
right: 0px; right: 0px;
box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
background-color: rgba(41, 40, 91, 1); background-color: rgba(41, 40, 91, 1);
text-align: center; text-align: center;
color: #fff; color: #fff;
...@@ -349,4 +357,37 @@ ...@@ -349,4 +357,37 @@
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
} }
.footer_btnbay {
width: 100%;
box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
position: fixed;
bottom: 0px;
z-index: 999;
left: 0px;
right: 0px;
border-radius: 15px;
.continue {
width: 50%;
border-top-left-radius: 15px;
text-align: center;
font-size: 18px;
padding: 15px;
font-weight: 300;
float: left;
border-top: 1px solid #d7d5e4;
border-left: 1px solid #d7d5e4;
}
.checkout {
width: 50%;
border-top-right-radius: 15px;
background-color: rgba(41, 40, 91, 1);
border: 1px solid rgba(41, 40, 91, 1);
text-align: center;
color: #fff;
font-size: 18px;
padding: 15px;
font-weight: 300;
float: right;
}
}
} }
\ No newline at end of file
src/app/changedetails/changedetails.page.html
<ion-header> <div class="nav_header">
<ion-toolbar> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<ion-title>changedetails</ion-title> <img src="../assets/Group17_2.png">
</ion-toolbar> </button>
</ion-header> <div class="nav_title floatLeft">
<h4>CHANGE DETAILS</h4>
</div>
<div class="clear"></div>
</div>
<ion-content> <ion-content>
<div class="login_wrapper">
<div class="form_div">
<div class="row">
<h6>Personal Details</h6>
</div>
<div class="row">
<input class="" type="text" placeholder="John Doe">
</div>
<div class="row">
<input class="" type="mail" placeholder="[email protected]">
</div>
<div class="row">
<input class="" type="number" placeholder="+00 9851 5871 6985">
</div>
<div class="row">
<h6>Change Password</h6>
</div>
<div class="row">
<input class="" type="password" placeholder="Current Password">
</div>
<div class="row">
<input class="" type="password" placeholder="New Password">
</div>
<div class="row">
<input class="" type="password" placeholder="Confirm Password">
</div>
<div class="row">
<button class="login_btn">UPDATE</button>
</div>
</div>
</div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/changedetails/changedetails.page.scss
.login_wrapper {
width: 80%;
margin: 0 auto;
padding-top: 10px;
.logo_wrapper {
width: 100%;
text-align: center;
padding-top: 50px;
padding-bottom: 30px;
img {
width: 180px;
}
}
.form_div {
.row {
margin-bottom: 20px;
h6 {
color: rgba(59, 57, 77, 1) !important;
text-align: left;
font-weight: 900;
}
input {
border: 1px solid rgba(215, 213, 228, 1);
background: transparent;
color: rgba(215, 213, 228, 1);
width: 100%;
height: 45px;
text-align: center;
border-radius: 8px;
font-size: 16px;
padding-left: 15px;
padding-right: 15px;
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
}
hr {
border: 1px solid rgba(215, 213, 228, 1);
border-bottom: none;
margin-top: 30px;
margin-bottom: 10px;
}
P {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
position: relative;
bottom: 20px;
span {
background-color: #fff;
padding: 10px;
font-size: 18px;
}
}
h4 {
color: rgba(59, 57, 77, 1);
text-align: center;
margin: 0px;
padding-top: 15px;
}
h6 {
color: rgba(41, 40, 91, 1);
span {
position: relative;
top: 5px;
}
a {
color: rgba(41, 40, 91, 1);
text-decoration: none;
font-weight: 900;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 30px;
height: 30px;
border-radius: 10px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
// Box hover
// Box checked
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 10px;
top: 15px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
.social_div {
border: 1px solid rgba(215, 213, 228, 1);
height: 45px;
border-radius: 20px;
.social_btn {
display: inline-block;
width: 50%;
text-align: center;
height: 100%;
font-size: 18px;
padding: 9px;
}
}
}
}
}
\ No newline at end of file
src/app/changedetails/changedetails.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-changedetails', selector: 'app-changedetails',
...@@ -7,9 +10,23 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +10,23 @@ import { Component, OnInit } from '@angular/core';
}) })
export class ChangedetailsPage implements OnInit { export class ChangedetailsPage implements OnInit {
constructor() { } constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() { ngOnInit() {
} }
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
} }
src/app/delivery/delivery.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 { DeliveryPage } from './delivery.page';
const routes: Routes = [
{
path: '',
component: DeliveryPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [DeliveryPage]
})
export class DeliveryPageModule {}
src/app/delivery/delivery.page.html 0 → 100644
<ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
<img src="../assets/arrow_white.png">
</button>
<div class="nav_title floatLeft">
<h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img src="../assets/white_tick.png">
<h4>RIDER HAS<br> DELIVERED YOUR ORDER </h4>
<p>June 26th 2019, 03:00 PM</p>
</div>
</div>
</ion-content>
<ion-footer padding>
<div class="row">
<button class="login_btn">I GOT MY ORDER</button>
</div>
<div class="row">
<button class="resend_btn">I DIDN'T GOT THE ORDER</button>
</div>
<div class="row">
<button class="cancel_btn">CANCEL THIS ORDER</button>
</div>
</ion-footer>
\ No newline at end of file
src/app/delivery/delivery.page.scss 0 → 100644
.nav_header {
box-shadow: none;
}
.cart_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: 240px;
text-align: center;
background-image: url("../../assets/[email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
.nav_header {
position: static;
background-color: transparent;
.nav_title {
h4 {
color: #FFF;
}
}
}
img {
width: 70px;
}
h4 {
color: #fff;
font-weight: bolder;
margin-bottom: 5px;
text-align: center;
}
p {
color: rgba(215, 213, 228, 1);
margin: 0px;
padding: 0px;
font-size: 14px;
text-align: center;
}
}
.order_status {
width: 100%;
padding: 20px;
.track_btn {
border-radius: 5px;
height: 40px;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
}
.status_div {
margin-bottom: 10px;
margin-top: 10px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
}
.go_green {
h4 {
color: rgba(53, 203, 171, 1);
}
}
.go_green.status_gap {
border-left: 2px dashed rgba(53, 203, 171, 1);
}
.status_gap {
border-left: 2px dashed rgba(215, 213, 228, 1);
height: 30px;
}
}
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 120px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.product_detail {
padding: 10px;
hr {
border-bottom: 1px solid rgba(176, 174, 199);
height: 0px;
border-top: none;
}
h6 {
margin: 0px;
padding: 0px;
color: #29285b;
font-size: 18px;
padding-bottom: 15px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
line-height: 25px;
padding-bottom: 15px;
strong {
color: rgba(41, 40, 91, 1);
}
span {
color: rgba(41, 40, 91, 1);
}
.afterpay {
color: rgba(206, 153, 76, 1);
padding-left: 10px;
}
}
h4 {
color: rgba(41, 40, 91, 1);
margin: 0px;
font-weight: 900;
font-size: 18px;
padding-top: 20px;
padding-bottom: 10px;
}
.cancel_btn {
border-radius: 8px;
height: 45px;
width: 100%;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
}
.related_product_slider {
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
font-size: 18px;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
font-size: 18px;
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/Group32_2.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
text-align: left;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
text-align: left;
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1)
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
}
}
}
}
.row {
margin-bottom: 30px;
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
}
.resend_btn {
width: 100%;
background-color: transparent;
color: #29285b;
border-radius: 8px;
height: 45px;
font-size: 16px;
font-weight: 900;
border: 1px solid rgba(176, 174, 199, 1);
}
.cancel_btn {
width: 100%;
background-color: transparent;
color: rgba(176, 174, 199, 1);
border-radius: 8px;
height: 45px;
font-size: 16px;
font-weight: 900;
}
\ No newline at end of file
src/app/delivery/delivery.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DeliveryPage } from './delivery.page';
describe('DeliveryPage', () => {
let component: DeliveryPage;
let fixture: ComponentFixture<DeliveryPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DeliveryPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DeliveryPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/delivery/delivery.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-delivery',
templateUrl: './delivery.page.html',
styleUrls: ['./delivery.page.scss'],
})
export class DeliveryPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/home/home.page.html
<div class="nav_header"> <div class="nav_header">
<ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"> <button class="nav_btn nav_menu floatLeft">
<img src="../assets/Group22_2.png">
</button> </button>
</ion-menu-toggle>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."> </div> <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."> </div>
<button class="nav_btn nav_search floatRight"> <button class="nav_btn nav_search floatRight">
......
src/app/home/home.page.ts
...@@ -51,3 +51,4 @@ export class HomePage implements OnInit { ...@@ -51,3 +51,4 @@ export class HomePage implements OnInit {
} }
} }
src/app/nearby/nearby.page.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<ion-content> <ion-content>
<div class="nearby_map"> <div class="nearby_map">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="10" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'"> <agm-map [latitude]="lat" [longitude]="lng" [zoom]="15" [disableDefaultUI]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [iconUrl]="'/assets/nearby.png'" *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable"> <agm-marker [iconUrl]="'/assets/nearby.png'" *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable">
<agm-info-window> <agm-info-window>
<div class="click_marker"> <div class="click_marker">
......
src/app/nearby/nearby.page.ts
...@@ -10,6 +10,7 @@ import { MouseEvent } from '@agm/core'; ...@@ -10,6 +10,7 @@ import { MouseEvent } from '@agm/core';
}) })
export class NearbyPage implements OnInit { export class NearbyPage implements OnInit {
markers = [ markers = [
{ {
lat: 51.67, lat: 51.67,
...@@ -25,6 +26,7 @@ export class NearbyPage implements OnInit { ...@@ -25,6 +26,7 @@ export class NearbyPage implements OnInit {
lat: 51.65, lat: 51.65,
lng: 7.82, lng: 7.82,
draggable: false draggable: false
}, },
{ {
lat: 51.655, lat: 51.655,
...@@ -44,11 +46,12 @@ export class NearbyPage implements OnInit { ...@@ -44,11 +46,12 @@ export class NearbyPage implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
} }
// google maps zoom level // google maps zoom level
zoom: number = 8;
lat: number = 51.673858; lat: number = 51.673858;
lng: number = 7.815982; lng: number = 7.815982;
...@@ -78,3 +81,10 @@ export class NearbyPage implements OnInit { ...@@ -78,3 +81,10 @@ export class NearbyPage implements OnInit {
window.history.back(); window.history.back();
} }
} }
interface marker {
lat: number;
lng: number;
label?: string;
draggable: boolean;
}
src/app/profile/profile.page.html
<ion-header> <div class="nav_header">
<ion-toolbar> <ion-menu-toggle>
<ion-title>profile</ion-title> <button class="nav_btn nav_menu floatLeft">
</ion-toolbar> </button>
</ion-header> </ion-menu-toggle>
<div class="nav_title floatLeft">
<img src="../../assets/Group [email protected]">
</div>
<div class="clear"></div>
</div>
<ion-content> <ion-content>
<div class="profile_wrapper">
<div class="profile_banner">
<div class="profile_circle">
<div class="edit"></div>
</div>
<h5>JOHN DOE</h5>
<p>LOGOUT</p>
</div>
<div class="account_wrapper">
<div class="account_header">
<h5 class="floatLeft">ACCOUNT INFORMATION</h5>
<span class="floatRight"><img src="../../assets/edit.png"></span>
<div class="clear"></div>
</div>
<div class="row">
<ion-row>
<ion-col class="textLeft p0">
<p>Name<span>Verfied</span></p>
</ion-col>
<ion-col class="textRight p0">
<h6>John Doe</h6>
</ion-col>
</ion-row>
</div>
<div class="row">
<ion-row>
<ion-col class="textLeft p0">
<p>Email<span>Not Verfied yet</span></p>
</ion-col>
<ion-col class="textRight p0">
<h6>[email protected]</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>
</ion-content> </ion-content>
\ No newline at end of file
src/app/profile/profile.page.scss
.profile_wrapper {
.profile_banner {
width: 100%;
background-image: url("../../assets/profile_banner.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding-top: 40px;
.profile_circle {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: relative;
margin: 0 auto;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.edit {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background-color: #000;
background-image: url("../../assets/edit_icon.png");
background-size: cover;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
}
h5 {
text-align: center;
color: #fff;
margin: 0px;
padding-top: 15px;
font-weight: 600;
padding-bottom: 5px;
}
p {
color: rgba(206, 153, 76, 1);
text-align: center;
margin: 0px;
padding-bottom: 20px;
font-weight: 700;
}
}
.account_wrapper {
width: calc(100% - 40px);
margin: 0 auto;
padding-top: 20px;
padding-bottom: 100px;
.account_header {
padding-bottom: 15px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
span {
color: rgba(59, 57, 77, 1);
img {
width: 20px;
}
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
}
.row {
padding-bottom: 20px;
}
hr {
border-bottom: 1px solid rgba(176, 174, 199, .5);
height: 0px;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
}
}
}
\ No newline at end of file
src/app/review/review.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 { ReviewPage } from './review.page';
const routes: Routes = [
{
path: '',
component: ReviewPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ReviewPage]
})
export class ReviewPageModule {}
src/app/review/review.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>RATING & REVIEWS</h4>
</div>
<div class="clear"></div>
</div>
<ion-content>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image"></div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="rating_div">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
</ion-content>
\ No newline at end of file
src/app/review/review.page.scss 0 → 100644
.nearby_shop_list {
ul {
margin: 0px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
li {
list-style: none;
.nearby_image {
width: 110px;
height: 120px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 110px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.rating_div {
.rating {
border: none;
width: 250px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 35px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: rgba(41, 40, 91, 1);
}
/* hover previous stars in list */
.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: rgba(41, 40, 91, 1);
}
}
\ No newline at end of file
src/app/review/review.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReviewPage } from './review.page';
describe('ReviewPage', () => {
let component: ReviewPage;
let fixture: ComponentFixture<ReviewPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ReviewPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ReviewPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/review/review.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-review',
templateUrl: './review.page.html',
styleUrls: ['./review.page.scss'],
})
export class ReviewPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/global.scss
...@@ -113,8 +113,8 @@ button { ...@@ -113,8 +113,8 @@ button {
} }
} }
.gm-style .gm-style-iw-c{ .gm-style .gm-style-iw-c {
padding:0px !important; padding: 0px !important;
} }
.home_banner { .home_banner {
...@@ -390,6 +390,10 @@ app-ordercancelled { ...@@ -390,6 +390,10 @@ app-ordercancelled {
padding: 0px !important; padding: 0px !important;
} }
app-delivery {
padding: 0px !important;
}
.nav_header { .nav_header {
position: fixed; position: fixed;
top: 0px; top: 0px;
...@@ -487,3 +491,51 @@ ion-header { ...@@ -487,3 +491,51 @@ ion-header {
z-index: 9999 !important; z-index: 9999 !important;
order: 0 !important; order: 0 !important;
} }
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ripple div {
position: absolute;
border: 5px solid #29285b;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 30px;
left: 30px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: -1px;
left: -1px;
width: 60px;
height: 60px;
opacity: 0;
}
}
.loader {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding-top: 50%;
background-color: rgba(273, 273, 273, 0.9);
text-align: center;
z-index: 99;
}
\ 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