Update various windows that open to have their height automatically set

Some windows have a variable height based on the user's permissions
(e.g. having a capcode option). This sets the window height to the
minimum requiremed height based on the document loaded in.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>

board/static/board/ban.js

@@ -28,8 +28,11 @@ function openBanWindow(banUrl) {
         title: "New Ban",
         name: banWindowName,
         width: 475,
-        height: 475,
         url: banUrl,
     });
+    $(banWindow.iframe, "iframe").on("load", () => {
+        fitWindowToContent(banWindow);
+        banWindow.setResizable(false);
+    });
     banWindow.show();
 }

board/static/board/modify.js

@@ -29,8 +29,11 @@ function openModifyWindow(modifyUrl) {
         title: "Modifying post",
         name: modifyWindowName,
         width: 475,
-        height: 475,
         url: modifyUrl,
     });
+    $(modifyWindow.iframe, "iframe").on("load", () => {
+        fitWindowToContent(modifyWindow);
+        modifyWindow.setResizable(false);
+    });
     modifyWindow.show();
 }

board/static/board/post.js

@@ -3,6 +3,7 @@ const CLOSED = "closed";
 const replyWindowName = "reply-window";
 const postWindowName = "post-window";
 const reportWindowName = "report-window"
+const WINDOW_INNER_PADDING = 25;
 
 function documentClick(e) {
     let sender = e.target;
@@ -53,6 +54,14 @@ function openMenu(e) {
     $(document).on("click", closeMenu);
 }
 
+////////////////////////////////////////////////////////////////////////////////
+// Generic window functions
+////////////////////////////////////////////////////////////////////////////////
+function fitWindowToContent(frame) {
+    let rect = frame.$("html").getBoundingClientRect();
+    frame.setSize(rect.width, rect.bottom + WINDOW_INNER_PADDING)
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // Reply window
 ////////////////////////////////////////////////////////////////////////////////
@@ -67,10 +76,13 @@ function openReplyWindow(replyUrl) {
     let replyWindow = window.top.jsFrame.create({
         title: "New Reply",
         name: replyWindowName,
-        width: 385,
+        width: 500,
-        height: 350,
         url: replyUrl
     });
+    $(replyWindow.iframe, "iframe").on("load", () => {
+        fitWindowToContent(replyWindow);
+        replyWindow.$("#id_text").focus();
+    });
     replyWindow.show();
     return replyWindow;
 }
@@ -114,10 +126,13 @@ function openPostWindow(postUrl) {
     let postWindow = window.top.jsFrame.create({
         title: "New Thread",
         name: postWindowName,
-        width: 385,
+        width: 500,
-        height: 350,
         url: postUrl,
     });
+    $(postWindow.iframe, "iframe").on("load", () => {
+        fitWindowToContent(postWindow);
+        postWindow.$("#id_text").focus();
+    });
     postWindow.show();
 }
 
@@ -141,9 +156,11 @@ function openReportWindow(reportUrl) {
     let reportWindow = window.top.jsFrame.create({
         url: reportUrl,
         name: reportWindowName,
-        modal: true,
         width: 360,
-        height: 95,
+    });
+    $(reportWindow.iframe, "iframe").on("load", () => {
+        fitWindowToContent(reportWindow);
+        reportWindow.setResizable(false);
     });
     reportWindow.show();
 }

board/templates/board/post_create_view.html

@@ -1,6 +1,30 @@
 {% extends "board/base.html" %}
 {% load i18n post_body %}
 
+{% block extrastyle %}
+<style>
+table {
+    width: 100%;
+    height: 100%;
+}
+th {
+    width: 1%;
+    white-space: wrap;
+    text-align: right;
+}
+textarea {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+}
+input[type=text] {
+    box-sizing: border-box;
+    width: 100%;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <form method="post" action="{% url 'board:post_create' url=board.url %}" enctype="multipart/form-data">
     {% csrf_token %}

board/templates/board/reply_create_view.html

@@ -1,11 +1,34 @@
 {% extends "board/base.html" %}
 {% load i18n post_body %}
 
+{% block extrastyle %}
+<style>
+table {
+    width: 100%;
+    height: 100%;
+}
+th {
+    width: 1%;
+    white-space: wrap;
+    text-align: right;
+}
+textarea {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+}
+input[type=text] {
+    box-sizing: border-box;
+    width: 100%;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <form method="post" action="{% url 'board:reply_create' url=board.url id=post.id %}" enctype="multipart/form-data">
     {% csrf_token %}
     <table>
-    {# {{ form.as_table }} #}
     {% for field in form %}
         {% if field.name != "capcode" %}
         <tr>