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.

4 files changed, 40 insertions, 20 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;
+}
diff --git a/views/index.erb b/views/index.erb
index bbd5bb5..7d069a1 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -91,17 +91,24 @@
     <div id="form-songs" class="fieldgroup">
         <h3>Låter</h3>
 
+        <p>Dere kan registrere intill tre låter. Dersom dere vil registrere færre enn
+          tre låter, så er det bare å ikke fylle ut de resterene skjemaene. Klikk på
+          knappene nedenfor for å legge til informasjon om låtene dere vil ha med.</p>
+
         <% @band.songs.each_index do |i| %>
           <%= erb :song, layout: false, locals: { song_number: i + 1, song: @band.songs[i] } %>
         <% end %>
     </div>
 
-    <p>Ved å sende inn skjema, vil dere bli registrert for deltagelse på Norsk Urskog Metal Sampler 2019.
-    Vi vil sende utfylt skjema og kontrakt som må underskrives og sendes tilbake før vi kan ta med låten(e)
-    på selve CDen.</p>
+    <div class="fieldgroup">
+      <h3>Innsending</h3>
+
+      <p>Ved å sende inn skjemaet, vil dere bli registrert for deltagelse på Norsk Urskog
+        Metal Sampler 2019.  Vi vil sende utfylt skjema og kontrakt som må underskrives og
+        sendes tilbake før vi kan ta med låten(e) på selve CDen.</p>
+    </div>
 
     <div id="form-action" class="action">
-        <input type="submit" value="Send skjema">
-        <input type="button" value="Nullstill skjema">
+        <button type="submit">Send skjema</button>
     </div>
 </form>
diff --git a/views/song.erb b/views/song.erb
index 56848d8..55cf921 100644
--- a/views/song.erb
+++ b/views/song.erb
@@ -1,6 +1,11 @@
 <div class="song-info" id="song-<%= song_number %>-info">
-    <label>Låt nr. <%= song_number %></label>
-    <div class="song-details">
+    <label>
+      Låt nr. <%= song_number %>
+      <button type="button" class="add-song-button" data-song-number="<%= song_number %>">
+        Legg til...
+      </button>
+    </label>
+    <div class="song-details" id="song-<%= song_number %>-details">
       <div class="field text required">
           <label for="band-song-<%= song_number %>-title">Låttittel:</label>
           <input type="text" id="band-song-<%= song_number %>-title"