kj
/
mall-app
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

Partial commit, outlet details ui revamp

master
kj1352 6 vuotta sitten
vanhempi
47e5682ff8
commit
359e49665e
4 muutettua tiedostoa jossa 190 lisäystä ja 175 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -3
      src/app/mocks/menu-items.ts
  2. +38
    -27
      src/app/outlet-details/outlet-details.page.html
  3. +148
    -145
      src/app/outlet-details/outlet-details.page.scss
  4. +1
    -0
      src/app/outlet-details/outlet-details.page.ts

+ 3
- 3
src/app/mocks/menu-items.ts Näytä tiedosto

@@ -27,7 +27,7 @@ export const MENU_ITEMS_1 = [new MenuItem({
export const MENU_ITEMS_2 = [new MenuItem({
id: '0004',
name: 'Margherita Pizza',
image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-pizzas-side-1.jpg',
image_url: 'https://content3.jdmagicbox.com/comp/def_content_category/cafe-coffee-day/cafe-coffee-day-584-bbho1.jpg',
description: 'Cheese pizza topped with tomato sauce, garlic sauce and fresh basil.',
is_vegeterian: true,
wait_duration: 25,
@@ -38,7 +38,7 @@ export const MENU_ITEMS_2 = [new MenuItem({
}), new MenuItem({
id: '0005',
name: 'Espresso Shot',
image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-classic-hot-bottom.jpg',
image_url: 'https://www.cafecoffeeday.com/sites/default/files/Espresso_0.jpg',
description: 'Coffee at its simplest best. Without milk, served with cold water on the side. We call it a simple big-shot.',
is_vegeterian: true,
wait_duration: 5,
@@ -49,7 +49,7 @@ export const MENU_ITEMS_2 = [new MenuItem({
}), new MenuItem({
id: '0006',
name: 'The Coffee Gola',
image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-Coffetini-Easel-side.jpg',
image_url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7jlUBBFU3_3mUQuQ9Lol1uPs1ZkJkxqrdmSHEIIBtTODTB0nSew',
description: 'The perfect blend of coffee, almonds and a rich vanilla gola. Sure to give you an exotic kulfi experience.',
is_vegeterian: true,
wait_duration: 15,


+ 38
- 27
src/app/outlet-details/outlet-details.page.html Näytä tiedosto

@@ -32,7 +32,10 @@

<div class="card-holder">
<div class="card">
<h3> {{ outlet_details.name }} </h3>
<h3>
{{ outlet_details.name }}
<ion-button size="small" fill="clear"> <ion-icon name="information-circle"></ion-icon> </ion-button>
</h3>
<p> {{ outlet_details.description }} </p>
<div class="stats-holder">
<div class="stat"> <ion-icon name="star"></ion-icon> {{ outlet_details.rating }} </div>
@@ -52,41 +55,49 @@
<div class="details-header">
<span class="count"> {{ temp_outlet_details.menu_items.length }} FOOD ITEMS </span>
<div class="display-formats">
<button> <ion-icon name="list"></ion-icon> </button>
<button> <ion-icon name="grid"></ion-icon> </button>
<button [ngClass]="{'active' : !show_grid }" (click)="show_grid = false"> <ion-icon name="list"></ion-icon> </button>
<button [ngClass]="{'active' : show_grid }" (click)="show_grid = true"> <ion-icon name="grid"></ion-icon> </button>
</div>
</div>

<div class="items-holder">
<section class="items-holder" [ngClass]="{'list-mode' : !show_grid }">

<div class="item" *ngFor="let item of temp_outlet_details.menu_items"
[ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
<div class="rating"> <ion-icon name="star"></ion-icon> {{ item.rating }} </div>
<img src="{{ item.image_url }}">
<h5> {{ item.name }} </h5>
<p [ngClass]="{'expand' : selected_description === item.id }"> {{ item.description }}
<a *ngIf="selected_description !== item.id" (click)="selected_description = item.id"> More </a>
<a *ngIf="selected_description === item.id" (click)="selected_description = null"> Less </a>
</p>
<div class="label-holder">
<div class="category" [ngClass]="{'non-veg' : !item.is_vegeterian, 'veg' : item.is_vegeterian }"></div>
<span *ngIf="!item.is_vegeterian"> Non-Veg Meals </span>
<span *ngIf="item.is_vegeterian"> Veg Meals </span>
<div class="stats-holder" *ngIf="show_grid">
<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
</div>
<div class="duration"> <ion-icon src="assets/custom/cook.svg"></ion-icon> {{ item.wait_duration }} Minutes </div>
<div class="price">
<span class="discounted"> @ Rs {{ calculateDiscount(item.price, item.discount) }}/-* </span>
<span class="actual-price"> Rs {{ item.price }}/- </span>
<div class="image-holder">
<img [src]="item.image_url">
<div class="label-holder">
<div class="category" [ngClass]="{'non-veg' : !item.is_vegeterian, 'veg' : item.is_vegeterian }"></div>
</div>
</div>
<button class="cart-button" (click)="addToCart(item)"
*ngIf="!checkIfPresentInCart(item.id)"> Add to Cart </button>
<div class="count-buttons-holder" *ngIf="checkIfPresentInCart(item.id)">
<ion-button (click)="decreaseCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </ion-button>
<div class="count"> {{ getItemCount(item.id) }} </div>
<ion-button (click)="increaseCartItemCount(item)"> <ion-icon name="add"></ion-icon> </ion-button>

<div class="content-holder">
<h5> {{ item.name }} </h5>

<div class="stats-holder" *ngIf="!show_grid">
<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
</div>

<div class="price">
<span> ₹ {{ calculateDiscount(item.price, item.discount) }} </span>
<button class="cart-button" (click)="addToCart(item)" *ngIf="!checkIfPresentInCart(item.id)">
<ion-icon name="cart"></ion-icon>
</button>
<div class="count-buttons-holder" *ngIf="checkIfPresentInCart(item.id)">
<ion-button (click)="decreaseCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </ion-button>
<div class="count"> {{ getItemCount(item.id) }} </div>
<ion-button (click)="increaseCartItemCount(item)"> <ion-icon name="add"></ion-icon> </ion-button>
</div>
</div>
</div>
</div>

</div>
</div>
</section>
</div>

<div class="advertisement">


+ 148
- 145
src/app/outlet-details/outlet-details.page.scss Näytä tiedosto

@@ -164,6 +164,16 @@
font-size: 20px;
letter-spacing: 0.5px;
font-weight: 600;
display: flex;
align-items: flex-start;
justify-content: space-between;

ion-button {
color: var(--brand-blue);
font-size: 14px;
margin: 0;
--padding-end: 0;
}
}

.stats-holder {
@@ -270,37 +280,114 @@
justify-content: space-between;
flex-wrap: wrap;

&.list-mode {
flex-direction: column;

.item {
width: 100%;
display: flex;
justify-content: space-between;

.stats-holder {
width: 65%;
}

.image-holder {
width: 40%;
}

h5 {
margin: 0 auto 10px;
}

.content-holder {
width: 55%;
}
}
}

.item {
width: 43%;
width: 46%;
position: relative;
margin-bottom: 30px;
box-shadow: 0px 0px 5px rgba(#000000, 0.2);
padding: 10px;
border-radius: 10px;

&.hide {
display: none;
}

.rating {
position: absolute;
right: 0;
top: 0;
background-color: var(--brand-blue);
color: white;
font-size: 10px;
font-weight: 500;
border-bottom-left-radius: 10px;
border-top-right-radius: 8px;
padding: 6px;
}
.stats-holder {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 12px;
color: var(--brand-grey);
font-weight: 500;
padding-bottom: 10px;

ion-icon {
font-size: 14px;
float: left;
position: relative;
top: 1px;
margin-right: 3px;
}
}

img {
border-radius: 10px;
height: 80px;
width: 100%;
object-fit: cover;
}
.image-holder {
position: relative;

img {
border-radius: 5px;
height: 80px;
width: 100%;
object-fit: cover;
}

.category {
background-color: white;
border: 1px solid var(--brand-dark-grey);
border-radius: 2px;
width: 16px;
height: 16px;
position: absolute;
left: 3px;
bottom: 7px;
display: flex;
align-items: center;
justify-content: center;

&::before {
content: '';
width: 8px;
height: 8px;
background-color: var(--brand-grey);
border-radius: 50%;
}

&.veg {
border-color: var(--ion-color-success);

&::before {
background-color: var(--ion-color-success);
}
}

&.non-veg {
border-color: var(--ion-color-danger);

&::before {
background-color: var(--ion-color-danger);
}
}
}
}

h5 {
font-size: 13px;
font-size: 14px;
color: var(--brand-dark-grey);
font-weight: bold;
letter-spacing: 0.5px;
@@ -308,113 +395,54 @@
white-space: nowrap;
text-overflow: ellipsis;
}

p {
font-size: 10px;
color: var(--brand-grey);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;

&.expand {
white-space: normal;
}

a {
display: block;
width: 100%;
color: var(--brand-blue);
text-decoration: underline;
}
}
}

.label-holder {
display: flex;
width: 100%;
align-items: center;
padding-top: 10px;

span {
font-size: 10px;
color: var(--brand-grey);
margin-left: 5px;
}

.category {
border: 1px solid var(--brand-dark-grey);
width: 16px;
height: 16px;
position: relative;
display: flex;
align-items: center;
justify-content: center;

&::before {
content: '';
width: 8px;
height: 8px;
background-color: var(--brand-grey);
border-radius: 50%;
}

&.veg {
border-color: var(--ion-color-success);

&::before {
background-color: var(--ion-color-success);
}
}

&.non-veg {
border-color: var(--ion-color-danger);

&::before {
background-color: var(--ion-color-danger);
}
}
}
}

.duration {
color: var(--brand-dark-grey);
font-size: 10px;
display: flex;
align-items: center;
margin: 10px 0;

ion-icon {
font-size: 14px;
margin-right: 5px;
}
}

.price {
display: flex;
align-items: center;
margin-bottom: 10px;
.discounted {
color: var(--brand-blue);
font-size: 12px;
font-weight: 500;
margin-right: 10px;
}
margin-bottom: 0px;
justify-content: space-between;

.actual-price {
color: var(--brand-dark-grey);
font-size: 10px;
text-decoration: line-through;
}
}
span {
color: var(--brand-dark-grey);
font-size: 14px;
font-weight: 700;
width: 40%;
}

.cart-button {
background-color: var(--brand-blue);
color: white;
font-size: 12px;
padding: 10px 7px;
width: 100%;
border-radius: 5px;
.cart-button {
background-color: var(--brand-blue);
color: white;
font-size: 12px;
width: 30px;
height: 30px;
border-radius: 50%;
}

.count-buttons-holder {
display: flex;
width: 60%;
justify-content: space-between;
align-items: center;
background-color: #efefef;

ion-button {
margin: 0;
width: 30px;
height: 30px;
--padding-start: 0;
--padding-end: 0;
--padding-top: 0;
--padding-bottom: 0;
font-size: 10px;
--background: var(--brand-blue);
}

.count {
color: var(--brand-dark-grey);
font-size: 12px;
}
}
}
}

@@ -426,28 +454,3 @@
object-fit: cover;
}
}

.count-buttons-holder {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #efefef;

ion-button {
margin: 0;
width: 30px;
height: 30px;
--padding-start: 0;
--padding-end: 0;
--padding-top: 0;
--padding-bottom: 0;
font-size: 10px;
--background: var(--brand-blue);
}

.count {
color: var(--brand-dark-grey);
font-size: 12px;
}
}

+ 1
- 0
src/app/outlet-details/outlet-details.page.ts Näytä tiedosto

@@ -24,6 +24,7 @@ export class OutletDetailsPage implements OnInit {
show_sort_popup: boolean = false;
selected_sort: string = null;
cart_items: Array<CartItem> = [];
show_grid: boolean = false;

constructor(
private route: ActivatedRoute,


Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna