Added a compact form to the thread.

boards/static/css/base.css

@@ -37,7 +37,7 b''
     }
 }
 
-#id_image {
+input[name="image"] {
      display: block;
      width: 100px;
      height: 100px;
@@ -51,6 +51,8 b''
      width: 100px;
      height: 100px;
      border: solid 1px white;
+     display: inline-block;
+     float: left;
 }
 
 #file-thumb {
@@ -59,3 +61,13 b''
     background-size: cover;
     background-position: center;
 }
+
+.compact-form-text {
+    margin-left:110px;
+}
+
+textarea {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
  No newline at end of file

boards/static/css/md/base_page.css

@@ -154,19 +154,19 b' p {'
     color: #fff;
     border: solid 1px;
     padding: 0;
-    width: 100%;
     font: medium sans;
 }
 
 .form-submit {
     display: table;
     margin-bottom: 1ex;
+    margin-top: 1ex;
 }
 
 .form-title {
     font-weight: bold;
-    font-size: 2.5ex;
-    text-decoration: underline;
+    font-size: 2ex;
+    margin-bottom: 0.5ex;
 }
 
 input[type="submit"] {

boards/static/css/sw/base_page.css

@@ -88,12 +88,6 b' li {'
     padding: 1ex;
 }
 
-#form {
-    display: table;
-    border-collapse: collapse;
-    width: 100%;
-}
-
 .form-row {
     display: table-row;
 }
@@ -356,4 +350,9 b' li {'
 
 .gallery_image_metadata {
     margin-bottom: 1em;
+}
+
+.swappable-form-full > form {
+    display: table;
+    width: 100%;
 }
  No newline at end of file

boards/static/js/form.js

@@ -1,10 +1,8 b''
-$('#id_image').parent().append(
-    $('<div/>', {
-        id: 'file_wrap'
-    }).append($('#id_image'))
-);
+var isCompact = true;
 
-$('body').on('change', '#id_image', function(event) {
+$('input[name=image]').wrap($('<div id="file_wrap"></div>'));
+
+$('body').on('change', 'input[name=image]', function(event) {
     var file = event.target.files[0];
 
     if(file.type.match('image.*')) {
@@ -20,3 +18,24 b''
         fileReader.readAsDataURL(file);
     }
 });
+
+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;
+    } else {
+        var oldText = fullForm.find('textarea')[0].value;
+        compactForm.find('textarea')[0].value = oldText;
+    }
+    isCompact = !isCompact;
+}
+
+if (compactForm.length > 0) {
+    fullForm.toggle();
+}
  No newline at end of file

boards/static/js/thread.js

@@ -51,4 +51,4 b' function addQuickReply(postId) {'
     $("html, body").animate({ scrollTop: $(textAreaId).offset().top }, "slow");
 }
 
-$('form').toggle();
+$('#full-form').toggle();

boards/templates/boards/posting_general.html

@@ -130,12 +130,14 b''
         <script src="{% static 'js/panel.js' %}"></script>
         <div class="post-form">
             <div class="form-title">{% trans "Create new thread" %}</div>
+            <div class="swappable-form-full">
             <form enctype="multipart/form-data" method="post">{% csrf_token %}
                 {{ form.as_div }}
                 <div class="form-submit">
                     <input type="submit" value="{% trans "Post" %}"/>
                 </div>
             </form>
+            </div>
             <div>
                 {% trans 'Tags must be delimited by spaces. Text or image is required.' %}
             </div>

boards/templates/boards/thread.html

@@ -47,17 +47,34 b''
 
     <div class="post-form-w" id="form">
         <script src="{% static 'js/panel.js' %}"></script>
-        <div class="form-title"
-            onclick="$('form').toggle();"
-            >{% trans "Reply to thread" %} #{{ opening_post.id }}</div>
-        <div class="post-form">
+        <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 %}
-                {{ form.as_div }}
+                <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 %}
+                    {{ form.as_div }}
+                    <div class="form-submit">
+                        <input type="submit" value="{% trans "Post" %}"/>
+                    </div>
+                </form>
+            </div>
+            <a onclick="swapForm(); return false;" href="#">
+                {% trans 'Switch mode' %}
+            </a>
             <div><a href="{% url "staticpage" name="help" %}">
                 {% trans 'Text syntax' %}</a></div>
         </div>