Use @media for js detection

theskumar · theskumar · commit 5599b5f374b7 · 2025-06-09T16:23:29.000+05:30
diff --git a/hypha/apply/funds/templates/funds/application_base.html b/hypha/apply/funds/templates/funds/application_base.html
@@ -126,7 +126,7 @@ <h4>
                     {% endif %}
                 </div>
             </form>
-            <p class="alert alert-error message-no-js js-hidden">
+            <p class="hidden mt-4 alert alert-error noscript:block">
                 {% trans "You must have Javascript enabled to use this form." %}
             </p>
         {% endif %}
diff --git a/hypha/apply/funds/templates/funds/applicationsubmission_form.html b/hypha/apply/funds/templates/funds/applicationsubmission_form.html
@@ -50,7 +50,7 @@
                     {% endfor %}
                 </div>
             </form>
-            <p class="alert alert-error message-no-js js-hidden">
+            <p class="hidden alert alert-error noscript:block">
                 {% trans "You must have Javascript enabled to use this form." %}
             </p>
         </div>
diff --git a/hypha/static_src/javascript/application-form.js b/hypha/static_src/javascript/application-form.js
@@ -46,9 +46,6 @@
     });
   }
 
-  // Remove the "no javascript" messages
-  document.querySelector(".message-no-js").remove();
-
   // Block multiple form submits.
   form.addEventListener("submit", function () {
     // Use setTimeout with 0 delay to ensure form submission begins
diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss
@@ -234,8 +234,8 @@
   input[type="file"] {
     @extend %off-screen;
 
-    .no-js & {
-      @extend %on-screen;
+    @media (scripting: none) {
+      display: block;
     }
   }
 
diff --git a/hypha/templates/base.html b/hypha/templates/base.html
@@ -2,7 +2,7 @@
 {% wagtail_site as current_site %}
 {% get_current_language as LANGUAGE_CODE %}
 {% get_current_language_bidi as LANGUAGE_BIDI %}
-<html class="h-full no-js" lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
+<html class="h-full" lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
     <head>
         {# TODO fallbacks if page is not defined e.g. for 404 page #}
         <meta charset="utf-8">
@@ -33,9 +33,6 @@
         {% block extra_css %}{% endblock %}
         <link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
 
-        {% comment %}Detect if javascript is enabled; helps with styling{% endcomment %}
-        <script>document.querySelector("html").classList.replace("no-js", "js")</script>
-
         <!-- Nprogressbar -->
         <script defer src="{% static 'js/vendor/nprogress-2.0.0.min.js' %}"></script>
 

Original file line number	Diff line number	Diff line change
`@@ -46,9 +46,6 @@`
`46`	`46`	`});`
`47`	`47`	`}`
`48`	`48`
`49`		`- // Remove the "no javascript" messages`
`50`		`- document.querySelector(".message-no-js").remove();`
`51`		`-`
`52`	`49`	`// Block multiple form submits.`
`53`	`50`	`form.addEventListener("submit", function () {`
`54`	`51`	`// Use setTimeout with 0 delay to ensure form submission begins`
Original file line number	Diff line number	Diff line change
`@@ -234,8 +234,8 @@`
`234`	`234`	`input[type="file"] {`
`235`	`235`	`@extend %off-screen;`
`236`	`236`
`237`		`- .no-js & {`
`238`		`- @extend %on-screen;`
	`237`	`+ @media (scripting: none) {`
	`238`	`+ display: block;`
`239`	`239`	`}`
`240`	`240`	`}`
`241`	`241`