From b404dd44ab3ff0972e08e23a905648cc269a8986 Mon Sep 17 00:00:00 2001
From: Nicholas Valbusa <squallstar@gmail.com>
Date: Fri, 24 Mar 2017 18:56:43 +0100
Subject: [PATCH] some html

---
 css/builder.css |  3 ++-
 interface.html  | 27 +++++++++++++++------------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/css/builder.css b/css/builder.css
index 4880d460..61a0df51 100644
--- a/css/builder.css
+++ b/css/builder.css
@@ -41,6 +41,7 @@ nav > .btn {
   right: 6px;
   font-size: 12px;
   padding: 3px 10px;
+  width: auto;
 }
 
 .component {
@@ -83,7 +84,7 @@ nav > .btn {
 }
 
 .form-preview .form-html {
-  min-height: 200px;
+  min-height: 100px;
 }
 
 /* temporary code for the modal */
diff --git a/interface.html b/interface.html
index c8db43c7..fc20bc1d 100644
--- a/interface.html
+++ b/interface.html
@@ -22,7 +22,7 @@
 
       <label class="control-label">Step 2. Give your form a name</label>
       <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-      <input class="form-control" type="text" v-model="settings.name" :disabled="!settings.templateId"/>
+      <input placeholder="Form name" class="form-control" type="text" v-model="settings.name" :disabled="!settings.templateId"/>
     </section>
     <div class="builder" v-else>
 
@@ -67,18 +67,11 @@ <h3>Configure form</h3>
         </section>
 
         <div v-show="section === 'form'">
-          <section class="components-list col-sm-6">
-            <h3>Drag &amp; Drop components</h3>
-            <div class="form-html form-horizontal" v-sortable="{ sort: false, group: { name: 'fields', pull: 'clone', put: false, revertClone: true } }">
-              <div class="component" v-for="(field, index) in formFields">
-                <a href="#" class="add" v-on:click.prevent.stop="addField(fields.length, index)">+</a>
-                <component :is="field"></component>
-              </div>
-            </div>
-          </section>
-
           <section class="col-sm-6 form-preview">
-            <h3>Your form</h3>
+            <br />
+            <input placeholder="Form name" class="form-control" type="text" v-model="settings.name" :disabled="!settings.templateId"/>
+            <br />
+
             <div class="form-html form-horizontal" v-sortable="{ group: { name: 'fields', pull: false }, onAdd: onAdd, onUpdate: onSort }">
               <div class="component" :data-id="field.name" v-for="(field, index) in fields" v-on:click="onFieldClick(field)" v-bind:class="{ editing: field.name === activeFieldId }">
                 <component :is="field._type" v-bind="field"></component>
@@ -87,6 +80,16 @@ <h3>Your form</h3>
             </div>
           </section>
 
+          <section class="components-list col-sm-6">
+            <h3>Components</h3>
+            <div class="form-html form-horizontal" v-sortable="{ sort: false, group: { name: 'fields', pull: 'clone', put: false, revertClone: true } }">
+              <div class="component" v-for="(field, index) in formFields">
+                <a href="#" class="add" v-on:click.prevent.stop="addField(fields.length, index)">+</a>
+                <component :is="field"></component>
+              </div>
+            </div>
+          </section>
+
           <div class="modal" tabindex="-1" role="dialog" v-bind:class="{ active: !!activeFieldConfigType }">
             <div class="modal-dialog" role="document">
               <div class="modal-content">