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