From b4ac33ebaaf2afd9eeae5adb3e937aa81558e263 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Sun, 1 May 2022 23:15:04 -0700
Subject: [PATCH] organization

---
 resources/index.html      |  6 ++++++
 resources/js/onLoad.js    | 22 ++++++++++++++++------
 resources/style/index.css |  8 ++++----
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/resources/index.html b/resources/index.html
index 6b86265..f3edc5d 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -123,6 +123,9 @@
         </div>
       </div>
       <div id="downloadPanelInner">
+        <div class="downloadTitle", id="grassclipperTitle">
+          GrassClipper
+        </div>
         <div class="downloadRow">
           <div class="downloadSection">
             <span class="downloadLabel" id="installerTitle">Installer</span>
@@ -132,6 +135,9 @@
             Installs proxy and other tools. Required for Grasscutter servers.
           </span>
         </div>
+        <div class="downloadTitle", id="grassclipperTitle">
+          Grasscutter
+        </div>
         <div class="downloadRow">
           <div class="downloadSection">
             <span class="downloadLabel" id="downloadStable">Download Grasscutter Stable Build</span>
diff --git a/resources/js/onLoad.js b/resources/js/onLoad.js
index a1e8773..bc96832 100644
--- a/resources/js/onLoad.js
+++ b/resources/js/onLoad.js
@@ -38,6 +38,7 @@
   window.addEventListener("click", function(e) {
     const favList = document.querySelector('#ipList')
     const settingsPanel = document.querySelector('#settingsPanel')
+    const downloadPanel = document.querySelector('#downloadPanel')
 
     // This will close the favorites list no matter what is clicked
     if (favList.style.display !== 'none') {
@@ -46,23 +47,32 @@
     }
 
     // This will close the settings panel no matter what is clicked
-    let settingCheckElm = e.target
+    let checkElm = e.target
 
-    while(settingCheckElm.tagName !== 'BODY') {
-      if (settingCheckElm.id === 'settingsPanel'
-          || settingCheckElm.id === 'settingsBtn') {
+    while(checkElm.tagName !== 'BODY') {
+      if (checkElm.id === 'settingsPanel'
+          || checkElm.id === 'settingsBtn') {
         return
       }
 
-      settingCheckElm = settingCheckElm.parentElement
+      if (checkElm.id === 'downloadPanel' ||
+          checkElm.id === 'downloadBtn') {
+        return
+      }
+
+      checkElm = checkElm.parentElement
     }
 
     // We travelled through the parents, so if we are at the body, we clicked outside of the settings panel
-    if (settingCheckElm.tagName === 'BODY') {
+    if (checkElm.tagName === 'BODY') {
       // This will close the settings panel only when something outside of it is clicked
       if (settingsPanel.style.display !== 'none') {
         settingsPanel.style.display = 'none'
       }
+
+      if (downloadPanel.style.display !== 'none') {
+        downloadPanel.style.display = 'none'
+      }
     }
   });
 
diff --git a/resources/style/index.css b/resources/style/index.css
index d1e2ea6..6bb5548 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -208,6 +208,10 @@ a {
   margin-bottom: 10px;
 }
 
+.downloadTitle {
+  margin: 6px;
+}
+
 .downloadLabel,
 .settingLabel {
   display:inline-block;
@@ -216,10 +220,6 @@ a {
   margin: 10px 0px;
 }
 
-.downloadLabel {
-  margin: 14px 0px;
-}
-
 .downloadSubtitle,
 .settingSubtitle {
   color: rgb(165, 165, 165);