From 9cb7635ad5eaf97db021da8fa2da643b2987a8bd Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 7 May 2020 16:08:07 +0200
Subject: [PATCH] Correct FAQ layout

---
 public/main.css       |  5 ++++-
 views/home.handlebars | 10 +++-------
 web-server/index.js   | 27 ++++++++++++++++++++++++++-
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/public/main.css b/public/main.css
index 89b4981..9e5dab4 100644
--- a/public/main.css
+++ b/public/main.css
@@ -215,6 +215,9 @@ section.faq {
 	margin-top: 30px;
 	grid-gap: 10px;
 }
+.questions > div > * + * {
+	margin-top: 15px;
+}
 
 .question-and-answer summary::-webkit-details-marker {
 	display: none;
@@ -254,8 +257,8 @@ section.team {
 	display: flex;
 	justify-content: center;
 	flex-wrap: wrap;
-	margin-top: 80px;
 	margin: -10px;
+	margin-top: 80px;
 }
 .team-cards .card {
 	margin: 10px;
diff --git a/views/home.handlebars b/views/home.handlebars
index f1238d8..4725af1 100644
--- a/views/home.handlebars
+++ b/views/home.handlebars
@@ -98,21 +98,17 @@
 	<section class="faq">
 		<div class="sect-top sect">
 			<h2 class="dot title">{{ locale.faq.title }}</h2>
-		</div>
-		<div class="sect-top sect column-2">
-			<div class="left-meta">
-				<p class="text">{{ locale.faq.text }}</p>
-			</div>
+			<p class="text">{{ locale.faq.text }}</p>
 		</div>
 		<div class="questions column-2">
-			{{#each locale.faq.QAs}}
+			{{#doFaq locale.faq.QAs}}
 			<details class="question-and-answer">
 				<summary>
 					{{ question }}
 				</summary>
 				<p class="text">{{{ answer }}}</p>
 			</details>
-			{{/each}}
+			{{/doFaq}}
 		</div>
 		{{!-- Tmp! --}}
 		<script>document.querySelector("details").setAttribute("open", true)</script>
diff --git a/web-server/index.js b/web-server/index.js
index 36b963b..1bd3d89 100644
--- a/web-server/index.js
+++ b/web-server/index.js
@@ -11,7 +11,32 @@ const routers = {
 
 app.use("/", routers.home);
 
-app.engine("handlebars", handlebars());
+app.engine("handlebars", handlebars({
+	helpers: {
+		doFaq(value, options) {
+			let htmlLeft = "";
+			let htmlRight = "";
+			for(let [i, v] of Object.entries(value)) {
+				let appendHtml = options.fn({
+					...v
+				}); // Tis is an HTML string
+				if(i % 2 === 0) {
+					htmlLeft += appendHtml;
+				} else {
+					htmlRight += appendHtml;
+				}
+			}
+			return `
+			<div class="left questions-left">
+				${htmlLeft}
+			</div>
+			<div class="right questions-right">
+				${htmlRight}
+			</div>
+			`;
+		}
+	}
+}));
 app.set("view engine", "handlebars");
 
 app.use(express.static("public"));