enhance(noscript): show warning if JS disabled and absolutely needed

owid · Aug 6, 2024 · 2696433 · 2696433
1 parent ff16f47
commit 2696433
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/site/ExplorerPage.tsx b/site/ExplorerPage.tsx
@@ -116,6 +116,7 @@ window.Explorer.renderSingleExplorerOnExplorerPage(explorerProgram, grapherConfi
                 />
                 {subNav}
                 <main id={ExplorerContainerId}>
+                    <div className="js--show-warning-block-if-js-disabled" />
                     <LoadingIndicator />
                 </main>
                 {wpContent && <ExplorerContent content={wpContent} />}

diff --git a/site/css/noscript.scss b/site/css/noscript.scss
@@ -9,3 +9,33 @@
         display: none;
     }
 }
+
+.js--show-warning-block-if-js-disabled {
+    @at-root html.js-disabled & {
+        display: block;
+        background: repeating-linear-gradient(
+            45deg,
+            $amber-10,
+            $amber-10 10px,
+            transparent 10px,
+            transparent 20px
+        );
+        // Fill the entire parent container
+        height: 100%;
+        min-height: inherit;
+        max-height: inherit;
+        width: 100%;
+
+        padding: 10px;
+        text-align: center;
+
+        &::after {
+            white-space: pre-wrap;
+            content: "⚠️ JavaScript needs to be enabled to view this content.\A Either enable JavaScript in your browser or switch to a modern browser that supports it.";
+        }
+    }
+
+    @at-root html.js-enabled & {
+        display: none;
+    }
+}
diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
@@ -114,11 +114,7 @@ export default function Chart({
                 }}
             >
                 {isExplorer ? (
-                    <div className="js--hide-if-js-enabled">
-                        <p className="align-center">
-                            Interactive visualization requires JavaScript.
-                        </p>
-                    </div>
+                    <div className="js--show-warning-block-if-js-disabled" />
                 ) : (
                     resolvedSlug && (
                         <a href={resolvedUrl} target="_blank" rel="noopener">

diff --git a/site/gdocs/components/LatestDataInsights.scss b/site/gdocs/components/LatestDataInsights.scss
@@ -17,7 +17,7 @@
     margin: -24px 0 -24px -24px;
 }
 
-html:not(.js) .latest-data-insights__viewport {
+html:not(.js-enabled) .latest-data-insights__viewport {
     overflow: auto;
 }
 
@@ -41,7 +41,7 @@ html:not(.js) .latest-data-insights__viewport {
     }
 }
 
-html:not(.js) .latest-data-insights__card,
+html:not(.js-enabled) .latest-data-insights__card,
 .latest-data-insights__card.is-snapped {
     opacity: 1;
 }

diff --git a/site/owid.scss b/site/owid.scss
@@ -685,12 +685,6 @@ a.ref sup {
     display: none !important;
 }
 
-html:not(.js) {
-    .js-only {
-        display: none;
-    }
-}
-
 @media print {
     .site-header,
     .alert-banner,