Skip to content

G
getme
Commit 05adf738 by Arjun
Options

feedback page, order popup, add address style

parent bdf1f962
Showing with 191 additions and 77 deletions
src/app/app.component.html
...@@ -6,10 +6,7 @@ ...@@ -6,10 +6,7 @@
<ion-menu-toggle *ngIf="userData"> <ion-menu-toggle *ngIf="userData">
<div class="top_banner"> <div class="top_banner">
<div class="top_image"> <div class="top_image">
<img <img [src]="userData.profilePhoto" onerror="this.src='./../assets/asset_avatar.png'" />
[src]="userData.profilePhoto"
onerror="this.src='./../assets/asset_avatar.png'"
/>
</div> </div>
<div class="top_detail"> <div class="top_detail">
<h4>{{ userData.name }}</h4> <h4>{{ userData.name }}</h4>
...@@ -31,10 +28,7 @@ ...@@ -31,10 +28,7 @@
<div class="sub_menu"> <div class="sub_menu">
<ul *ngIf="categoryService.activecategories"> <ul *ngIf="categoryService.activecategories">
<ion-menu-toggle> <ion-menu-toggle>
<li <li *ngFor="let category of categoryService.activecategories" (click)="goToPage('catstorelist', category)">
*ngFor="let category of categoryService.activecategories"
(click)="goToPage('catstorelist', category)"
>
{{ category.catName }} {{ category.catName }}
</li> </li>
</ion-menu-toggle> </ion-menu-toggle>
...@@ -49,9 +43,7 @@ ...@@ -49,9 +43,7 @@
<li (click)="vieworder('feedback')">Complaints & Feedback</li> <li (click)="vieworder('feedback')">Complaints & Feedback</li>
</ion-menu-toggle> </ion-menu-toggle>
<li> <li>
<span class="floatLeft" (click)="authService.SignOut()" <span class="floatLeft" (click)="authService.SignOut()">Logout</span>
>Logout</span
>
<span class="floatRight version">Version 0.1.0.2</span> <span class="floatRight version">Version 0.1.0.2</span>
<div class="clear"></div> <div class="clear"></div>
</li> </li>
...@@ -65,49 +57,40 @@ ...@@ -65,49 +57,40 @@
</ion-app> </ion-app>
<div class="common_tab" [hidden]="fetchCase() === true" *ngIf="!isSearchOpen"> <div class="common_tab" [hidden]="fetchCase() === true" *ngIf="!isSearchOpen">
<button (click)="istoggle()"></button>
<ul> <ul>
<li (click)="goToPage('home')"> <li (click)="goToPage('home')">
<div <div class="icon_sec m1_icon" [class.m1_icon_act]="sec_active1" (click)="setActive1()"></div>
class="icon_sec m1_icon"
[class.m1_icon_act]="sec_active1"
(click)="setActive1()"
></div>
</li> </li>
<li (click)="goToPage('catagory')"> <li (click)="goToPage('catagory')">
<div <div class="icon_sec m2_icon" [class.m2_icon_act]="sec_active2" (click)="setActive2()"></div>
class="icon_sec m2_icon"
[class.m2_icon_act]="sec_active2"
(click)="setActive2()"
></div>
</li> </li>
<li (click)="searchModal()"> <li (click)="searchModal()">
<div <div class="icon_sec m3_icon" [class.m3_icon_act]="sec_active3" (click)="setActive3()"></div>
class="icon_sec m3_icon"
[class.m3_icon_act]="sec_active3"
(click)="setActive3()"
></div>
</li> </li>
<li (click)="goToPage('cart')"> <li (click)="goToPage('cart')">
<div <div class="icon_sec m4_icon" [class.m4_icon_act]="sec_active4" (click)="setActive4()"></div>
class="icon_sec m4_icon"
[class.m4_icon_act]="sec_active4"
(click)="setActive4()"
></div>
</li> </li>
<li (click)="goToPage('myorder')"> <li (click)="goToPage('myorder')">
<div <div class="icon_sec m5_icon" [class.m5_icon_act]="sec_active5" (click)="setActive5()"></div>
class="icon_sec m5_icon"
[class.m5_icon_act]="sec_active5"
(click)="setActive5()"
></div>
</li> </li>
<li (click)="goToPage('profile')"> <li (click)="goToPage('profile')">
<div <div class="icon_sec m6_icon" [class.m6_icon_act]="sec_active6" (click)="setActive6()" menuClose></div>
class="icon_sec m6_icon"
[class.m6_icon_act]="sec_active6"
(click)="setActive6()"
menuClose
></div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="common-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="pop_inner">
<div class="img-wrapper">
<img src="../assets/model1_2.png" alt="Product">
</div>
<div class="content">
<h1>Order Placed Successfully</h1>
<p>Order ID 123456 , Green Churidhar has been successfully orderd. </p>
</div>
<span (click)="istoggle();"><img src="../assets/close.png" alt="Close"></span>
</div>
</div>
\ No newline at end of file
src/app/app.component.scss
...@@ -166,3 +166,64 @@ ...@@ -166,3 +166,64 @@
} }
} }
} }
.common-pop-wrapper {
width: 100%;
height: 90px !important;
position: fixed;
top: 60px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99;
.pop_inner {
margin: 0 auto;
width: 95%;
padding: 10px;
background-color: #fff;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
border-radius: 10px;
display: flex;
position: relative;
.img-wrapper {
width: 70px;
height: 70px;
border-radius: 8px;
background-color: #f9f9f9;
display: block;
img {
width: 70px;
min-width: 70px;
height: 70px;
border-radius: 8px;
background-color: #f9f9f9;
}
}
.content {
display: flex;
-webkit-box-align: center;
flex-direction: column;
text-align: left;
justify-content: center;
padding-left: 12px;
overflow: hidden;
h1 {
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
font-size: 18px;
}
p {
margin-bottom: 0;
line-height: 1;
margin-top: 8px;
}
}
}
span {
width: 20px;
position: absolute;
right: 4px;
top: 4px;
}
}
\ No newline at end of file
src/app/app.component.ts
...@@ -17,10 +17,23 @@ import { SubjectService } from './../config/subject.service'; ...@@ -17,10 +17,23 @@ import { SubjectService } from './../config/subject.service';
import { CategoriesService } from './../config/category.service'; import { CategoriesService } from './../config/category.service';
import { SearchmodalPage } from './searchmodal/searchmodal.page'; import { SearchmodalPage } from './searchmodal/searchmodal.page';
import { trigger, transition, animate, style } from '@angular/animations';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: 'app.component.html', templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'] styleUrls: ['app.component.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 AppComponent { export class AppComponent {
isSearchOpen = false; isSearchOpen = false;
...@@ -40,6 +53,8 @@ export class AppComponent { ...@@ -40,6 +53,8 @@ export class AppComponent {
userData: any; userData: any;
tabData = true; tabData = true;
isShow = false;
constructor( constructor(
private platform: Platform, private platform: Platform,
private splashScreen: SplashScreen, private splashScreen: SplashScreen,
...@@ -118,7 +133,8 @@ export class AppComponent { ...@@ -118,7 +133,8 @@ export class AppComponent {
'changeaddress', 'changeaddress',
'changedetails', 'changedetails',
'contact', 'contact',
'myorder' 'myorder',
'review'
]; ];
const currentUrl = this.router.url.split('/'); const currentUrl = this.router.url.split('/');
const index = restrictedUrl.findIndex(x => x === currentUrl[1]); const index = restrictedUrl.findIndex(x => x === currentUrl[1]);
...@@ -242,4 +258,8 @@ export class AppComponent { ...@@ -242,4 +258,8 @@ export class AppComponent {
}); });
return await modal.present(); return await modal.present();
} }
istoggle() {
this.isShow = !this.isShow;
}
} }
src/app/home/home.page.html
...@@ -31,8 +31,7 @@ ...@@ -31,8 +31,7 @@
<h5>{{center.centerName}}</h5> <h5>{{center.centerName}}</h5>
<p>{{center.description}}</p> <p>{{center.description}}</p>
</div> </div>
<img [src]="center.centerImg" <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'" />
onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'" />
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
</div> </div>
...@@ -40,12 +39,10 @@ ...@@ -40,12 +39,10 @@
Featured Stores Featured Stores
</div> </div>
<div class="featured_slider"> <div class="featured_slider">
<ion-slides pager="false" [options]="slideOpts" <ion-slides pager="false" [options]="slideOpts" *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
*ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
<ion-slide *ngFor="let shopper of shopperService.activeshoppers"> <ion-slide *ngFor="let shopper of shopperService.activeshoppers">
<div class="feature_product" (click)="goToPage('productlist', shopper)"> <div class="feature_product" (click)="goToPage('productlist', shopper)">
<img [src]="shopper.featuredImage" <img [src]="shopper.featuredImage" onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'" />
onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'" />
<div class="feature_overlay"> <div class="feature_overlay">
<h5>{{shopper.name}}</h5> <h5>{{shopper.name}}</h5>
<p>{{shopper.caption}}</p> <p>{{shopper.caption}}</p>
...@@ -74,8 +71,7 @@ ...@@ -74,8 +71,7 @@
<ul *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0"> <ul *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0">
<li *ngFor="let center of centerService.nearcenters" (click)="goToPage('storelist', center)"> <li *ngFor="let center of centerService.nearcenters" (click)="goToPage('storelist', center)">
<div class="nearby_image"> <div class="nearby_image">
<img [src]="center.centerImg" <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'" />
onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'" />
</div> </div>
<div class="nearby_detail"> <div class="nearby_detail">
<h5> <h5>
...@@ -96,10 +92,8 @@ ...@@ -96,10 +92,8 @@
</div> </div>
<div class="featured_catagory_list"> <div class="featured_catagory_list">
<ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0"> <ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
<li *ngFor="let categories of categoriesService.activecategories" <li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
(click)="goToPage('catstorelist', categories)"> <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'" />
<img [src]="categories.catImage"
onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'" />
<div class="featured_overlay"> <div class="featured_overlay">
<h4>{{categories.catName}}</h4> <h4>{{categories.catName}}</h4>
</div> </div>
...@@ -119,8 +113,7 @@ ...@@ -119,8 +113,7 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content class="sort_wrappper"> <ion-content class="sort_wrappper">
<agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
[backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map> </agm-map>
<div class="add_address_wrapper"> <div class="add_address_wrapper">
...@@ -134,9 +127,7 @@ ...@@ -134,9 +127,7 @@
<li *ngFor="let address of addressService.addressList; let i = index"> <li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft"> <div class="floatLeft">
{{address.default}} {{address.default}}
<input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
(click)="setDefault(address.addressId)" [value]="address.addressId" #addressType
[checked]="address.defaultVal == 1" />
<label for="styled-checkbox-{{i}}"> <label for="styled-checkbox-{{i}}">
{{address.addressType}} {{address.addressType}}
</label> </label>
......
src/app/home/home.page.scss
...@@ -262,9 +262,9 @@ ...@@ -262,9 +262,9 @@
.add_address_wrapper { .add_address_wrapper {
position: fixed; position: fixed;
top: 40%;
overflow: scroll;
height: auto; height: auto;
max-height: 70%;
overflow: scroll;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
......
src/app/review/review.page.html
...@@ -11,22 +11,19 @@ ...@@ -11,22 +11,19 @@
<div class="nearby_shop_list"> <div class="nearby_shop_list">
<ul> <ul>
<li (click)="goToPage('productlist')"> <li (click)="goToPage('productlist')">
<div class="nearby_image"></div> <div class="nearby_image">
<img src="../../assets/2193bb91-3be9-4de9-96f4-4ce7aab8547e1558436499234-RARE-Women-Black-Printed-A-Line-Dress-6731558436495088-1@3x.png" alt="">
</div>
<div class="nearby_detail"> <div class="nearby_detail">
<h5> <h5> Carnival Life</h5>
<span class="floatLeft">Carnival Life</span> <p><span><img src="../assets/Path61_2.png"> 4</span> Men's & Women's Fashion</p>
<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>
<div class="clear"></div> <div class="clear"></div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="rating_div"> <div class="rating_div">
<h5>Rate Us</h5>
<fieldset class="rating"> <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="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="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
...@@ -41,4 +38,10 @@ ...@@ -41,4 +38,10 @@
</fieldset> </fieldset>
</div> </div>
<div class="form_div">
<p>Comments</p>
<textarea required name="message" class="form-control" rows="8" placeholder="Type here.."></textarea>
<button class="login_btn"> SUBMIT </button>
</div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/review/review.page.scss
.nearby_shop_list { .nearby_shop_list {
ul { ul {
margin: 0px; margin-top: 25px;
padding: 10px; padding: 10px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8px;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
...@@ -30,14 +31,14 @@ ...@@ -30,14 +31,14 @@
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
font-weight: 900; font-weight: 900;
padding-bottom: 2px; padding-bottom: 2px;
img {
width: 16px;
}
} }
p { p {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(176, 174, 199); color: rgba(176, 174, 199);
img {
width: 16px;
}
} }
} }
} }
...@@ -45,10 +46,22 @@ ...@@ -45,10 +46,22 @@
} }
.rating_div { .rating_div {
margin: 0px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
display: flex;
h5 {
margin: 0px;
padding: 0px;
color: #3b394d;
font-weight: 900;
display: flex;
align-items: center;
}
.rating { .rating {
border: none; border: none;
width: 250px; width: 250px;
margin: 0 auto;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
...@@ -88,3 +101,42 @@ ...@@ -88,3 +101,42 @@
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
} }
} }
.form_div {
padding: 10px;
padding-left: 20px;
padding-right: 20px;
.form-control {
border: 1px solid rgba(215, 213, 228, 1);
background: transparent;
color: #000;
width: 100%;
border-radius: 8px;
font-size: 16px;
padding: 11px 15px;
resize: none;
outline: none;
transition: all .4s ease-in-out;
&::placeholder {
color: rgba(215, 213, 228, 1);
}
&:focus {
border: 1px solid #f3d09f;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
margin-top: 30px;
}
p {
color: #3b394d;
font-weight: 900;
margin-top: 0;
}
}
\ 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