Orders page mobile UI

src/app/orders/orders.component.html

@@ -1,18 +1,20 @@
 <div class="widget-heading-holder">
 	<header> Order List </header>
-	<div class="selector-container">
-		<app-custom-selector header="Status" [options]="statusOptions" width="200" [defaultOptionId]="statusOptions[0].id"></app-custom-selector>
+	<div class="filter-container">
+		<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>
-	</div>
+			<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">
-		<button> <i class="icon ion-md-search"></i> </button>
+		<div class="search-input">
+			<input type="text" placeholder="Quick Search">
+			<button> <i class="icon ion-md-search"></i> </button>
+		</div>
 	</div>
 </div>
 
-<table>
+<table class="order-table">
 	<tr class="heading-row">
 		<th> Order ID </th>
 		<th> Order Time </th>
@@ -104,6 +106,95 @@
 	</tr>
 </table>
 
+<ul class="order-list">
+	<li class="card">
+		<div class="header">
+			<span> Order ID : 29320 </span>
+			<span> Order Time: 2 Mins ago </span>
+		</div>
+		<table>
+			<tr>
+				<td>
+					<div> KFC Bucket </div>
+				</td>
+				<td>
+					<div> Qty: 1 </div>
+				</td>
+				<td>
+					<div> &#x20B9; 250 </div>
+				</td>
+			</tr>
+		</table>
+		<div class="order-status-holder">
+			<div class="status">
+				Paid online
+			</div>
+			<div class="action-buttons">
+				<button> Confirm </button>
+				<button (click)="showRejectionPopup = true"> Reject </button>
+			</div>
+		</div>
+	</li>
+
+	<li class="card">
+		<div class="header">
+			<span> Order ID : 29320 </span>
+			<span> Order Time: 2 Mins ago </span>
+		</div>
+		<table>
+			<tr>
+				<td>
+					<div> KFC Bucket </div>
+				</td>
+				<td>
+					<div> Qty: 1 </div>
+				</td>
+				<td>
+					<div> &#x20B9; 250 </div>
+				</td>
+			</tr>
+		</table>
+		<div class="order-status-holder">
+			<div class="status">
+				Paid online
+			</div>
+			<div class="action-buttons">
+				<button> Confirm </button>
+				<button (click)="showRejectionPopup = true"> Reject </button>
+			</div>
+		</div>
+	</li>
+
+	<li class="card">
+		<div class="header">
+			<span> Order ID : 29320 </span>
+			<span> Order Time: 2 Mins ago </span>
+		</div>
+		<table>
+			<tr>
+				<td>
+					<div> KFC Bucket </div>
+				</td>
+				<td>
+					<div> Qty: 1 </div>
+				</td>
+				<td>
+					<div> &#x20B9; 250 </div>
+				</td>
+			</tr>
+		</table>
+		<div class="order-status-holder">
+			<div class="status">
+				Paid online
+			</div>
+			<div class="action-buttons">
+				<button> Confirm </button>
+				<button (click)="showRejectionPopup = true"> Reject </button>
+			</div>
+		</div>
+	</li>
+</ul>
+
 <section class="popup" [ngClass]="{'active' : showRejectionPopup }">
 	<div class="popup-box">
 		<header> Reason to Reject the Order </header>

src/app/orders/orders.component.scss

@@ -3,8 +3,18 @@
 		margin-right: 10%;
 	}
 
+	.filter-container {
+		display: flex;
+		flex-grow: 1;
+
+		@media screen and (max-width: 1023px) {
+			flex-direction: column-reverse;
+		}
+	}
+
 	.selector-container {
 		display: flex;
+		flex-grow: 1;
 
 		app-custom-selector {
 			margin: 0 10px;
@@ -20,7 +30,7 @@
 		@media screen and (max-width: 1023px) {
 			justify-content: space-between;
 			width: 100%;
-			margin-bottom: 20px;
+			margin: 20px 0;
 		}
 	}
 }
@@ -67,11 +77,15 @@
 }
 
 
-table {
+.order-table {
 	width: 90%;
 	margin: 30px auto;
 	text-align: left;
 
+	@media screen and (max-width: 1023px) {
+		display: none;
+	}
+
 	th {
 		color: var(--grey);
 		font-size: 14px;
@@ -132,3 +146,88 @@ table {
 		}
 	}
 }
+
+.order-list {
+	list-style: none;
+
+	@media screen and (min-width: 1023px) {
+		display: none;
+	}
+
+	.card {
+		width: 90%;
+		margin: 30px auto;
+		background-color: white;
+		border-radius: 10px;
+		box-shadow: 0px 0px 5px var(--grey);
+		overflow: hidden;
+	}
+
+	.header {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		padding: 10px 15px;
+		border-bottom: 1px solid #efefef;
+		color: var(--dark-grey);
+		font-size: 12px;
+		font-weight: 500;
+		letter-spacing: 1px;
+	}
+
+	table {
+		padding: 10px 15px;
+		width: 100%;
+
+		td {
+			font-size: 14px;
+			color: var(--dark-grey);
+			font-weight: 500;
+			letter-spacing: 0.5px;
+
+			&:nth-child(1) {
+				width: 50%;
+			}
+
+			&:nth-child(2) {
+				width: 25%;
+				text-align: center;
+			}
+
+			&:nth-child(3) {
+				width: 25%;
+				text-align: right;
+			}
+		}
+	}
+
+	.order-status-holder {
+		background-color: #efefef;
+		padding: 10px 15px;
+		color: var(--dark-grey);
+		font-size: 12px;
+		display: flex;
+		width: 100%;
+		font-weight: 500;
+		justify-content: space-between;
+		align-items: center;
+
+		.action-buttons {
+			display: flex;
+			width: auto;
+			border-radius: 5px;
+			overflow: hidden;
+
+			button {
+				padding: 5px 20px;
+				color: white;
+				background-color: var(--brand-blue);
+				border: 0px;
+
+				&:nth-child(2) {
+					background-color: #cecece;
+				}
+			}
+		}
+	}
+}

src/styles.scss

@@ -114,6 +114,12 @@ button {
 		transition: transform 0.3s;
 		transition-delay: 0.3s;
 
+		@media screen and (max-width: 1023px) {
+			width: 80%;
+			margin: 0 auto;
+			padding: 15px;
+		}
+
 		header {
 			font-size: 16px;
 			font-weight: 500;
@@ -122,7 +128,7 @@ button {
 
 		select {
 			margin: 20px 0;
-			width: 300px;
+			width: 100%;
 			padding: 10px;
 			border-radius: 10px;
 			font-size: 14px;