Updated form to a new style. Fixed mark manel

boards/forms.py

@@ -68,13 +68,13 b' class NeboardForm(forms.Form):'
 
         return self._html_output(
             # TODO Do not show hidden rows in the list here
-            normal_row='<div class="form-row">'
-                       '<div class="form-label">'
+            normal_row='<div class="form-row"><div class="form-label">'
                        '%(label)s'
-                       '</div>'
-                       '<div class="form-input">'
+                       '</div></div>'
+                       '<div class="form-row"><div class="form-input">'
                        '%(field)s'
-                       '</div>'
+                       '</div></div>'
+                       '<div class="form-row">'
                        '%(help_text)s'
                        '</div>',
             error_row='<div class="form-row">'

boards/static/css/base.css

@@ -47,15 +47,18 b' input[name="image"] {'
      z-index: 1;
 }
 
-#file_wrap {
+.file_wrap {
      width: 100px;
      height: 100px;
      border: solid 1px white;
      display: inline-block;
-     float: left;
 }
 
-#file-thumb {
+form > .file_wrap {
+    float: left;
+}
+
+.file-thumb {
     width: 100px;
     height: 100px;
     background-size: cover;
@@ -66,7 +69,7 b' input[name="image"] {'
     margin-left:110px;
 }
 
-textarea {
+textarea, input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

boards/static/css/md/base_page.css

@@ -128,11 +128,7 b' p {'
 }
 
 .form-row {
-    display: table-row;
-}
-
-.form-label, .form-input, .form-errors {
-    display: table-cell;
+    width: 100%;
 }
 
 .form-label {
@@ -149,12 +145,13 b' p {'
     vertical-align: middle;
 }
 
-.post-form input, .post-form textarea {
+.post-form input:not([name="image"]), .post-form textarea {
     background: #333;
     color: #fff;
     border: solid 1px;
     padding: 0;
-    font: medium sans;
+    font: medium sans-serif;
+    width: 100%;
 }
 
 .form-submit {

boards/static/css/sw/base_page.css

@@ -89,7 +89,8 b' li {'
 }
 
 .form-row {
-    display: table-row;
+    display: table;
+    width: 100%;
 }
 .form-label, .form-input {
     display: table-cell;
@@ -108,8 +109,12 b' li {'
     border: none;
     padding: 0;
     resize: vertical;
+}
+
+.form-input > :not(.file_wrap) {
     width: 100%;
 }
+
 .form-submit {
     border-bottom: 1px solid #666;
     margin-bottom: .5em;
@@ -127,7 +132,7 b' li {'
     padding: .2em 1ex;
 }
 .form-label {
-    text-align: right;
+    text-align: left;
 }
 
 .block {

boards/static/js/form.js

@@ -1,6 +1,6 b''
 var isCompact = true;
 
-$('input[name=image]').wrap($('<div id="file_wrap"></div>'));
+$('input[name=image]').wrap($('<div class="file_wrap"></div>'));
 
 $('body').on('change', 'input[name=image]', function(event) {
     var file = event.target.files[0];
@@ -9,9 +9,11 b' var isCompact = true;'
         var fileReader = new FileReader();
 
         fileReader.addEventListener("load", function(event) {
-            $('#file_wrap').find('#file-thumb').remove();
-            $('#file_wrap').append(
-                $('<div id="file-thumb" style="background-image: url('+event.target.result+')"></div>')
+            var wrapper = $('.file_wrap');
+
+            wrapper.find('.file-thumb').remove();
+            wrapper.append(
+                $('<div class="file-thumb" style="background-image: url('+event.target.result+')"></div>')
             );
         });
 

boards/static/js/panel.js

@@ -34,19 +34,23 b' function addMarkToMsg(start, end) {'
         return addTextToEachLineOfSelection(start);
     }
 
-    var textarea = document.getElementsByTagName('textarea')[0];
-    if(!textarea) return;
-    if( document.selection ) {
-        textarea.focus();
-        sel = document.selection.createRange();
-        sel.text = start + sel.text + end;
-    } else if(textarea.selectionStart || textarea.selectionStart == '0') {
-        textarea.focus();
-        var startPos = textarea.selectionStart;
-        var endPos = textarea.selectionEnd;
-        textarea.value = textarea.value.substring(0, startPos) + start + textarea.value.substring(startPos, endPos) + end + textarea.value.substring( endPos, textarea.value.length );
-    } else {
-        textarea.value += start + end;
+    var textareas = document.getElementsByTagName('textarea');
+
+    for (var i = 0; i < textareas.length; i++) {
+        var textarea = textareas[i];
+
+        if( document.selection ) {
+            textarea.focus();
+            var sel = document.selection.createRange();
+            sel.text = start + sel.text + end;
+        } else if(textarea.selectionStart || textarea.selectionStart == '0') {
+            textarea.focus();
+            var startPos = textarea.selectionStart;
+            var endPos = textarea.selectionEnd;
+            textarea.value = textarea.value.substring(0, startPos) + start + textarea.value.substring(startPos, endPos) + end + textarea.value.substring( endPos, textarea.value.length );
+        } else {
+            textarea.value += start + end;
+        }
     }
     return false;
 }