Add JavaScript items visibility utils

rafalp · Jul 7, 2024 · 5eec42a · 5eec42a
1 parent 3292de2
commit 5eec42a
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 3 deletions.
diff --git a/frontend/src/style/index.less b/frontend/src/style/index.less
@@ -181,3 +181,6 @@
 
 // Flavors
 @import "flavor/ranks-flavors.less";
+
+// Visibility overrides when JS is off
+@import "misago/javascript.less";
diff --git a/frontend/src/style/misago/javascript.less b/frontend/src/style/misago/javascript.less
@@ -0,0 +1,10 @@
+// Utility classes for making content visible only when JS is available
+.d-js-block,
+.d-js-flex {
+  display: none;
+}
+
+.misago-javascript {
+  .d-js-block { display: block; }
+  .d-js-flex { display: flex; }
+}
diff --git a/misago/static/misago/css/misago.css b/misago/static/misago/css/misago.css
diff --git a/misago/static/misago/css/misago.css.map b/misago/static/misago/css/misago.css.map
diff --git a/misago/templates/misago/base.html b/misago/templates/misago/base.html
@@ -54,6 +54,9 @@
     </script>
   </head>
   <body class="misago-{% if user.is_authenticated %}authenticated{% else %}anonymous{% endif %}{% if misago_agreement %} agreement-overlay-visible{% endif %}">
+    <script type="text/javascript">
+      document.body.classList.add("misago-javascript")
+    </script>
     {% if settings.google_tracking_id %}
       {% include "misago/analytics.html" %}
     {% endif %}

diff --git a/misago/templates/misago/threads/toolbar.html b/misago/templates/misago/threads/toolbar.html
@@ -6,7 +6,7 @@
     </div>
   </div>
   {% if threads.filters and not bottom %}
-    <div class="toolbar-section">
+    <div class="toolbar-section d-js-flex">
       <div class="toolbar-item">
         {% include "misago/threads/filters_dropdown.html" with active_filter=threads.active_filter filters=threads.filters remove_filters_url=threads.remove_filters_url %}
       </div>