Dashboard completed

src/app/custom-selector/custom-selector.component.html

@@ -1,9 +1,9 @@
 <div class="selector" [ngStyle]="{'width.px' : 200 }">
-	<div class="container">
+	<div class="container" (click)="showDropdown = !showDropdown">
 		<div class="selected-value">
 			{{ header }}: <span *ngIf="selectedOption"> {{ selectedOption.name }} </span>
 		</div>
-		<button (click)="showDropdown = !showDropdown">
+		<button>
 			<i class="icon" [ngClass]="{'ion-md-arrow-dropdown': !showDropdown, 'ion-md-arrow-dropup': showDropdown}"></i>
 		</button>
 	</div>

src/app/dashboard/dashboard.component.html

@@ -8,13 +8,15 @@
 
 		<ul>
 			<li>
-				<div class="column">
-					<header> Pending </header>
-					<p> Waiting for confirmation </p>
-				</div>
-
-				<div class="column">
-					<div class="count"> 2 </div> Nos
+				<div class="column-holder">
+					<div class="column">
+						<header> Pending </header>
+						<p> Waiting for confirmation </p>
+					</div>
+
+					<div class="column">
+						<div class="count"> 2 </div> Nos
+					</div>
 				</div>
 
 				<div class="column">
@@ -23,13 +25,15 @@
 			</li>
 
 			<li>
-				<div class="column">
-					<header> Confirmed </header>
-					<p> To be Packed </p>
-				</div>
-
-				<div class="column">
-					<div class="count"> 5 </div> Nos
+				<div class="column-holder">
+					<div class="column">
+						<header> Confirmed </header>
+						<p> To be Packed </p>
+					</div>
+
+					<div class="column">
+						<div class="count"> 5 </div> Nos
+					</div>
 				</div>
 
 				<div class="column">
@@ -38,13 +42,15 @@
 			</li>
 
 			<li>
-				<div class="column">
-					<header> Ready to Pick </header>
-					<p> Waiting for the Customer </p>
-				</div>
-
-				<div class="column">
-					<div class="count"> 10 </div> Nos
+				<div class="column-holder">
+					<div class="column">
+						<header> Ready to Pick </header>
+						<p> Waiting for the Customer </p>
+					</div>
+
+					<div class="column">
+						<div class="count"> 10 </div> Nos
+					</div>
 				</div>
 
 				<div class="column">

src/app/dashboard/dashboard.component.scss

@@ -8,6 +8,10 @@
 .order-stats {
 	width: 70%;
 
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+	}
+
 	ul {
 		list-style: none;
 	}
@@ -22,6 +26,42 @@
 		justify-content: space-between;
 		align-items: center;
 
+		@media screen and (max-width: 1023px) {
+			align-items: flex-end;
+		}
+
+		.column-holder {
+			display: flex;
+			flex-grow: 1;
+
+			@media screen and (max-width: 1023px) {
+				flex-direction: column;
+			}
+
+			.column {
+				&:nth-child(1) {
+					width: 60%;
+
+					@media screen and (max-width: 1023px) {
+						width: 100%;
+					}
+				}
+
+				&:nth-child(2) {
+					width: 100px;
+					color: var(--grey);
+					font-size: 14px;
+
+					.count {
+						font-size: 36px;
+						font-weight: 700;
+						color: var(--dark-grey);
+						display: inline-block;
+					}
+				}
+			}
+		}
+
 		.column {
 			letter-spacing: 0.5px;
 
@@ -29,33 +69,29 @@
 				font-weight: 500;
 				color: var(--dark-grey);
 				font-size: 16px;
+
+				@media screen and (max-width: 1023px) {
+					font-size: 14px;
+				}
 			}
 
 			p {
 				font-size: 14px;
 				color: var(--grey);
 				margin-top: 10px;
-			}
-
-			&:nth-child(1) {
-				width: 40%;
-			}
-
-			&:nth-child(2) {
-				width: 100px;
-				color: var(--grey);
-				font-size: 14px;
 
-				.count {
-					font-size: 36px;
-					font-weight: 700;
-					color: var(--dark-grey);
-					display: inline-block;
+				@media screen and (max-width: 1023px) {
+					font-size: 12px;
+					margin-top: 5px;
 				}
 			}
 
 			button {
 				width: 100px;
+
+				@media screen and (max-width: 1023px) {
+					width: 80px;
+				}
 			}
 		}
 	}
@@ -69,6 +105,10 @@
 	height: calc(100vh - 70px);
 	overflow: auto;
 
+	@media screen and (max-width: 1023px) {
+		display: none;
+	}
+
 	&:hover {
 		&::-webkit-scrollbar {
 		  display: block;

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

@@ -79,7 +79,7 @@
 
 	@media screen and (max-width: 1023px) {
 		width: 100%;
-		height: 70px;
+		height: 60px;
 		box-shadow: 0px 0px 5px var(--grey);
 		position: fixed;
 		bottom: 0;
@@ -173,7 +173,7 @@
 				@media screen and (max-width: 1023px) {
 					display: block;
 					margin-right: 0;
-					font-size: 22px;
+					font-size: 24px;
 				}
 			}
 
@@ -237,5 +237,7 @@
 
 	@media screen and (max-width: 1023px) {
 		width: 100%;
+		height: calc(100vh - 60px);
+		overflow: auto;
 	}
 }

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 = 'dashboard';
+	selected_nav: string = 'orders';
 
 	constructor() { }
 

src/styles.scss

@@ -38,6 +38,12 @@ button {
 	font-size: 16px;
 	padding: 0 15px;
 	letter-spacing: 0.5px;
+
+	@media screen and (max-width: 1023px) {
+		font-size: 14px;
+		height: 35px;
+		padding: 0 10px;
+	}
 }
 
 .round-button {
@@ -58,11 +64,19 @@ button {
 	display: flex;
 	justify-content: space-between;
 
+	@media screen and (max-width: 1023px) {
+		flex-direction: column;
+	}
+
 	header {
 		font-size: 20px;
 		color: var(--dark-grey);
 		font-weight: 500;
 		letter-spacing: 0.5px;
+
+		@media screen and (max-width: 1023px) {
+			margin-bottom: 30px;
+		}
 	}
 }