From f7b08a112c4a8d5e4372fac95e078e548558ac30 Mon Sep 17 00:00:00 2001
From: Paul Liverman III <paul.liverman.iii@gmail.com>
Date: Tue, 24 Apr 2018 10:20:50 -0700
Subject: [PATCH] collapsible api keys

---
 layouts/main.moon          |  3 +++
 static/main.css            | 19 +++++++++++++++++++
 static/main.js             | 15 +++++++++++++++
 views/index/logged_in.moon | 15 ++++++++-------
 4 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 static/main.css
 create mode 100644 static/main.js

diff --git a/layouts/main.moon b/layouts/main.moon
index 4580ce4..d5ba968 100644
--- a/layouts/main.moon
+++ b/layouts/main.moon
@@ -19,6 +19,9 @@ class extends Widget
         link rel: "stylesheet", href: "https://cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"
         -- JQuery
         script src: "https://code.jquery.com/jquery-3.3.1.min.js", integrity: "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=", crossorigin: "anonymous"
+        -- custom JS/CSS
+        script src: "/static/main.js"
+        link rel: "stylesheet", href: "/static/main.css"
       body ->
         div class: "container", ->
           @content_for "inner"
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..ee467d4
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,19 @@
+.collapsible {
+  cursor: pointer;
+  width: 100%;
+  /*border: none;*/
+  /*text-align: left;*/
+  /*outline: none;*/
+  /*font-size: 15px;*/
+}
+
+/*.active, .collapsible:hover {
+  background-color: #ccc;
+}*/
+
+.content {
+  /*padding: 0 18px;*/
+  display: none;
+  overflow: hidden;
+  /*background-color: #f1f1f1;*/
+}
diff --git a/static/main.js b/static/main.js
new file mode 100644
index 0000000..9458272
--- /dev/null
+++ b/static/main.js
@@ -0,0 +1,15 @@
+$(document).ready(function() {
+  let c = document.getElementsByClassName("collapsible");
+
+  for (let i = 0; i < c.length; i++) {
+    c[i].addEventListener("click", function() {
+      this.classList.toggle("active");
+      var content = this.nextElementSibling;
+      if (content.style.display === "block") {
+        content.style.display = "none";
+      } else {
+        content.style.display = "block";
+      }
+    });
+  }
+});
diff --git a/views/index/logged_in.moon b/views/index/logged_in.moon
index 3bd6709..55bced3 100644
--- a/views/index/logged_in.moon
+++ b/views/index/logged_in.moon
@@ -5,13 +5,14 @@ class LoggedIn extends Widget
     script -> raw "var API_KEY = '#{@keys[1].key}';"
     script src: "/static/index.js"
 
-    p "API Keys:"
-    ul ->
-      if @keys
-        for key in *@keys
-          li key.key
-      li id: "new-api-key", ->
-        button onclick: "new_api_key()", "+"
+    button class: "collapsible", "API Keys"
+    div class: "content", ->
+      ul ->
+        if @keys
+          for key in *@keys
+            li key.key
+        li id: "new-api-key", ->
+          button onclick: "new_api_key()", "New API Key"
 
     p "Tasks:"
     ul ->