diff options
| -rw-r--r-- | public/regform.js | 14 | ||||
| -rw-r--r-- | public/styles.css | 20 | ||||
| -rw-r--r-- | views/index.erb | 17 | ||||
| -rw-r--r-- | views/song.erb | 9 |
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" |