Partial commit, outlet details ui revamp

src/app/mocks/menu-items.ts

@@ -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,

src/app/outlet-details/outlet-details.page.html

@@ -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">

src/app/outlet-details/outlet-details.page.scss

@@ -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;
-    }
-}

src/app/outlet-details/outlet-details.page.ts

@@ -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,