some html

Fliplet · Mar 24, 2017 · b404dd4 · b404dd4
1 parent ed460dc
commit b404dd4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -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">