From 4e86d180a29e3a65a806c24d2b40354d9267397e Mon Sep 17 00:00:00 2001
From: sqozz <sqozz@geekify.de>
Date: Wed, 24 Mar 2021 15:36:49 +0100
Subject: [PATCH] Add toggle script for details

---
 homepage/html/index.html       |  7 ++++---
 homepage/static/css/styles.css |  4 +++-
 homepage/static/js/index.js    | 10 ++++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 homepage/static/js/index.js

diff --git a/homepage/html/index.html b/homepage/html/index.html
index 2d170da..43d19e6 100644
--- a/homepage/html/index.html
+++ b/homepage/html/index.html
@@ -11,7 +11,7 @@
 			<div class="player_count">Players Online: {{player_count}}/{{max_players}}</div>
 			<div class="items">
 				<div class="row">
-					<a class="item news" href="/news">
+					<a class="item news" onclick="return toggleDetails(this)">
 						<div class="icon"></div>
 						<div class="text">News</div>
 					</a>
@@ -20,13 +20,13 @@
 					</div>
 				</div>
 				<div class="row">
-					<a class="item map" href="https://play.geekify.de">
+					<a class="item map" href="https://play.geekify.de" target="_blank">
 						<div class="icon"></div>
 						<div class="text">Map</div>
 					</a>
 				</div>
 				<div class="row">
-					<a class="item whitelist" href="/request">
+					<a class="item whitelist" id="whitelist" onclick="return toggleDetails(this)">
 						<div class="icon"></div>
 						<div class="text">Request Invite</div>
 					</a>
@@ -41,5 +41,6 @@
 				</div>
 			</div>
 		</div>
+		<script src="/js/index.js"></script>
 	</body>
 </html>
diff --git a/homepage/static/css/styles.css b/homepage/static/css/styles.css
index 90c4a17..52cf522 100644
--- a/homepage/static/css/styles.css
+++ b/homepage/static/css/styles.css
@@ -89,7 +89,9 @@ body {
 }
 
 .details {
-  display: flex;
+  /* Hidden by default */
+  /*display: flex;*/
+  display: none;
   justify-content: center;
 }
 
diff --git a/homepage/static/js/index.js b/homepage/static/js/index.js
new file mode 100644
index 0000000..6d72fea
--- /dev/null
+++ b/homepage/static/js/index.js
@@ -0,0 +1,10 @@
+function toggleDetails(e) {
+  var parentElement = e.parentElement
+  var detailsElement = parentElement.querySelector(".details");
+  if (detailsElement.style.display === "none") {
+    detailsElement.style.display = "flex";
+  } else {
+    detailsElement.style.display = "none";
+  }
+  return false;
+}