When swapping the form view, move elements of one form instead of swapping 2

different forms with each other.

boards/static/css/base.css

@@ -73,4 +73,9 b' textarea, input {'
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-}
  No newline at end of file
+}
+
+.compact-form-text > textarea {
+    height: 100px;
+    width: 100%;
+}

boards/static/js/form.js

@@ -1,4 +1,4 b''
-var isCompact = true;
+var isCompact = false;
 
 $('input[name=image]').wrap($('<div class="file_wrap"></div>'));
 
@@ -21,25 +21,25 b' var isCompact = true;'
     }
 });
 
-var compactForm = $('.swappable-form-compact');
 var fullForm = $('.swappable-form-full');
 
 function swapForm() {
-    compactForm.toggle();
-    fullForm.toggle();
-
     if (isCompact) {
-        var oldText = compactForm.find('textarea')[0].value;
-        fullForm.find('textarea')[0].value = oldText;
+        // TODO Use IDs (change the django form code) instead of absolute numbers
+        fullForm.find('textarea').appendTo(fullForm.find('.form-row')[4]);
+        fullForm.find('.file_wrap').appendTo(fullForm.find('.form-row')[7]);
+        fullForm.find('.form-row').show();
     } else {
-        var oldText = fullForm.find('textarea')[0].value;
-        compactForm.find('textarea')[0].value = oldText;
+        fullForm.find('textarea').appendTo($('.compact-form-text'));
+        fullForm.find('.file_wrap').insertBefore($('.compact-form-text'));
+        fullForm.find('.form-row').hide();
+        fullForm.find('input[type=text]').val('');
     }
     isCompact = !isCompact;
-    
+
     scrollToBottom();
 }
 
-if (compactForm.length > 0) {
-    fullForm.toggle();
-}
+$(document).ready(function() {
+    swapForm();
+})

boards/templates/boards/thread.html

@@ -49,23 +49,10 b''
         <script src="{% static 'js/panel.js' %}"></script>
         <div class="form-title">{% trans "Reply to thread" %} #{{ opening_post.id }}</div>
         <div class="post-form" id="compact-form">
-            <div class="swappable-form-compact">
-            <form enctype="multipart/form-data" method="post"
-                    >{% csrf_token %}
-                <input type="file" name="image" accept="image/*"/>
-                <div class="compact-form-text">
-                    <textarea name="text" style="height: 100px;
-                width: 100%;
-                "></textarea>
-                </div>
-                <div class="form-submit">
-                    <input type="submit" value="{% trans "Post" %}"/>
-                </div>
-            </form>
-            </div>
             <div class="swappable-form-full">
                 <form enctype="multipart/form-data" method="post"
                         >{% csrf_token %}
+                        <div class="compact-form-text"></div>
                     {{ form.as_div }}
                     <div class="form-submit">
                         <input type="submit" value="{% trans "Post" %}"/>