Prettier assets, add remove selection to bulk moderation, fix noscrip…

…t multistage moderation, move fixed moderation styles to CSS

frontend/src/AjaxLoader.js

@@ -1,6 +1,6 @@
 class AjaxLoader {
   constructor() {
-    this.element = document.getElementById("misago-ajax-loader");
+    this.element = document.getElementById("misago-ajax-loader")
     this.requests = 0
     this.timeout = null
   }
@@ -28,7 +28,7 @@ class AjaxLoader {
     } else {
       this.element.classList.remove("busy")
       this.element.classList.add("complete")
-  
+
       this.timeout = setTimeout(() => {
         this.element.classList.remove("complete")
       }, 1500)
@@ -45,4 +45,4 @@ export function useLoader(target) {
   return true
 }
 
-export default AjaxLoader
+export default AjaxLoader

frontend/src/BulkModeration.js

@@ -16,16 +16,20 @@ class BulkModeration {
   }
 
   registerActions = () => {
-    this.actions.forEach(element => {
-      element.addEventListener("click", this.onAction)
-    });
+    this.actions.forEach((element) => {
+      if (element.getAttribute("moderation-action") === "remove-selection") {
+        element.addEventListener("click", this.onRemoveSelection)
+      } else {
+        element.addEventListener("click", this.onAction)
+      }
+    })
   }
 
   onAction = (event) => {
     const form = document.querySelector(this.form)
-    const data = {};
+    const data = {}
 
-    (new FormData(form)).forEach((value, key) => {
+    new FormData(form).forEach((value, key) => {
       if (typeof data[key] === "undefined") {
         data[key] = []
       }
@@ -36,33 +40,34 @@ class BulkModeration {
     data.moderation = target.getAttribute("moderation-action")
 
     if (target.getAttribute("moderation-multistage") === "true") {
-      htmx.ajax(
-        "POST",
-        document.location.href,
-        {
+      htmx
+        .ajax("POST", document.location.href, {
           target: this.modal,
           swap: "innerHTML",
           values: data,
-        }
-      ).then(() => {
-        $(this.modal).modal("show")
-      })
+        })
+        .then(() => {
+          $(this.modal).modal("show")
+        })
     } else {
-      htmx.ajax(
-        "POST",
-        document.location.href,
-        {
-          target: "#misago-htmx-root",
-          swap: "outerHTML",
-          values: data,
-        }
-      )
+      htmx.ajax("POST", document.location.href, {
+        target: "#misago-htmx-root",
+        swap: "outerHTML",
+        values: data,
+      })
     }
   }
 
+  onRemoveSelection = (event) => {
+    document.querySelectorAll(this.selection).forEach((element) => {
+      element.checked = false
+    })
+    this.update()
+  }
+
   registerEvents = () => {
     document.body.addEventListener("click", ({ target }) => {
-      if(target.tagName === "INPUT" && target.type === "checkbox") {
+      if (target.tagName === "INPUT" && target.type === "checkbox") {
         this.update()
       }
     })
@@ -86,4 +91,4 @@ class BulkModeration {
   }
 }
 
-export default BulkModeration
+export default BulkModeration

frontend/src/htmxErrors.js

@@ -62,4 +62,4 @@ export function setupHtmxErrors() {
   document.addEventListener("htmx:timeout", handleTimeoutError)
 }
 
-setupHtmxErrors()
+setupHtmxErrors()

frontend/src/index.js

@@ -8,7 +8,7 @@ import "jquery-caret"
 import htmx from "htmx.org"
 import OrderedList from "misago/utils/ordered-list"
 import "misago/style/index.less"
-import AjaxLoader, { useLoader} from "./AjaxLoader"
+import AjaxLoader, { useLoader } from "./AjaxLoader"
 import BulkModeration from "./BulkModeration"
 import "./formValidators"
 import "./htmxErrors"

frontend/src/style/misago/buttons.less

@@ -140,4 +140,4 @@
 // Moderation button
 .btn-moderation {
   .button-variant(@btn-moderation-color; @btn-moderation-bg; @btn-moderation-border);
-}
+}

frontend/src/style/misago/javascript.less

@@ -5,6 +5,10 @@
 }
 
 .misago-javascript {
-  .d-js-block { display: block; }
-  .d-js-flex { display: flex; }
+  .d-js-block {
+    display: block;
+  }
+  .d-js-flex {
+    display: flex;
+  }
 }

frontend/src/style/misago/moderation.less

@@ -1,6 +1,10 @@
 @keyframes fixed-moderation-fade-in {
-  from {opacity: 0;}
-  to {opacity: 1;}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .fixed-moderation {
@@ -22,4 +26,30 @@
     animation-name: fixed-moderation-fade-in;
     animation-duration: 300ms;
   }
-}
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    pointer-events: none;
+  }
+
+  .dropup {
+    pointer-events: all;
+  }
+}
+
+@media screen and (max-width: @screen-xs-max) {
+  .fixed-moderation .container {
+    display: block;
+  }
+
+  .fixed-moderation .dropdown-menu {
+    width: 100%;
+  }
+
+  .btn-moderation {
+    display: block;
+    width: 100%;
+  }
+}

frontend/src/style/misago/noscript-collapsible.less

@@ -17,4 +17,4 @@ input:checked + .noscript-collapsible-items {
 
 .noscript-collapsible-items .btn {
   margin-top: @line-height-computed / 2;
-}
+}

frontend/src/style/misago/responsive-utils.less

@@ -10,4 +10,4 @@
   .flex-order-last-xs {
     order: 9999;
   }
-}
+}

frontend/src/style/misago/threads-lists.less

@@ -5,7 +5,7 @@
 .threads-list {
   padding: 0;
   margin-bottom: @line-height-computed;
-  
+
   background-color: @list-group-bg;
   border: 1px solid @list-group-border;
   border-radius: @list-group-border-radius;
@@ -64,7 +64,7 @@
 
 .threads-list-item-animate {
   animation-name: misago-threads-list-item-animate;
-  animation-duration: .5s;
+  animation-duration: 0.5s;
   animation-iteration-count: 1;
 }
 
@@ -283,7 +283,8 @@
 
     line-height: 0;
   }
-  a:hover, a:focus {
+  a:hover,
+  a:focus {
     text-decoration: none;
   }
 }
@@ -526,4 +527,4 @@
   .threads-list-blankslate-message {
     font-size: @font-size-base;
   }
-}
+}

misago/templates/misago/threads/moderation.html

@@ -1,8 +1,8 @@
 {% load i18n %}
 {% if threads.moderation_actions %}
   <div class="fixed-moderation">
-    <div class="container" style="display: flex; flex-direction: row; justify-content: end;">
-      <div class="dropup" style="pointer-events: auto;">
+    <div class="container">
+      <div class="dropup">
         <button
           class="btn btn-moderation dropdown-toggle"
           type="button"
@@ -13,6 +13,16 @@
         >
         </button>
         <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="threads-moderation-menu">
+          <li>
+            <button
+              class="btn btn-link"
+              type="button"
+              moderation-action="remove-selection"
+            >
+              {% trans "Remove selection" context "moderation menu" %}
+            </button>
+          </li>
+          <li role="separator" class="divider"></li>
           {% for action in threads.moderation_actions %}
             <li>
               <button

misago/templates/misago/threads/moderation_page.html

@@ -30,7 +30,7 @@ <h3 class="panel-title">
           </h3>
         </div>
         <div class="panel-body">
-          {% incladude template_name %}
+          {% include template_name %}
         </div>
         <div class="panel-footer panel-footer-sticky">
           <button class="btn btn-primary" type="submit">