organization

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>

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'
+      }
     }
   });
 

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);