From 19e0fe970930a38b29e8c73ac4766196e97c9bc3 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Tue, 10 Dec 2019 13:28:07 +0530
Subject: [PATCH] Partial commit

---
 .../custom-selector.component.html            |  2 +-
 src/app/orders/orders.component.html          | 42 +++++++++++++------
 src/app/orders/orders.component.scss          | 21 +++++++++-
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/app/custom-selector/custom-selector.component.html b/src/app/custom-selector/custom-selector.component.html
index 216973c..963375e 100644
--- a/src/app/custom-selector/custom-selector.component.html
+++ b/src/app/custom-selector/custom-selector.component.html
@@ -1,4 +1,4 @@
-<div class="selector" [ngStyle]="{'width.px' : 200 }">
+<div class="selector">
 	<div class="container" (click)="showDropdown = !showDropdown">
 		<div class="selected-value">
 			{{ header }}: <span *ngIf="selectedOption"> {{ selectedOption.name }} </span>
diff --git a/src/app/orders/orders.component.html b/src/app/orders/orders.component.html
index 70fb4b6..d0eb476 100644
--- a/src/app/orders/orders.component.html
+++ b/src/app/orders/orders.component.html
@@ -1,10 +1,10 @@
 <div class="widget-heading-holder">
 	<header> Order List </header>
-	<app-custom-selector header="Status" [options]="statusOptions" width="200"
-	[defaultOptionId]="statusOptions[0].id"></app-custom-selector>
+	<div class="selector-container">
+		<app-custom-selector header="Status" [options]="statusOptions" width="200" [defaultOptionId]="statusOptions[0].id"></app-custom-selector>
 
-	<app-custom-selector header="Date" [options]="dateOptions" width="200"
-	[defaultOptionId]="dateOptions[0].id"></app-custom-selector>
+		<app-custom-selector header="Date" [options]="dateOptions" width="200" [defaultOptionId]="dateOptions[0].id"></app-custom-selector>
+	</div>
 
 	<div class="search-input">
 		<input type="text" placeholder="Quick Search">
@@ -29,8 +29,14 @@
 			<div> 8PC Hot &amp; Crispy </div>
 			<div> KFC 4 + 4 </div>
 		</td>
-		<td> <div> 1 </div> <div> 4 </div> </td>
-		<td> <div> &#x20B9; 750 </div> <div> &#x20B9; 250 </div> </td>
+		<td>
+			<div> 1 </div>
+			<div> 4 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 750 </div>
+			<div> &#x20B9; 250 </div>
+		</td>
 		<td> Paid Online </td>
 		<td>
 			<div class="action-buttons">
@@ -46,8 +52,12 @@
 		<td>
 			<div> KFC 4 + 4 </div>
 		</td>
-		<td> <div> 1 </div> </td>
-		<td> <div> &#x20B9; 750 </div> </td>
+		<td>
+			<div> 1 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 750 </div>
+		</td>
 		<td> Paid Online </td>
 		<td>
 			<div class="status success"> Completed </div>
@@ -60,8 +70,12 @@
 		<td>
 			<div> KFC 4 + 4 </div>
 		</td>
-		<td> <div> 1 </div> </td>
-		<td> <div> &#x20B9; 750 </div> </td>
+		<td>
+			<div> 1 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 750 </div>
+		</td>
 		<td> Paid Online </td>
 		<td>
 			<div class="status failed"> Cancelled </div>
@@ -74,8 +88,12 @@
 		<td>
 			<div> KFC Bucket </div>
 		</td>
-		<td> <div> 1 </div> </td>
-		<td> <div> &#x20B9; 250 </div> </td>
+		<td>
+			<div> 1 </div>
+		</td>
+		<td>
+			<div> &#x20B9; 250 </div>
+		</td>
 		<td> COD </td>
 		<td>
 			<div class="action-buttons">
diff --git a/src/app/orders/orders.component.scss b/src/app/orders/orders.component.scss
index 2735ed7..7a32e30 100644
--- a/src/app/orders/orders.component.scss
+++ b/src/app/orders/orders.component.scss
@@ -3,8 +3,25 @@
 		margin-right: 10%;
 	}
 
-	app-custom-selector {
-		margin: 0 10px;
+	.selector-container {
+		display: flex;
+
+		app-custom-selector {
+			margin: 0 10px;
+			flex-grow: 1;
+
+			@media screen and (max-width: 1023px) {
+				margin: 0;
+				width: 45%;
+				flex-grow: 0;
+			}
+		}
+
+		@media screen and (max-width: 1023px) {
+			justify-content: space-between;
+			width: 100%;
+			margin-bottom: 20px;
+		}
 	}
 }