Posouvání příspěvkového formuláře!!!

static/js/post-form.js

@@ -15,3 +15,143 @@ $(function () {
         return false;
     });
 });
+
+// Stolen and modified code from jschan
+$(function () {
+    let dragging = false;
+    let x_offset = 0;
+    let y_offset = 0;
+    let form = $("#post-form");
+    let handle = $("#post-form-handle");
+
+    handle.on("mousedown", start);
+    handle.get(0).addEventListener("touchstart", start, { passive: true });
+    $(document).on("mouseup", stop);
+    $(document).on("touchend", stop);
+    $(window).on("resize", update_max);
+    $(window).on("orientationchange", update_max);
+
+    function start(event) {
+        dragging = true;
+
+        const rect = form.get(0).getBoundingClientRect();
+
+        switch (event.type) {
+            case "mousedown":
+                x_offset = event.clientX - rect.left;
+                y_offset = event.clientY - rect.top;
+                $(window).on("mousemove", drag);
+                break;
+            case "touchstart":
+                event.preventDefault();
+                event.stopPropagation();
+                x_offset = event.targetTouches[0].clientX - rect.left;
+                y_offset = event.targetTouches[0].clientY - rect.top;
+                $(window).on("touchmove", drag);
+                break;
+            default:
+                break;
+        }
+    }
+
+    function drag(event) {
+        if (!dragging) {
+            return;
+        }
+
+        update_max(event);
+
+        switch (event.type) {
+            case "mousemove":
+                form.css(
+                    "left",
+                    `${in_bounds(
+                        event.clientX,
+                        x_offset,
+                        form.outerWidth(),
+                        document.documentElement.clientWidth
+                    )}px`
+                );
+                form.css(
+                    "top",
+                    `${in_bounds(
+                        event.clientY,
+                        y_offset,
+                        form.outerHeight(),
+                        document.documentElement.clientHeight
+                    )}px`
+                );
+                break;
+            case "touchmove":
+                form.css(
+                    "left",
+                    `${in_bounds(
+                        event.targetTouches[0].clientX,
+                        x_offset,
+                        form.outerWidth(),
+                        document.documentElement.clientWidth
+                    )}px`
+                );
+                form.css(
+                    "top",
+                    `${in_bounds(
+                        event.targetTouches[0].clientY,
+                        y_offset,
+                        form.outerHeight(),
+                        document.documentElement.clientHeight
+                    )}px`
+                );
+                break;
+            default:
+                break;
+        }
+
+        form.css("right", "auto");
+    }
+
+    function stop() {
+        if (dragging) {
+            dragging = false;
+            $(window).off("mousemove");
+            $(window).off("touchmove");
+        }
+    }
+
+    function update_max() {
+        let rect = form.get(0).getBoundingClientRect();
+
+        if (rect.width === 0) {
+            return;
+        }
+
+        if (rect.right > document.documentElement.clientWidth) {
+            form.css("left", 0);
+        }
+
+        if (rect.bottom > document.documentElement.clientHeight) {
+            form.css("top", 0);
+        }
+
+        rect = form.get(0).getBoundingClientRect();
+
+        form.css(
+            "max-height",
+            `${document.documentElement.clientHeight - rect.top}px`
+        );
+
+        form.css(
+            "max-width",
+            `${document.documentElement.clientWidth - rect.left}px`
+        );
+    }
+
+    function in_bounds(pos, offset, size, limit) {
+        if (pos - offset <= 0) {
+            return 0;
+        } else if (pos - offset + size > limit) {
+            return limit - size;
+        } else {
+            return pos - offset;
+        }
+    }
+});

static/style.css

@@ -56,14 +56,21 @@ summary {
     padding: 0;
 }
 
+.container > form:not(#post-form) > .form-table {
+    margin: 8px auto;
+}
+
 #post-form {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
     visibility: hidden;
     position: fixed;
     right: 0;
-    top: 3rem;
+    top: 0;
     background-color: var(--box-color);
-    border: 1px solid var(--box-border);
+    padding: 4px;
-    margin: 4px;
 }
 
 #post-form:target,
@@ -79,6 +86,12 @@ summary {
     cursor: move;
 }
 
+#post-form-handle::after {
+    content: "";
+    display: block;
+    clear: right;
+}
+
 .edit-box {
     display: block;
     width: 100%;
@@ -109,6 +122,10 @@ summary {
     margin: 0 auto;
 }
 
+.form-table input[type="file"] {
+    width: 100%;
+}
+
 .form-table textarea,
 .edit-box {
     height: 8rem;
@@ -477,6 +494,11 @@ summary {
         width: 140px;
         height: 220px;
     }
+
+    #post-form,
+    #post-form .form-table {
+        width: 100%;
+    }
 }
 
 /* Only in JS */

templates/macros/post-form.html

@@ -12,7 +12,7 @@
                 {% else %}
                     Nové vlákno
                 {% endif %}
-                <a class="close-post-form float-r" href="#x">X</a>
+                <a class="close-post-form float-r" href="#">[Zavřít]</a>
             </td>
         </tr>
         <tr>
@@ -90,7 +90,7 @@
             </td>
         </tr>
         <tr>
-            <td class="label">Heslo <span class="small">(na odstranění)</span></td>
+            <td class="label">Heslo</td>
             <td><input name="password" type="password" required=""></td>
         </tr>
         <tr>