Lay-out improvements

main.py

@@ -77,7 +77,7 @@ class ReusableForm(Form):
 
         if form.validate():
             # Save the comment here.
-            flash('Op zoek naar ' + postalcode + ' ' + houseno + ' ' + houseno_ext, 'info')
+            flash('Gevonden resultaten voor: ' + postalcode + ' ' + houseno + ' ' + houseno_ext, 'info')
         else:
             flash('Postcode + huisnummer zijn verplicht.', 'info')
         return render_template('index.html', form=form)

static/css/main.css

@@ -44,15 +44,38 @@ div.form-group {
   padding: 10px 10px 30px 30px;
   background-color: #1c3054;
   color: whitesmoke;
+  text-align: left;
+  margin: 10pt;
+  vertical-align: middle;
+  overflow: hidden;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+
+div.entry-group {
+  padding: 10px 10px 30px 30px;
+  background-color: teal;
+  color: whitesmoke;
+  text-align: left;
+  margin: 10pt;
+  vertical-align: middle;
+  float: left;
+  overflow: hidden;
+
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
 }
 
 div.messages {
-  padding: 10px 10px 30px 30px;
+  padding: 10px 10px 10px 10px;
   background-color: #1c3054;
   color: whitesmoke;
+  text-align: left;
+  margin: 10pt;
+  vertical-align: middle;
+  float: left;
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
@@ -61,6 +84,11 @@ div.messages {
 div.results {
   padding: 10px 10px 30px 30px;
   background-color: lightblue;
+  color: #1c3054;
+  text-align: left;
+  margin: 10pt;
+  vertical-align: middle;
+  float: left;
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
@@ -73,6 +101,16 @@ div.about {
      -moz-border-radius: 6px;
           border-radius: 6px;
 }
+
+div.input-submit {
+  border: 0;
+  text-align: center;
+  margin: 7pt;
+  padding: 7pt;
+  color: #212121;
+}
+
+
 h2 {
   font-size: 3em;
   margin-top: 40px;

templates/index.html

@@ -5,20 +5,24 @@
         <form action="" method="post" role="form">
             {{ form.csrf }}
         <div class="form-group">
+            <div class="entry-group">
             <label for="name">Postcode:</label>
             <input type="text" class="form-control" id="postcode" name="postalcode" placeholder="Wat is je postcode?">
-
-            <label for="houseno">Huisnummer:</label>
-            <input type="text" class="form-control" id="houseno" name="houseno" placeholder="Wat is je huisnummer?">
-
-            <label for="houseno_ext">Toevoeging:</label>
-            <input type="text" class="form-control" id="houseno_ext" name="houseno_ext" placeholder="een huisnummer toevoeging?">
-
-            <div class="input-submit">
-                <input type="submit" value="Zoek">
             </div>
 
-        </div>
+            <div class="entry-group">
+            <label for="houseno">Huisnummer:</label>
+            <input type="text" class="form-control" id="houseno" name="houseno" placeholder="Wat is je huisnummer?">
+            </div>
+
+            <div class="entry-group">
+            <label for="houseno_ext">Toevoeging:</label>
+            <input type="text" class="form-control" id="houseno_ext" name="houseno_ext" placeholder="een huisnummer toevoeging?">
+            </div>
+
+            <div class="input-submit">
+                <input type="submit" class="btn-search" value="Zoek">
+            </div>
 
         </form>
         <div class="messages">
@@ -33,6 +37,7 @@
           {% endif %}
         {% endwith %}
         </div>
+
         <div class="results">
         {% with messages = get_flashed_messages(with_categories=true) %}
           {% if messages  %}
@@ -52,6 +57,7 @@
           {% endif %}
         {% endwith %}
         </div>
+      </div>
     </div>
   </div>
 {% endblock %}