From 16c477d09354fcb04aff06187efd14bf048509ec Mon Sep 17 00:00:00 2001
From: Harald Eilertsen <haraldei@anduin.net>
Date: Sat, 9 Sep 2017 17:47:29 +0200
Subject: Fix styling and markup for postcode/city inputs.

---
 public/styles.css | 25 ++++++++++++++++++++++++-
 views/index.erb   |  7 ++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index a9ab8f9..15460bc 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -7,7 +7,11 @@ label {
     width: 8em;
     display: inline-block;
     text-align: right;
-    vertical-align: top;
+    vertical-align: baseline;
+}
+
+.textarea label {
+  vertical-align: top;
 }
 
 .member-info label,
@@ -45,6 +49,25 @@ input[type=text], textarea {
   width: 10cm;
 }
 
+.postcode input[type=text] {
+  width: 2.5em;
+}
+
+.postcode {
+  display: inline-block;
+}
+
+.city input[type=text] {
+  width: 14.5em;
+}
+.city label {
+  display: inline;
+  text-align: left;
+}
+.city {
+  display: inline-block;
+}
+
 .song-details label {
   display: inline-block;
   text-align: right;
diff --git a/views/index.erb b/views/index.erb
index fceb73b..72feb28 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -27,7 +27,7 @@
             <input type="text" id="band_label" name="band[label]" value="<%= @band.label %>">
         </div>
 
-        <div class="field text required">
+        <div class="field textarea required">
             <label for="band_shortbio">Kort bio:</label>
             <textarea id="band_shortbio" name="band[shortbio]"><%= @band.short_bio %></textarea>
             <div class="help">
@@ -60,14 +60,15 @@
               value="<%= @band.contact.street %>">
         </div>
 
-        <div class="field text required">
+        <div class="field text required postcode">
             <label for="band-contact-postcode">Postnr:</label>
             <input type="text" id="band-contact-postcode"
+              pattern="\d{4}" maxlength="4"
               name="band[contact][postcode]"
               value="<%= @band.contact.postcode %>">
         </div>
 
-        <div class="field text required">
+        <div class="field text required city">
             <label for="band-contact-city">Sted:</label>
             <input type="text" id="band-contact-city"
               name="band[contact][city]"
-- 
cgit v1.2.3