Change layout of song subform.

3 files changed, 59 insertions, 40 deletions

diff --git a/public/styles.css b/public/styles.css
index 7cfb54a..edad5fa 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -10,7 +10,8 @@ label {
     vertical-align: top;
 }
 
-.member-info label {
+.member-info label,
+.song-info label {
   display: inline;
   text-align: left;
 }
@@ -21,7 +22,8 @@ label {
     vertical-align: top;
 }
 
-input[type=text] {
+input[type=text],
+input[type=time] {
     border: 0;
 }
 
@@ -31,27 +33,42 @@ textarea {
     margin-bottom: 5px;
 }
 
-input[type=text], textarea {
+input[type=text], input[type=time], textarea {
     border-bottom: 1px solid darkslateblue;
     background-color: whitesmoke;
     color: darkslateblue;
-    width: 10cm;
-
     font-size: large;
 }
 
-.member-info input[type=text] {
+input[type=text], textarea {
+  width: 10cm;
+}
+
+.member-info input[type=text],
+.song-info input[type=text] {
   width: 7cm;
 }
 
-.delete-member-button {
+.song-details label {
+  display: inline-block;
+  text-align: right;
+}
+
+.song-details {
+  margin-left: 1cm;
+  margin-top: 2mm;
+}
+
+.delete-member-button,
+.delete-song {
   background-color: #a00;
   color: white;
   border: 1px dotted #800;
   border-radius: 5px;
 }
 
-#add-member-button {
+#add-member-button,
+#add-song-button {
   background-color: #0a0;
   border: 1px dotted #080;
   border-radius: 5px;
diff --git a/views/index.erb b/views/index.erb
index 0edc6b0..52823db 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -73,11 +73,13 @@
             flere låter dersom du vil, men vi kan ikke garantere at vi tar med alle låtene på utgivelsen. Vær
             nøye med å oppgi riktige navn (ingen pseudonymer) på utøvere og komponister, da vi sjekker dette
             opp imot TONO/NCB for å sikre at evt. vederlag blir betalt riktig.</p>
+
+            <input type="button" name="add_song" value="Legg til låt" id="add-song-button">
+
             <% @band.songs.each do |s| %>
               <%= erb :song, layout: false, locals: { song_number: 1, song: s } %>
             <% end %>
         </div>
-        <input type="button" name="add_song" value="Legg til låt" id="add-song-button">
 
         <p>Ved å sende inn skjema, vil dere bli registrert for deltagelse på Norsk Urskog Metal Sampler 2015.
         Vi vil sende utfylt skjema og kontrakt som må underskrives og sendes tilbake før vi kan ta med låten(e)
diff --git a/views/song.erb b/views/song.erb
index 701282b..d2df519 100644
--- a/views/song.erb
+++ b/views/song.erb
@@ -1,24 +1,21 @@
 <div class="song-info" id="song-<%= song_number %>-info">
-    <h4>
-      Låt nr <%= song_number %>
-      <input type="button" id="delete-song-<%= song_number %>" class="delete-song" value="X">
-    </h4>
-    <div class="field text required">
+    <label><%= song_number %></label>
+    <span class="field text required">
         <label for="band-song-<%= song_number %>-title">Tittel:</label>
         <input type="text" id="band-song-<%= song_number %>-title"
                name="band[songs][<%= song_number %>][title]"
                value="<%= song.title %>">
-    </div>
-    <div class="field text optional">
+    </span>
+    <span class="field text optional">
         <label for="band-song-<%= song_number %>-time">Lengde:</label>
-        <input type="text" pattern="[0-9]{2}:[0-9]{2}"
+        <input type="time" pattern="[0-9]{1,2}:[0-9]{2}"
                title="Spilletid i min:sek (mm:ss)"
                id="band-song-<%= song_number %>-time"
                name="band[songs][<%= song_number %>][time]"
                value="<%= song.time %>"
                size="6">
-    </div>
-    <div class="field text optional">
+    </span>
+    <span class="field text optional">
         <label for="band-song-<%= song_number %>-isrc">ISRC-kode:</label>
         <input type="text"
                 title="Dersom låten har vært utgitt før har den en ISRC-kode. Om du vet den så oppgi den her."
@@ -26,26 +23,29 @@
                 name="band[songs][<%= song_number %>][isrc]"
                 value="<%= song.isrc %>"
                 size="11">
-    </div>
-    <div class="field textarea required">
-        <label for="band-song-<%= song_number %>-performers">Utøvere:</label>
-        <textarea cols="40" rows="5" id="band-song-<%= song_number %>-performers"
-                  name="band[songs][<%= song_number %>][performers]"
-                  title="Fullt navn (ingen pseudonymer) på alle som er med på denne innspillingen."
-                  ><%= song.performers.join("\n") %></textarea>
-    </div>
-    <div class="field textarea required">
-        <label for="band-song-<%= song_number %>-composers">Opphavsmenn:</label>
-        <textarea cols="40" rows="5" id="band-song-<%= song_number %>-composers"
-                  name="band[songs][<%= song_number %>][composers]"
-                  title="Fullt navn (ingen pseudonymer) på alle som har vært med på å skrive denne låten."
-                  ><%= song.composers.join("\n") %></textarea>
-    </div>
-    <div class="field textarea optional">
-        <label for="band-song-<%= song_number %>-notes">Andre merknader:</label>
-        <textarea cols="40" rows="5" id="band-song-<%= song_number %>-notes"
-                  name="band[songs][<%= song_number %>][notes]"
-                  title="Evt andre ting vi burde vite."
-                  ><%= song.notes %></textarea>
+    </span>
+    <input type="button" id="delete-song-<%= song_number %>" class="delete-song" value="X">
+    <div class="song-details">
+      <div class="field textarea required">
+          <label for="band-song-<%= song_number %>-performers">Utøvere:</label>
+          <textarea cols="40" rows="5" id="band-song-<%= song_number %>-performers"
+                    name="band[songs][<%= song_number %>][performers]"
+                    title="Fullt navn (ingen pseudonymer) på alle som er med på denne innspillingen."
+                    ><%= song.performers.join("\n") %></textarea>
+      </div>
+      <div class="field textarea required">
+          <label for="band-song-<%= song_number %>-composers">Opphavsmenn:</label>
+          <textarea cols="40" rows="5" id="band-song-<%= song_number %>-composers"
+                    name="band[songs][<%= song_number %>][composers]"
+                    title="Fullt navn (ingen pseudonymer) på alle som har vært med på å skrive denne låten."
+                    ><%= song.composers.join("\n") %></textarea>
+      </div>
+      <div class="field textarea optional">
+          <label for="band-song-<%= song_number %>-notes">Andre merknader:</label>
+          <textarea cols="40" rows="5" id="band-song-<%= song_number %>-notes"
+                    name="band[songs][<%= song_number %>][notes]"
+                    title="Evt andre ting vi burde vite."
+                    ><%= song.notes %></textarea>
+      </div>
     </div>
 </div>