151 - Make the editor bigger and autosize it

static/js/autoExpand.js

@@ -0,0 +1,14 @@
+function autosize(){
+  const el = this;
+  el.style.height = 'auto';
+  el.style.height = (el.scrollHeight ) + 'px';
+}
+
+const articleContent = document.querySelector('#content');
+let offset = 0;
+let style = window.getComputedStyle(articleContent, null);
+
+offset += parseInt(style['paddingTop']) + parseInt(style['paddingBottom']);
+autosize.bind(articleContent)();
+articleContent.addEventListener('keyup', autosize);
+

static/main.css

@@ -422,6 +422,9 @@ form.new-post .title {
 }
 form.new-post textarea {
 	min-height: 20em;
+	overflow-y: hidden;
+	resize: none;
+	box-sizing: content-box;
 }
 form.new-post input[type="submit"] {
 	background: #ECECEC;

templates/posts/new.html.tera

@@ -17,11 +17,12 @@
     {% endif %}
 
     <label for="content">{{ "Content" | _ }}<small>{{ "Markdown is supported" | _ }}</small></label>
-    <textarea id="content" name="content" value="{{ form.content | default(value="") }}"></textarea>
+    <textarea id="content" name="content" value="{{ form.content | default(value="") }}" rows="20"></textarea>
 
     {% set license_infos = "Default license will be {{ instance.default_license }}" | _(instance=instance) %}
     {{ macros::input(name="license", label="License", errors=errors, form=form, optional=true, details=license_infos) }}
 
     <input type="submit" value="{{ "Publish" | _ }}" />
 </form>
+<script src="/static/js/autoExpand.js"></script>
 {% endblock content %}