Support mobile UI completed

src/app/faq/faq.component.ts

@@ -7,11 +7,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FaqComponent implements OnInit {
 	showDetails: boolean = true;
-	selectedCard: number = 1;
+	selectedCard: number = null;
 
 	constructor() { }
 
 	ngOnInit() {
+		window.innerWidth <= 1023? this.selectedCard = null: this.selectedCard = 1;
 	}
 
 }

src/app/support/support.component.html

@@ -1,5 +1,8 @@
 <div class="container">
-	<section class="contact-details">
+	<section class="contact-details" [ngClass]="{'hidden' : showChat }">
+		<div class="widget-heading-holder">
+			<header> Support </header>
+		</div>
 		<header> Are you facing any problem? </header>
 		<p>
 			If you need instant support then use live chat option to reach us quickly. Our support will relpy
@@ -10,10 +13,19 @@
 			<a href="#"> <label> E-mail: </label> support@domain.com </a>
 			<a href="#"> <label> Phone: </label> +91 83938 83922 </a>
 		</div>
+		<button class="chat-button rect-button" (click)="showChat = true">
+			<i class="icon ion-ios-chatbubbles"></i> Start Chat
+		</button>
 	</section>
 
-	<section class="chat">
-		<header class="heading"> <i class="icon ion-ios-chatbubbles"></i> Start Live Chat </header>
+	<section class="chat" [ngClass]="{'active' : showChat }">
+		<header class="heading">
+			<span> <i class="icon ion-ios-chatbubbles"></i> Start Live Chat  </span>
+			<button class="back-button round-button" (click)="showChat = false">
+				<i class="icon ion-md-arrow-back"></i>
+				Back
+			</button>
+		</header>
 		<div class="sub-header">
 			<header> Ask us anything! </header>
 			<p> Our team typically replies in few minutes </p>

src/app/support/support.component.scss

@@ -2,6 +2,10 @@
 	width: 95%;
 	margin-left: auto;
 	display: flex;
+
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+	}
 }
 
 .contact-details {
@@ -10,6 +14,27 @@
 	margin-top: 100px;
 	letter-spacing: 1px;
 
+	&.hidden {
+		@media screen and (max-width: 1023px) {
+			display: none;
+		}
+	}
+
+	@media screen and (max-width: 1023px) {
+		width: 90%;
+		margin: 0 auto;
+		text-align: left;
+	}
+
+	.widget-heading-holder {
+		display: none;
+
+		@media screen and (max-width: 1023px) {
+			display: block;
+			width: 100%;
+		}
+	}
+
 	header {
 		font-size: 20px;
 		color: var(--dark-grey);
@@ -21,6 +46,10 @@
 		font-size: 13px;
 		line-height: 1.5;
 		margin: 20px 0;
+
+		@media screen and (max-width: 1023px) {
+			font-size: 12px;
+		}
 	}
 
 	.sub-header {
@@ -28,6 +57,10 @@
 		color: var(--dark-grey);
 		font-weight: 500;
 		margin-bottom: 20px;
+
+		@media screen and (max-width: 1023px) {
+			font-size: 14px;
+		}
 	}
 
 	.contact-links-holder {
@@ -40,11 +73,31 @@
 			color: var(--brand-blue);
 			font-size: 13px;
 
+			@media screen and (max-width: 1023px) {
+				display: inline-block;
+				margin: 0 10px 10px 0;
+				width: auto;
+			}
+
 			label {
 				color: var(--dark-grey);
 			}
 		}
 	}
+
+	.chat-button {
+		display: none;
+
+		@media screen and (max-width: 1023px) {
+			display: inline-block;
+			border: 1px solid var(--brand-blue);
+			color: var(--brand-blue);
+			background-color: white;
+			border-radius: 10px;
+			padding: 8px 15px;
+			margin-top: 10px;
+		}
+	}
 }
 
 .chat {
@@ -54,6 +107,17 @@
 	letter-spacing: 1px;
 	position: relative;
 
+	&.active {
+		@media screen and (max-width: 1023px) {
+			display: block;
+		}
+	}
+
+	@media screen and (max-width: 1023px) {
+		display: none;
+		width: 100%;
+	}
+
 	.heading {
 		font-size: 16px;
 		color: var(--dark-grey);
@@ -61,10 +125,28 @@
 		margin: 30px 0 20px;
 		padding-left: 25px;
 
-		i {
-			color: var(--brand-blue);
-			font-size: 20px;
-			margin-right: 10px;
+		@media screen and (max-width: 1023px) {
+			display: flex;
+			align-content: center;
+			justify-content: space-between;
+		}
+
+		.back-button {
+			display: none;
+
+			@media screen and (max-width: 1023px) {
+				display: block;
+				background-color: var(--brand-blue);
+				margin-right: 15px;
+			}
+		}
+
+		span {
+			i {
+				color: var(--brand-blue);
+				font-size: 20px;
+				margin-right: 10px;
+			}
 		}
 	}
 

src/app/support/support.component.ts

@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-support',
-  templateUrl: './support.component.html',
-  styleUrls: ['./support.component.scss']
+	selector: 'app-support',
+	templateUrl: './support.component.html',
+	styleUrls: ['./support.component.scss']
 })
 export class SupportComponent implements OnInit {
+	showChat: boolean = false;
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+	}
 
 }

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