add noscript information

oczki · Mar 2, 2021 · 76aa86d · 76aa86d
1 parent b3596a5
commit 76aa86d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/css/style.css b/css/style.css
@@ -53,6 +53,14 @@ body {
   height: 100%;
 }
 
+noscript p {
+  line-height: 1.5;
+}
+
+noscript p + p {
+  margin-top: 16px;
+}
+
 /* #region Body */
 
 body {
@@ -407,6 +415,11 @@ footer {
   height: var(--footer-height);
   background-color: var(--color-footer-background);
   box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.2); /* TODO: shadow from material design */
+  visibility: hidden;
+}
+
+footer.visible {
+  visibility: visible;
 }
 
 #footer-inner-container {

diff --git a/index.php b/index.php
@@ -31,7 +31,14 @@ function addJs($name) {
     <?php addJs('ripple.min'); ?>
   </head>
   <body class="compact">
-    <main></main>
+    <main>
+      <noscript>
+        <p>Twoja przeglądarka nie&nbsp;wspiera JavaScript, który jest wymagany do&nbsp;działania Magazynu Inspiracji.</p>
+        <p>Bez&nbsp;obaw &ndash; strona nie&nbsp;używa plików cookie, nie&nbsp;śledzi Cię przez Google Analytics ani&nbsp;Facebookowe wtyczki.</p>
+        <p>Jeśli chcesz sprawdzić kod źródłowy aplikacji, zapraszam na <a href="https://github.com/oczki/inspiracje">repozytorium na&nbsp;GitHub</a>.</p>
+        <p>Aby uruchomić JavaScript, poszperaj w&nbsp;opcjach dla tej strony albo&nbsp;zmień przeglądarkę na&nbsp;nowszy model.</p>
+      </noscript>
+    </main>
     <div id="scrim"></div>
     <div id="sliding-sheets-container"></div>
     <footer></footer>

diff --git a/js/core.js b/js/core.js
@@ -894,6 +894,7 @@ class ElementPopulator {
     innerContainer.appendChild(SpecializedCreator.createAboutButton());
 
     footer.appendChild(innerContainer);
+    VisibilityController.showElement(footer);
   }
 
   static populatePageWithWordContainers() {