Menu items and offers page Mobile UI completed

src/app/menu-items/menu-items.component.html

@@ -10,7 +10,7 @@
 			</div>
 		</div>
 
-		<table *ngIf="selectedTab === 'items'">
+		<table *ngIf="selectedTab === 'items'" class="item-table">
 			<tr>
 				<th> Item No </th>
 				<th> Item Name </th>
@@ -72,6 +72,92 @@
 			</tr>
 		</table>
 
+		<ul *ngIf="selectedTab === 'items'" class="item-list">
+			<li class="card">
+				<div class="info-holder">
+					<header> #1234 8 PC Hot &amp; Crispy </header>
+					<div class="info">
+						<label> Preperation Time: </label>
+						<span> 15 Min </span>
+					</div>
+					<div class="info">
+						<label> Amount: </label>
+						<span>  &#x20B9; 750 </span>
+					</div>
+				</div>
+				<div class="status">
+					Availability Status
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</div>
+			</li>
+
+			<li class="card">
+				<div class="info-holder">
+					<header> #1234 8 PC Hot &amp; Crispy </header>
+					<div class="info">
+						<label> Preperation Time: </label>
+						<span> 15 Min </span>
+					</div>
+					<div class="info">
+						<label> Amount: </label>
+						<span>  &#x20B9; 750 </span>
+					</div>
+				</div>
+				<div class="status">
+					Availability Status
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</div>
+			</li>
+
+			<li class="card">
+				<div class="info-holder">
+					<header> #1234 8 PC Hot &amp; Crispy </header>
+					<div class="info">
+						<label> Preperation Time: </label>
+						<span> 15 Min </span>
+					</div>
+					<div class="info">
+						<label> Amount: </label>
+						<span>  &#x20B9; 750 </span>
+					</div>
+				</div>
+				<div class="status">
+					Availability Status
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</div>
+			</li>
+
+			<li class="card">
+				<div class="info-holder">
+					<header> #1234 8 PC Hot &amp; Crispy </header>
+					<div class="info">
+						<label> Preperation Time: </label>
+						<span> 15 Min </span>
+					</div>
+					<div class="info">
+						<label> Amount: </label>
+						<span>  &#x20B9; 750 </span>
+					</div>
+				</div>
+				<div class="status">
+					Availability Status
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</div>
+			</li>
+		</ul>
+
 		<ul class="offer-list" *ngIf="selectedTab === 'offers'">
 			<li>
 				<div class="info">

src/app/menu-items/menu-items.component.scss

@@ -4,26 +4,34 @@
 	margin-left: auto;
 	align-items: stretch;
 	height: 100%;
-
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+	}
 	.item-details {
 		padding: 0 2.5%;
 		width: 70%;
 		height: calc(100vh - 70px);
 		overflow: auto;
 		margin-right: auto;
-
+		@media screen and (max-width: 1023px) {
+			width: 100%;
+			padding: 0 5%;
+			margin: 0 auto;
+			height: 100%;
+		}
 		&:hover {
 			&::-webkit-scrollbar {
-			  display: block;
+				display: block;
+				@media screen and (max-width: 1023px) {
+					display: none;
+				}
 			}
 		}
-
 		&::-webkit-scrollbar {
 			width: 8px;
 			display: none;
 		}
-
-			/* Track */
+		/* Track */
 		&::-webkit-scrollbar-track {
 			background-color: white;
 		}
@@ -37,11 +45,9 @@
 		}
 	}
 }
-
 .widget-heading-holder {
 	width: 100%;
 }
-
 .tabs-holder {
 	display: flex;
 	width: auto;
@@ -50,7 +56,6 @@
 	background-color: white;
 	width: 150px;
 	position: relative;
-
 	&.left {
 		button {
 			&:first-child {
@@ -58,19 +63,16 @@
 			}
 		}
 	}
-
 	&.right {
 		button {
 			&:last-child {
 				color: white;
 			}
 		}
-
 		&::before {
 			transform: translateX(100%);
 		}
 	}
-
 	&::before {
 		content: '';
 		position: absolute;
@@ -80,7 +82,6 @@
 		height: 100%;
 		transition: transform 0.5s;
 	}
-
 	button {
 		position: relative;
 		border-radius: 20px;
@@ -94,13 +95,13 @@
 		transition: color 0.3s;
 	}
 }
-
-
-table {
+.item-table {
 	width: 100%;
 	margin: 30px 0;
 	text-align: left;
-
+	@media screen and (max-width: 1023px) {
+		display: none;
+	}
 	th {
 		color: var(--grey);
 		font-size: 14px;
@@ -108,7 +109,6 @@ table {
 		padding: 10px 0;
 		letter-spacing: 0.5px;
 	}
-
 	td {
 		border-top: 1px solid rgba(#cecece, 0.5);
 		padding: 10px 0;
@@ -119,33 +119,31 @@ table {
 		line-height: 2;
 		vertical-align: top;
 		width: calc(100% / 5);
-
 		&:nth-child(3) {
 			padding-left: 20px;
 		}
 	}
 }
-
 .subscribed-offers {
 	width: 30%;
 	background-color: white;
-	padding: 30px 30px;
+	padding: 30px;
 	list-style: none;
 	height: calc(100vh - 70px);
 	overflow: auto;
-
+	@media screen and (max-width: 1023px) {
+		display: none;
+	}
 	&:hover {
 		&::-webkit-scrollbar {
-		  display: block;
+			display: block;
 		}
 	}
-
 	&::-webkit-scrollbar {
 		width: 8px;
 		display: none;
 	}
-
-		/* Track */
+	/* Track */
 	&::-webkit-scrollbar-track {
 		background-color: white;
 	}
@@ -157,39 +155,32 @@ table {
 	&::-webkit-scrollbar-thumb:hover {
 		background-color: rgba(black, 0.5);
 	}
-
 	.heading {
 		display: flex;
 		width: 100%;
 		justify-content: space-between;
 		align-items: center;
 		margin-bottom: 20px;
-
-
 		header {
 			font-size: 16px;
 			letter-spacing: 1px;
 			font-weight: 500;
 		}
-
 		a {
 			color: var(--brand-blue);
 			text-decoration: underline;
 			font-size: 14px;
 		}
 	}
-
 	li {
 		padding: 10px 0;
 		border-top: 1px solid #cecece;
-
 		header {
 			margin: 10px 0;
 			font-size: 16px;
 			font-weight: 500;
 			color: var(--dark-grey);
 		}
-
 		p {
 			font-size: 13px;
 			color: var(--grey);
@@ -198,12 +189,9 @@ table {
 		}
 	}
 }
-
-
 .offer-list {
 	margin: 30px 0;
 	list-style: none;
-
 	li {
 		display: flex;
 		width: 100%;
@@ -211,69 +199,87 @@ table {
 		background-color: white;
 		border-radius: 10px;
 		margin-bottom: 30px;
-	}
+		position: relative;
 
+		@media screen and (max-width: 1023px) {
+			box-shadow: 0px 0px 5px var(--grey);
+			flex-direction: column;
+			padding-bottom: 60px;
+		}
+	}
 	.info {
 		width: 60%;
 		padding: 20px;
 
+		@media screen and (max-width: 1023px) {
+			width: 100%;
+		}
+
 		header {
 			font-size: 16px;
 			color: var(--dark-grey);
 			font-weight: 500;
 			letter-spacing: 0.5px;
 		}
-
 		p {
 			color: var(--grey);
 			font-size: 13px;
 			line-height: 1.5;
 			margin: 15px 0;
 		}
-
 		button {
 			&.active {
 				background-color: var(--brand-blue);
 			}
+
+			@media screen and (max-width: 1023px) {
+				display: block;
+				margin: 0 auto;
+				position: absolute;
+				width: 150px;
+				bottom: 15px;
+				left: calc((100% - 150px) / 2);
+			}
 		}
 	}
-
 	.time-limit {
 		width: 40%;
 		padding: 20px;
 		border-left: 1px solid #efefef;
 		text-align: center;
 
+		@media screen and (max-width: 1023px) {
+			width: 80%;
+			margin: 0 auto;
+			border: 1px solid #ebf4fa;
+			border-radius: 3px;
+		}
+
 		header {
 			font-size: 16px;
 			color: var(--dark-grey);
 			font-weight: 500;
 			letter-spacing: 0.5px;
 		}
-
 		.caption {
 			margin: 10px 0;
 			letter-spacing: 1px;
 			font-size: 12px;
 			color: var(--grey);
 		}
-
 		.counters-holder {
 			display: flex;
 			width: 90%;
 			margin: 0 auto;
 			justify-content: space-between;
-
 			.counter {
 				width: 20%;
-
 				.heading {
 					font-size: 10px;
 					color: var(--grey);
 					letter-spacing: 0.5px;
 					font-weight: 500;
 				}
-
 				.count {
 					color: var(--brand-blue);
 					font-weight: 700;
@@ -281,7 +287,6 @@ table {
 					position: relative;
 					padding: 5px 0;
 					margin-top: 10px;
-
 					&::before {
 						content: '';
 						position: absolute;
@@ -289,10 +294,9 @@ table {
 						left: 0;
 						height: 48%;
 						width: 100%;
-						box-shadow: 0px 0px 5px #cecece;
+						box-shadow: 0 0 5px #cecece;
 						border-radius: 3px;
 					}
-
 					&::after {
 						content: '';
 						position: absolute;
@@ -300,7 +304,7 @@ table {
 						left: 0;
 						height: 48%;
 						width: 100%;
-						box-shadow: 0px 0px 5px #cecece;
+						box-shadow: 0 0 5px #cecece;
 						border-radius: 3px;
 					}
 				}
@@ -308,3 +312,50 @@ table {
 		}
 	}
 }
+.item-list {
+	list-style: none;
+	width: 100%;
+
+	@media screen and (min-width: 1023px) {
+		display: none;
+	}
+
+	.card {
+		background-color: white;
+		border-radius: 10px;
+		overflow: hidden;
+		box-shadow: 0 0 5px var(--grey);
+		margin: 30px auto;
+		display: flex;
+		width: 100%;
+		.info-holder {
+			flex-grow: 1;
+			padding: 15px;
+			line-height: 1.8;
+		}
+		header {
+			font-size: 14px;
+			font-weight: 500;
+			color: var(--dark-grey);
+		}
+		.info {
+			color: var(--dark-grey);
+			font-size: 12px;
+			label {
+				color: var(--grey);
+			}
+		}
+		.status {
+			align-self: center;
+			padding: 10px;
+			width: 100px;
+			text-align: center;
+			font-size: 12px;
+			color: var(--dark-grey);
+			font-weight: 500;
+			.toggle {
+				margin-top: 10px;
+			}
+		}
+	}
+}

src/app/menu-items/menu-items.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./menu-items.component.scss']
 })
 export class MenuItemsComponent implements OnInit {
-	selectedTab: string = 'offers';
+	selectedTab: string = 'items';
 	productAvailable: boolean = false;
 
 	constructor() { }

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'orders';
+	selected_nav: string = 'items';
 
 	constructor() { }