Better way to show online players Attempt 2

css/main.css

@@ -218,3 +218,22 @@ i.rules-icon:hover {
   margin-right: 5px;
   border-radius: 50%;
 }
+.modal {
+  background: rgba(0,0,0,0.5);
+  color: #ccc;
+}
+.modal a {
+  color: rgb(200,200,200);
+}
+.modal ul {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+    display: inline-block;
+}
+.modal h4 {
+  margin-bottom: 38px;
+}
+.modal > .modal-footer {
+  background: rgba(50,50,50,0.6);
+}

index.html

@@ -56,11 +56,7 @@
             </div>
          </nav>
       </div>
-      <div class="section active cover-1" id="header">
-         <h3 id="status"> <span id="online" ></span></h3>
-         <a href="#onlineplayers" class="button modal-trigger" data-target="onlineplayers">Online Players</a>
-         
-         <div id="onlineplayers" class="modal">
+      <div id="onlineplayers" class="modal modal-fixed-footer">
          <div class="modal-content">
             <h4>Current Online Players</h4>
             <ul id="players"></ul>

js/admins.js

@@ -1,25 +0,0 @@
-var parseArray = function (array, type) {
-    var result = "";
-    
-    if (type == "developers") {
-        for (var i in array) {
-            var append = " - ";
-            
-            if (array[i] == "Madgeek1450") {
-                append += "TFM Creator";
-            } else if (array[i] == "Prozza") {
-                append += "Lead Developer";
-            } else {
-                append += "Developer";
-            }
-        
-            result += "<li><a href=\"#\">" + array[i] + append + "</a></li>"
-        }
-    
-    } else {
-        for (var i in array) {
-            result += "<li><a href=\"#\">" + array[i] + "</a></li>"
-        }
-    }
-    return result;
-};