FAQ page mobile UI completed

src/app/faq/faq.component.html

@@ -1,14 +1,18 @@
 <div class="widget-heading-holder">
 	<header> Frequently Asked Questions </header>
 
-	<div class="search-input">
+	<div class="search-input" *ngIf="!selectedCard">
 		<input type="text" placeholder="Quick Search">
 		<button> <i class="icon ion-md-search"></i> </button>
 	</div>
+
+	<button class="back-button round-button" *ngIf="selectedCard" (click)="selectedCard = null">
+		<i class="icon ion-md-arrow-back"></i> Back
+	</button>
 </div>
 
 <div class="container">
-	<ul class="topic-list">
+	<ul class="topic-list" [ngClass]="{'active' : !selectedCard }">
 		<li [ngClass]="{'active' : selectedCard === 1}" (click)="selectedCard = 1">
 			<header> General inquiries </header>
 			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
@@ -19,7 +23,7 @@
 		</li>
 	</ul>
 
-	<ul class="topic-detail">
+	<ul class="topic-detail" [ngClass]="{'active' : selectedCard }">
 		<div class="heading">
 			<header> General Inquiries </header>
 			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
@@ -35,5 +39,16 @@
 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus at aliquid voluptatem ut similique vitae odit fuga minima cum. Eveniet, cumque? Rerum eius voluptatem ratione deserunt, quasi non. Accusantium, incidunt.
 			</p>
 		</li>
+
+		<li>
+			<header> What is the most frequently asked question?
+				<button (click)="showDetails = !showDetails" [ngClass]="{'active' : showDetails }">
+					<i class="icon" [ngClass]="{'ion-ios-add-circle-outline': !showDetails , 'ion-ios-remove-circle-outline' : showDetails}"></i>
+				</button>
+			</header>
+			<p *ngIf="showDetails">
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus at aliquid voluptatem ut similique vitae odit fuga minima cum. Eveniet, cumque? Rerum eius voluptatem ratione deserunt, quasi non. Accusantium, incidunt.
+			</p>
+		</li>
 	</ul>
 </div>

src/app/faq/faq.component.scss

@@ -7,6 +7,11 @@
 	color: var(--brand-blue);
 	align-items: center;
 	justify-content: space-between;
+	overflow: hidden;
+
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+	}
 
 	input {
 		border: 0;
@@ -16,6 +21,7 @@
 		color: var(--dark-grey);
 		flex-grow: 1;
 		letter-spacing: 1px;
+		height: 100%;
 
 		&::placeholder {
 			color: var(--grey);
@@ -39,11 +45,26 @@
 	}
 }
 
+.back-button {
+	display: none;
+
+	@media screen and (max-width: 1023px) {
+		display: block;
+		background-color: var(--brand-blue);
+		width: 100px;
+		padding: 0;
+	}
+}
+
 .container {
 	display: flex;
 	width: 95%;
 	margin: 30px auto;
 	letter-spacing: 1px;
+
+	@media screen and (max-width: 1023px) {
+		width: 90%;
+	}
 }
 
 .topic-list {
@@ -53,9 +74,25 @@
 	margin: 0 auto;
 	list-style: none;
 
+	&.active {
+		@media screen and (max-width: 1023px) {
+			display: block;
+		}
+	}
+
+	@media screen and (max-width: 1023px) {
+		height: 100%;
+		width: 100%;
+		display: none;
+	}
+
 	&:hover {
 		&::-webkit-scrollbar {
 		  display: block;
+
+			@media screen and (max-width: 1023px) {
+				display: none;
+			}
 		}
 	}
 
@@ -118,9 +155,25 @@
 	overflow: auto;
 	padding: 20px 25px;
 
+	@media screen and (max-width: 1023px) {
+		width: 100%;
+		display: none;
+	}
+
+	&.active {
+		@media screen and (max-width: 1023px) {
+			display: block;
+			height: auto;
+		}
+	}
+
 	&:hover {
 		&::-webkit-scrollbar {
 		  display: block;
+
+			@media screen and (max-width: 1023px) {
+				display: none;
+			}
 		}
 	}
 
@@ -148,12 +201,23 @@
 			font-size: 20px;
 			color: var(--dark-grey);
 			font-weight: 500;
+			margin-bottom: 5px;
+
+			@media screen and (max-width: 1023px) {
+				font-size: 16px;
+			}
 		}
 
 		p {
 			font-size: 12px;
 			color: var(--grey);
 			line-height: 1.5;
+
+			@media screen and (max-width: 1023px) {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 		}
 	}
 
@@ -169,10 +233,17 @@
 			border-bottom: 1px solid #efefef;
 			padding: 10px 0;
 
+			@media screen and (max-width: 1023px) {
+				border-bottom: 0;
+				border-top: 1px solid #efefef;
+				font-size: 12px;
+			}
+
 			button {
 				background-color: transparent;
 				border: 0px;
 				color: var(--brand-blue);
+				margin-left: 10px;
 
 				&.active {
 					color: var(--grey);
@@ -189,6 +260,12 @@
 			font-size: 13px;
 			line-height: 1.5;
 			margin-top: 15px;
+			padding-bottom: 10px;
+
+			@media screen and (max-width: 1023px) {
+				margin-top: 0px;
+				font-size: 12px;
+			}
 		}
 	}
 }

src/app/more/more.component.html

@@ -6,15 +6,15 @@
 </section>
 
 <ul class="nav-list">
-	<li>
+	<li (click)="navigateOnClick('faq')">
 		<i class="icon ion-md-help-circle-outline"></i>
 		<label> FAQs </label>
 	</li>
-	<li>
-			<i class="icon ion-ios-chatbubbles"></i>
+	<li (click)="navigateOnClick('support')">
+		<i class="icon ion-ios-chatbubbles"></i>
 		<label> Support </label>
 	</li>
-	<li>
+	<li (click)="navigateOnClick('settings')">
 		<i class="icon ion-ios-cog"></i>
 		<label> Settings </label>
 	</li>

src/app/more/more.component.ts

@@ -1,15 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-more',
-  templateUrl: './more.component.html',
-  styleUrls: ['./more.component.scss']
+	selector: 'app-more',
+	templateUrl: './more.component.html',
+	styleUrls: ['./more.component.scss']
 })
 export class MoreComponent implements OnInit {
+	@Output() navClick = new EventEmitter();
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+	}
+
+	navigateOnClick(page: string) {
+		this.navClick.emit(page);
+	}
 
 }

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

@@ -1,6 +1,5 @@
 <section class="nav-bar">
 	<img src="assets/logo.svg" alt="Logo">
-
 	<nav>
 		<a [ngClass]="{'active' : selected_nav === 'faq'}"
 		(click)="selected_nav = 'faq'"> FAQ's </a>
@@ -52,6 +51,6 @@
 		<app-schedules *ngIf="selected_nav === 'schedule'"></app-schedules>
 		<app-faq *ngIf="selected_nav === 'faq'"></app-faq>
 		<app-support *ngIf="selected_nav === 'support'"></app-support>
-		<app-more *ngIf="selected_nav === 'more'"></app-more>
+		<app-more (navClick)="getNavPage($event)" *ngIf="selected_nav === 'more'"></app-more>
 	</section>
 </div>

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

@@ -6,11 +6,15 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'more';
+	selected_nav: string = 'faq';
 
 	constructor() { }
 
 	ngOnInit() {
 	}
 
+	getNavPage(page: string) {
+		this.selected_nav = page;
+	}
+
 }