Make filling out song info more ergonomic.

+ Use javascript to hide song details fields by default.
+ Add button to show song details fields when clicked.

2 files changed, 21 insertions, 13 deletions

diff --git a/public/regform.js b/public/regform.js
new file mode 100644
index 0000000..bcea7fa
--- /dev/null
+++ b/public/regform.js
@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", function() {
+  for (let details of document.getElementsByClassName('song-details')) {
+    details.classList.add('collapsed');
+  };
+
+  for (let toggler of document.getElementsByClassName('add-song-button')) {
+    toggler.onclick = function() {
+      this.style.display = "none";
+      let n = toggler.dataset.songNumber;
+      let details = document.getElementById('song-' + n + '-details');
+      details.classList.remove('collapsed');
+    }
+  };
+});
diff --git a/public/styles.css b/public/styles.css
index a236448..3c41e64 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -107,23 +107,13 @@ input[type=text], textarea {
   font-size: small;
 }
 
-.delete-member-button,
-.delete-song {
-  background-color: #a00;
-  color: white;
-  border: 1px dotted #800;
-  border-radius: 5px;
-}
-
-#add-member-button,
-#add-song-button {
-  background-color: #0a0;
-  border: 1px dotted #080;
-  border-radius: 5px;
+.add-song-button {
+  margin-left: 5mm;
 }
 
 .song-info, .member-info {
     padding-left: 1em;
+    margin-top: 0.5em;
 }
 
 .error {
@@ -136,3 +126,7 @@ input[type=text], textarea {
   font-size: 110%;
   color: whitesmoke;
 }
+
+.collapsed {
+  display: none;
+}