From dc07e1f650f962b826491d052f993f9617e6129a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sn=C3=ADda=C5=88ov=C3=BD=20Mistr?=
 <sneedmaster1337@gmail.com>
Date: Mon, 19 Feb 2024 18:02:41 +0100
Subject: [PATCH] =?UTF-8?q?Vylep=C5=A1en=C3=AD=20JS=20na=20otv=C3=ADr?=
 =?UTF-8?q?=C3=A1n=C3=AD=20obr=C3=A1zk=C5=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/js/expand-image.js         | 88 +++++++++++++++++--------------
 static/style.css                  | 16 ++++--
 templates/base.html               |  1 +
 templates/macros/post-form.html   |  8 ++-
 templates/macros/post.html        |  4 +-
 templates/staff/board-config.html | 16 +++---
 templates/staff/permissions.html  | 34 ++++++------
 templates/thread.html             |  1 +
 8 files changed, 95 insertions(+), 73 deletions(-)

diff --git a/static/js/expand-image.js b/static/js/expand-image.js
index 677265c..3463ec0 100644
--- a/static/js/expand-image.js
+++ b/static/js/expand-image.js
@@ -19,32 +19,32 @@ $(function () {
 });
 
 function toggle_image(parent, src_link) {
-    let expanded = parent.hasClass("expanded");
     let thumb = parent.find(".thumb");
     let src = parent.find(".src");
 
-    if (!expanded) {
-        if (src.length === 0) {
-            thumb.css("opacity", 0.5);
-            parent.append(`<img class="src" src="${src_link}">`);
-    
-            let src = parent.find(".src");
-            
-            src.hide();
+    if (src.length === 0) {
+        thumb.addClass("loading");
 
-            src.on("load", function () {
-                thumb.hide();
-                thumb.css("opacity", "");
-                src.show();
-            });
-        } else {
+        parent.append(`<img class="src" src="${src_link}">`);
+
+        let src = parent.find(".src");
+
+        src.hide();
+        src.on("load", function () {
+            thumb.removeClass("loading");
             thumb.hide();
             src.show();
-        }
-    } else {
-        src.hide();
-        thumb.show();
+
+            parent.closest(".post-files").addClass("float-none-b");
+        });
+
+        return;
     }
+
+    thumb.toggle();
+    src.toggle();
+
+    parent.closest(".post-files").toggleClass("float-none-b");
 }
 
 function toggle_video(parent, src_link) {
@@ -52,35 +52,41 @@ function toggle_video(parent, src_link) {
     let thumb = parent.find(".thumb");
     let src = parent.parent().find(".src");
 
-    if (!expanded) {
-        if (src.length === 0) {
-            thumb.css("opacity", 0.5);
+    if (src.length === 0) {
+        thumb.addClass("loading");
 
-            parent.append('<span class="closer">[Zavřít]<br></span>')
-
-            parent.parent().append(
+        parent.append('<b class="closer">[Zavřít]<br></b>');
+        parent
+            .parent()
+            .append(
                 `<video class="src" src="${src_link}" autoplay="" controls="" loop=""></video>`
             );
 
-            let src = parent.parent().find(".src");
+        let src = parent.parent().find(".src");
 
-            src.hide();
+        src.hide();
 
-            src.on("loadstart", function () {
-                thumb.hide();
-                thumb.css("opacity", "");
-                src.show();
-            });
-        } else {
+        src.on("loadstart", function () {
+            thumb.removeClass("loading");
             thumb.hide();
             src.show();
-            src.get(0).play();
-            parent.find(".closer").show();
-        }
-    } else {
-        src.get(0).pause();
-        src.hide();
-        thumb.show();
-        parent.find(".closer").hide();
+
+            parent.closest(".post-files").addClass("float-none-b");
+        });
+
+        return;
     }
+
+    thumb.toggle();
+    src.toggle();
+
+    if (expanded) {
+        src.get(0).pause();
+        src.get(0).currentTime = 0;
+    } else {
+        src.get(0).play();
+    }
+
+    parent.closest(".post-files").toggleClass("float-none-b");
+    parent.find(".closer").toggle();
 }
diff --git a/static/style.css b/static/style.css
index e4f6dc0..949f00d 100755
--- a/static/style.css
+++ b/static/style.css
@@ -208,6 +208,11 @@ summary {
     float: right;
 }
 
+.float-none-a,
+.float-none-b {
+    float: none !important;
+}
+
 .fixed-table {
     table-layout: fixed;
 }
@@ -301,6 +306,7 @@ summary {
 }
 
 .post-header input[type="checkbox"] {
+    height: 1em;
     vertical-align: middle;
     margin: 0;
 }
@@ -354,10 +360,6 @@ summary {
     margin: 0 8px 8px 8px;
 }
 
-.multi-files {
-    float: none;
-}
-
 .post-file {
     display: inline-block;
     vertical-align: top;
@@ -472,3 +474,9 @@ summary {
         height: 220px;
     }
 }
+
+/* Only in JS */
+
+.loading {
+    opacity: 0.5;
+}
diff --git a/templates/base.html b/templates/base.html
index f07728c..a6a7bd4 100755
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="/static/style.css">
         <script src="/static/js/jquery.min.js"></script>
         <script src="/static/js/expand-image.js"></script>
+        {% block scripts %}{% endblock %}
     </head>
     <body id="top">
         <div class="board-links header">
diff --git a/templates/macros/post-form.html b/templates/macros/post-form.html
index 91903f0..445beaa 100644
--- a/templates/macros/post-form.html
+++ b/templates/macros/post-form.html
@@ -29,7 +29,13 @@
             </td>
         </tr>
         <tr>
-            <td class="label">Soubory</td>
+            <td class="label">
+                {% if board.config.0.file_limit > 1 %}
+                    Soubory <span class="small">(max {{ board.config.0.file_limit }})</span>
+                {% else %}
+                    Soubor
+                {% endif %}
+            </td>
             <td>
                 <div class="input-wrapper">
                     <input name="files[]" type="file"{% if board.config.0.file_limit > 1 %} multiple="multiple"{% endif %}{% if (!reply && board.config.0.require_thread_file) || (reply && board.config.0.require_reply_file) %} required=""{% endif %}>
diff --git a/templates/macros/post.html b/templates/macros/post.html
index 691c79c..439f31f 100644
--- a/templates/macros/post.html
+++ b/templates/macros/post.html
@@ -40,10 +40,10 @@
         {% endif %}
     </div>
     {% if !post.files.0.is_empty() %}
-        <div class="post-files{% if post.files.0.len() > 1 %} multi-files{% endif %}">
+        <div class="post-files{% if post.files.0.len() > 1 %} float-none-a{% endif %}">
             {% for file in post.files.0 %}
                 <div class="post-file">
-                    <a title="Stáhnout ({{ file.original_name }})" download="{{ file.original_name }}" href="{{ file.file_url() }}">
+                    <a title="Stáhnout {{ file.original_name }}" download="{{ file.original_name }}" href="{{ file.file_url() }}">
                         {% if file.spoiler %}
                             [Spoiler]
                         {% else %}
diff --git a/templates/staff/board-config.html b/templates/staff/board-config.html
index 97a6bf7..0c58b97 100755
--- a/templates/staff/board-config.html
+++ b/templates/staff/board-config.html
@@ -16,7 +16,7 @@
             <td class="label">Uzamknout nástěnku</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="locked" type="checkbox" {% if board.config.0.locked %}checked="checked"{% endif %}>
+                    <input name="locked" type="checkbox" {% if board.config.0.locked %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -55,7 +55,7 @@
             <td class="label">Identifikátory (anti-samefag)</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="user_ids" type="checkbox" {% if board.config.0.user_ids %}checked="checked"{% endif %}>
+                    <input name="user_ids" type="checkbox" {% if board.config.0.user_ids %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -64,7 +64,7 @@
             <td class="label">Vlajky</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="flags" type="checkbox" {% if board.config.0.flags %}checked="checked"{% endif %}>
+                    <input name="flags" type="checkbox" {% if board.config.0.flags %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -118,7 +118,7 @@
             <td class="label">Vyžadovat obsah ve vlákně</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="require_thread_content" type="checkbox" {% if board.config.0.require_thread_content %}checked="checked"{% endif %}>
+                    <input name="require_thread_content" type="checkbox" {% if board.config.0.require_thread_content %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -127,7 +127,7 @@
             <td class="label">Vyžadovat soubor ve vlákně</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="require_thread_file" type="checkbox" {% if board.config.0.require_thread_file %}checked="checked"{% endif %}>
+                    <input name="require_thread_file" type="checkbox" {% if board.config.0.require_thread_file %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -136,7 +136,7 @@
             <td class="label">Vyžadovat obsah v odpovědi</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="require_reply_content" type="checkbox" {% if board.config.0.require_reply_content %}checked="checked"{% endif %}>
+                    <input name="require_reply_content" type="checkbox" {% if board.config.0.require_reply_content %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -145,7 +145,7 @@
             <td class="label">Vyžadovat soubor v odpovědi</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="require_reply_file" type="checkbox" {% if board.config.0.require_reply_file %}checked="checked"{% endif %}>
+                    <input name="require_reply_file" type="checkbox" {% if board.config.0.require_reply_file %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -154,7 +154,7 @@
             <td class="label">Antispam</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="antispam" type="checkbox" {% if board.config.0.antispam %}checked="checked"{% endif %}>
+                    <input name="antispam" type="checkbox" {% if board.config.0.antispam %}checked=""{% endif %}>
                 </div>
             </td>
         </tr>
diff --git a/templates/staff/permissions.html b/templates/staff/permissions.html
index fc630da..842df3c 100755
--- a/templates/staff/permissions.html
+++ b/templates/staff/permissions.html
@@ -20,7 +20,7 @@
             <td class="label">Upravit příspěvky</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="edit_posts" type="checkbox"{% if account.perms().edit_posts() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="edit_posts" type="checkbox"{% if account.perms().edit_posts() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -29,7 +29,7 @@
             <td class="label">Spravovat příspěvky</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="manage_posts" type="checkbox"{% if account.perms().manage_posts() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="manage_posts" type="checkbox"{% if account.perms().manage_posts() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -38,7 +38,7 @@
             <td class="label">Používat capcode</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="capcodes" type="checkbox"{% if account.perms().capcodes() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="capcodes" type="checkbox"{% if account.perms().capcodes() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -47,7 +47,7 @@
             <td class="label">Vlastní capcode</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="custom_capcodes" type="checkbox"{% if account.perms().custom_capcodes() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="custom_capcodes" type="checkbox"{% if account.perms().custom_capcodes() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -56,7 +56,7 @@
             <td class="label">Záznamy</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="staff_log" type="checkbox"{% if account.perms().staff_log() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="staff_log" type="checkbox"{% if account.perms().staff_log() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -65,7 +65,7 @@
             <td class="label">Hlášení</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="reports" type="checkbox"{% if account.perms().reports() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="reports" type="checkbox"{% if account.perms().reports() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -74,7 +74,7 @@
             <td class="label">Bany</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="bans" type="checkbox"{% if account.perms().bans() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="bans" type="checkbox"{% if account.perms().bans() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -83,7 +83,7 @@
             <td class="label">Bannery</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="banners" type="checkbox"{% if account.perms().banners() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="banners" type="checkbox"{% if account.perms().banners() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -92,7 +92,7 @@
             <td class="label">Nastavení nástěnek</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="board_config" type="checkbox"{% if account.perms().board_config() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="board_config" type="checkbox"{% if account.perms().board_config() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -101,7 +101,7 @@
             <td class="label">Novinky</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="news" type="checkbox"{% if account.perms().news() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="news" type="checkbox"{% if account.perms().news() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -110,7 +110,7 @@
             <td class="label">Uklízečtext (pravý redtext)</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="jannytext" type="checkbox"{% if account.perms().jannytext() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="jannytext" type="checkbox"{% if account.perms().jannytext() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -119,7 +119,7 @@
             <td class="label">Zobrazit IP adresy</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="view_ips" type="checkbox"{% if account.perms().view_ips() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="view_ips" type="checkbox"{% if account.perms().view_ips() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -128,7 +128,7 @@
             <td class="label">Obejít ban</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="bypass_bans" type="checkbox"{% if account.perms().bypass_bans() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="bypass_bans" type="checkbox"{% if account.perms().bypass_bans() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -137,7 +137,7 @@
             <td class="label">Obejít uzamčení nástěnky</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="bypass_board_lock" type="checkbox"{% if account.perms().bypass_board_lock() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="bypass_board_lock" type="checkbox"{% if account.perms().bypass_board_lock() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -146,7 +146,7 @@
             <td class="label">Obejít uzamčení vlákna</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="bypass_thread_lock" type="checkbox"{% if account.perms().bypass_thread_lock() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="bypass_thread_lock" type="checkbox"{% if account.perms().bypass_thread_lock() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -155,7 +155,7 @@
             <td class="label">Obejít CAPTCHA</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="bypass_captcha" type="checkbox"{% if account.perms().bypass_captcha() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="bypass_captcha" type="checkbox"{% if account.perms().bypass_captcha() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
@@ -164,7 +164,7 @@
             <td class="label">Obejít antispam</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="bypass_antispam" type="checkbox"{% if account.perms().bypass_antispam() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
+                    <input name="bypass_antispam" type="checkbox"{% if account.perms().bypass_antispam() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
                 </div>
             </td>
         </tr>
diff --git a/templates/thread.html b/templates/thread.html
index a9fdfed..7b4d5b4 100644
--- a/templates/thread.html
+++ b/templates/thread.html
@@ -6,6 +6,7 @@
 
 {% block theme %}{{ board.config.0.board_theme }}{% endblock %}
 {% block title %}/{{ board.id }}/ - {{ thread.content_nomarkup|inline_post }}{% endblock %}
+{% block scripts %}<script src="/static/js/update-thread.js"></script>{% endblock %}
 
 {% block content %}
 <div class="container">